[jQuery知识]jQuery之知识十三-Ajax中级

前言

1.getScript()和.getJSON() 
2.$.ajax()方法 
3.表单序列化

一.getScript()和.getJSON()

jQuery 提供了一组用于特定异步加载的方法:.getScript()，用于加载特定的JS文件;.getJSON()，用于专门加载 JSON 文件。

有时我们希望能够特定的情况再加载 JS 文件，而不是一开始把所有 JS 文件都加载了，这时课时使用$.getScript()方法。

//点击按钮后再加载 JS 文件 $('input').click(function () {$.getScript('test.js'); });
1
2
3
1
2
3

$.getJSON()方法是专门用于加载 JSON 文件的，使用方法和之前的类似。

$('input').click(function () {$.getJSON('test.json', function (response, status, xhr) { alert(response[0].url);}); });
1
2
3
4
1
2
3
4

二 $.ajax()

.ajax()是所有ajax方法中最底层的方法，所有其他方法都是基于.ajax()方法的封装。这个方法只有一个参数，传递一个各个功能键值对的对象。 

//$.ajax 使用 $('input').click(function () {$.ajax({type : 'POST',url : 'test.php', data : {url : 'ycku' },success : function (response, stutas, xhr) { $('#box').html(response);} });});
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9

注意:对于 data 属性，如果是 GET 模式，可以使用三种之前说所的三种形式。如果是 POST 模式可以使用之前的两种形式。

三.表单序列化

Ajax 用的最多的地方莫过于表单操作，而传统的表单操作是通过 submit 提交将数据传 输到服务器端。如果使用 Ajax 异步处理的话，我们需要将每个表单元素逐个获取才方能提 交。这样工作效率就大大降低。

//常规形式的表单提交$('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);} });});
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10

使用表单序列化方法.serialize()，会智能的获取指定表单内的所有元素。这样，在面对 大量表单元素时，会把表单元素内容序列化为字符串，然后再使用 Ajax 请求。

//使用.serialize()序列化表单内容$('form input[type=button]').click(function () {$.ajax({type : 'POST',url : 'test.php',data : $('form').serialize(),success : function (response, status, xhr) {alert(response); }});});
1
2
3
4
5
6
7
8
9
10
11
1
2
3
4
5
6
7
8
9
10
11

.serialize()方法不但可以序列化表单内的元素，还可以直接获取单选框、复选框和下拉 列表框等内容。

//使用序列化得到选中的元素内容 $(':radio').click(function () {$('#box').html(decodeURIComponent($(this).serialize())); });
1
2
3
4
1
2
3
4

除了.serialize()方法，还有一个可以返回 JSON 数据的方法:.serializeArray()。这个方法 可以直接把数据整合成键值对的 JSON 对象。

$(':radio').click(function () { console.log($(this).serializeArray()); var json = $(this).serializeArray(); $('#box').html(json[0].value);});
1
2
1
2

有时，我们可能会在同一个程序中多次调用.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);} });});
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8

在使用 data 属性传递的时候，如果是以对象形式传递键值对，可以使用$.param()方法 将对象转换为字符串键值对格式。

var obj = {a : 1, b : 2, c : 3}; var form = $.param(obj); alert(form);
1
2
3
1
2
3

注意:使用$.param()将对象形式的键值对转为 URL 地址的字符串键值对，可以更加稳 定准确的传递表单内容。因为有时程序对于复杂的序列化解析能力有限，所以直接传递 obj 对象要谨慎。