20151207jquery 学习笔记 Ajax

.load()方法是局部方法，因为他需要一个包含元素的 jQuery 对象作为前缀。而$.get()和 $.post()是全局方法，无须指定某个元素。对于用途而言，.load()适合做静态文件的异步获取，而对于需要传递参数到服务器页面的，$.get()和$.post()更加合适。 $.get()方法有四个参数，前面三个参数和.load()一样，多了一个第四参数 type，即服务器返回的内容格式：包括 xml、html、script、json、jsonp 和 text。第一个参数为必选参数，后面三个为可选参数。

//使用$.get()异步返回 html 类型

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

$.get('test.php',{

url:'ycku'

},function(response,status,xhr){

if(status=='success'){

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

} }) //type 自动转为 html

});

注意：第四参数 type 是指定异步返回的类型。一般情况下 type 参数是智能判断，并不需要我们主动设置，如果主动设置，则会强行按照指定类型格式返回。

//使用$.get()异步返回 xml

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

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

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

}); //type 自动转为 xml

});

注意：如果载入的是 xml 文件，type 会智能判断。如果强行设置 html 类型返回，则会把 xml 文件当成普通数据全部返回，而不会按照 xml 格式解析数据。

//使用$.get()异步返回 json

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

alert(response[0].url);
});

$.post()方法的使用和$.get()基本上一致，他们之间的区别也比较隐晦，基本都是背后的不同，在用户使用上体现不出。具体区别如下：

1.GET 请求是通过 URL 提交的，而 POST 请求则是 HTTP 消息实体提交的；

2.GET 提交有大小限制（2KB），而 POST 方式不受限制；

3.GET 方式会被缓存下来，可能有安全性问题，而 POST 没有这个问题；

4.GET 方式通过$_GET[]获取，POST 方式通过$_POST[]获取。

//使用$.post()异步返回 html

$.post('test.php',{

url:'ycku'

},function(response,status,xhr){

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

});

$.getScript()和$.getJSON()

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

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

//点击按钮后再加载 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()是所有 ajax 方法中最底层的方法，所有其他方法都是基于$.ajax()方法的封装。这个方法只有一个参数，传递一个各个功能键值对的对象。

//$.ajax 使用

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

$.ajax({ type:'POST', //这里可以换成 GET

url:'test.php',

data:{

url:'ycku'

}, success:function(response,stutas,xhr){

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

}
});
});

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

表单序列化

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

//常规形式的表单提交

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

$.ajax({

type:'POST',

url:'test.php',

data:{

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

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

success:function(response,status,xhr){

alert(response);

}

});

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

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

$('forminput[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());

varjson=$(this).serializeArray();

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

});

有时，我们可能会在同一个程序中多次调用$.ajax()方法。而它们很多参数都相同，这个时候我们课时使用 jQuery 提供的$.ajaxSetup()请求默认值来初始化参数。

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

$.ajaxSetup({

type:'POST',

url:'test.php',

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

});

$.ajax({

success:function(response,status,xhr){

alert(response);

}

});

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

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

varform=$.param(obj);

alert(form);

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

注：以上教程均来源于北风网，特此声明！！！

巴特西

20151207jquery 学习笔记 Ajax

最新文章

热门文章