jQuery學習筆記之十二-----Ajax

一 Ajax簡介

異步JavaScript和XML

二  load()方法

jQuery 采用了三層封裝：最底層的封裝方法為：$.ajax()，而通過這

層封裝了第二層有三種方法：.load()、$.get()和$.post()，最高層是$.getScript()和$.getJSON()

方法。

$('input').click(function() {

$('#box').load('test.html');

})

//不傳遞 data，則預設 get 方式

$('input').click(function() {

$('#box').load('test.jsp?url=ycku');

})

//get 方式接受的 PHP

<?php

if ($_GET['url'] == 'ycku') {

echo '瓢城 Web 俱樂部官網';

} else {

echo '其他網站';

}

?>

//傳遞 data，則為 post 方式

$('input').click(function () {

$('#box').load('test.php', {

url : 'ycku'

});

});

<?php

if ($_GET['url'] == 'ycku') {

echo '瓢城 Web 俱樂部官網';

} else {

echo '其他網站';

}

?>

$('input').click(function () {

$('#box').load('test.php', {

url : 'ycku'

}, function (response, status, xhr) {

alert('傳回的值為：' + response + '，狀态為：' + status + '，

狀态是：' + xhr.statusText);

});

});

三．$.get()和$.post()

//使用$.get()異步傳回 xml

$('input').click(function () {

$.get('test.xml', function (response, status, xhr) {

$('#box').html($(response).find('root').find('url').text());

});

//type 自動轉為 xml

});

四．$.getScript()和$.getJSON()

//點選按鈕後再加載 JS 檔案

$('input').click(function () {

$.getScript('test.js');

});

$.getJSON()方法是專門用于加載 JSON 檔案的，使用方法和之前的類似。

$('input').click(function () {

$.getJSON('test.json', function (response, status, xhr) {

alert(response[0].url);

});

});

五  $.ajax()

//$.ajax 使用

$('input').click(function () {

$.ajax({

type : 'POST',

//這裡可以換成 GET

url : 'test.php',

data : {

url : 'ycku'

},

success : function (response, stutas, xhr) {

$('#box').html(response);

}

});

});

六．表單序列化

//正常形式的表單送出

$('form input[type=button]').click(function () {

$.ajax({

type : 'POST',

url : 'test.php',

data : {

user : $('form input[name=user]').val(),

email : $('form input[name=email]').val()

},

success : function (response, status, xhr) {

alert(response);

}

});

});

使用表單序列化方法.serialize()，會智能的擷取指定表單内的所有元素

//使用.serialize()序列化表單内容

$('form input[type=button]').click(function () {

$.ajax({

type : 'POST',

url : 'test.php',

data : $('form').serialize(),

success : function (response, status, xhr) {

alert(response);

}

});

.serialize()方法不但可以序列化表單内的元素，還可以直接擷取單選框、複選框和下拉

清單框等内容。

//使用序列化得到選中的元素内容

$(':radio').click(function () {

$('#box').html(decodeURIComponent($(this).serialize()));

});

除了.serialize()方法，還有一個可以傳回 JSON 資料的方法：.serializeArray()。這個方法

可以直接把資料整合成鍵值對的 JSON 對象。

$(':radio').click(function () {

console.log($(this).serializeArray());

var json = $(this).serializeArray();

$('#box').html(json[0].value);

});

有時，我們可能會在同一個程式中多次調用$.ajax()方法。而它們很多參數都相同，這

個時候我們課時使用 jQuery 提供的$.ajaxSetup()請求預設值來初始化參數。

$('form input[type=button]').click(function () {

$.ajaxSetup({

type : 'POST',

url : 'test.php',

data : $('form').serialize()

});

$.ajax({

success : function (response, status, xhr) {

alert(response);

}

});

});

在使用 data 屬性傳遞的時候，如果是以對象形式傳遞鍵值對，可以使用$.param()方法

将對象轉換為字元串鍵值對格式。

var obj = {a : 1, b : 2, c : 3};

var form = $.param(obj);

alert(form);

注意：使用$.param()将對象形式的鍵值對轉為 URL 位址的字元串鍵值對，可以更加穩

定準确的傳遞表單内容。因為有時程式對于複雜的序列化解析能力有限，是以直接傳遞 obj

對象要謹慎。