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
对象要谨慎。