20151207jquery 学习笔记 Ajax

时间:2023-03-09 14:16:37
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()方法的封装。 这个方法只有一个参数,传递一个各个功能键值对的对象。

20151207jquery 学习笔记 Ajax

20151207jquery 学习笔记 Ajax

20151207jquery 学习笔记 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 对象要谨慎。

注:以上教程均来源于北风网,特此声明!!!