【Ajax】之jQuery中的Ajax

時間 2019-12-08

標籤 Ajax jquery ajax 欄目 Ajax 简体版

原文原文鏈接

Ajax

1.jQuery中的Ajax

load()方法
異步請求的地址
異步請求的數據
異步請求成功後的回調函數
返回值服務器端的響應結果jquery

<body>
<button>按鈕</button>
<script src="js/jquery.js"></script>
<script>
    $('button').click(function(){

        $('button').load('data/server2.json', {name:'犬夜叉'}, function(){
            console.log('異步請求成功...');
        });
    });

</script>
</body>

$.get()與$.post()方法

$.get(url, data, callback, type)方法-請求方式GET
$.post()方法-請求方式POST
異步請求的地址
異步請求的數據
異步請求成功後的回調函數
設置服務器端響應結果的格式ajax

<body>
<button>按鈕</button>
<script src="js/jquery.js"></script>
<script>
    $('button').click(function(){

        $.get('data/server2.json', {name:'犬夜叉'}, function(response){
            console.log(response);
        }, 'json');

    });
</script>
</body>

ajax()方法

url；異步請求的地址
settings-對象類型
data - 發送給服務器端的請求數據
dataType-服務器端響應結果的格式
success-異步請求成功後回調函數json

<body>
<button>按鈕</button>
<script src="js/jquery.js"></script>
<script>
    $('button').click(function(){
        
        $.ajax('data/server2.json', {
            type : 'get',
            dataType : 'text',
            success : function(data){
                console.log(data);
            }
        });
    });
</script>
</body>

$.getScript方法

url；JavaScript文件url地址
callback；該文件成功加載後回調函數
`<body>
<button>按鈕</button>
<script src="js/jquery.js"></script>
<script>服務器

$('button').click(function () {
    // 動態加載指定JavaScript文件，而且執行
    $.getScript('data/server.js',function (data) {
        console.log(data);
        eval(data);
    });
});

</script>
</body>`異步

$.getJSON()方法

url；JavaScript文件url地址
data；發送個服務端key/value的數據內容
callback；該文件成功加載後回調函數函數

<body>
<button>按鈕</button>
<script src="js/jquery.js"></script>
<script>
    $('button').click(function(){
        // getJSON()方法的請求方式爲GET
        $.getJSON('data/server2.json', {name:'張無忌'},function(data){
            console.log(data);
        });
    });
</script>
</body>

2.異步提交表單

獲取全部表單組件的數據值
並該數據值拼成指定的字符串和JSON格式的數據
並經過異步交互的方式提交表單post

表單序列化

serialize()方法把表單組件數據值轉換爲字符串內容
serializeArray()方法把表單組件數據值轉換爲JSON的數據格式url

<body>
<form action="#">
    <input type="text" name="username" is="name">
    <input type="text" name="password" is="pwd">
    <input type="submit">
</form>
<script src="js/jquery.js"></script>
<script>
    $('form').bind('submit',function (event) {
        event.preventDefault();
//        　阻止默認行爲
        /*var data = $('form').serialize();*/
        var data = $('form').serializeArray();
//        根據表單默認同步提交獲取數據方式
        console.log(data);
        $.post('data/server5.json',daa, function (response) {
//            經過異步交互提交表單
            console.log(response);
        });
    });
</script>
</body>