谈谈jQuery中Ajax那些事

jQuery中的Ajax

jQuery不仅对JavaScript语言进行了封装，也对Ajax异步交互进行了封装，jQuery提供了6个Ajax操作的方法：
1.load()方法
2.$.get()方法和$.post()方法
3.$.ajax()方法
4.$.getScript()方法和$.getJSON()方法
jQuery除了封装了六个Ajax操作的方法，还提供了一下几种事件：
1.ajaxStart()和ajaxStop()事件
2.ajaxComplete()事件、ajaxSend()事件、ajaxError()事件和ajaxSuccess()事件

• load()方法

load()方法是jQuery中最为简单的Ajax方法

/*load(url,data,callback)方法
参数：
url：异步请求的地址
data：异步请求的数据
如果省略请求数据的话，当前的请求方式为GET
如果发送请求数据的话，当前的请求方式为POST
callback：异步请求成功后的回调函数
返回值：服务器端的响应结果
注意：自动将返回结果写入到目标元素中
 */
//html代码:
<button></button>
//JavaScript代码：
$('button').click(function(){
    $('button').load('data/server.json',function(){
        console.log('异步请求成功....');
    });
});

• get()方法

/*
    $.get(url,data,callback,type)方法:请求方式为GET
    参数：
    url:异步请求的地址
    data:异步请求的数据
    callback：异步请求成功后的回调函数
    type：设置服务器端响应结果的格式
    xml、html、script、json、text等
*/
$.get('data/server.json',{name:'张三'},function(data){
    console.log(data);
},'json');

• post()方法

/*
    $.post()方法：请求方式为POST
    参数：
    url：异步请求的地址
    data：异步请求的数据
    callback：异步请求成功后的回调函数
    type：设置服务器端响应结果的格式xml、html、script、json、text等
*/
$.post('data/server.json',{name:"张三"},fucntion(data){
    console.log(data);
},'json');

• ajax()方法

/*
    $.ajax(url,[settings])方法
    参数：
    url：请求地址
    settings：设置异步请求的参数
    settings选项：对象类型
    type：设置请求方式
    data:发送给服务器端的请求数据
    dataType：服务器端响应结果的格式
    success：异步请求成功后的回调函数
    function(data,textStatus,jqXHR){}
    data:表示服务器响应的结果
    textStatus：表示服务器端当前的状态
    jqXHR：Ajax中的核心对象
*/
$.ajax('data/server.json',{
    type:'get',
    dataType:'text',
    success:function(data){
        console.log(data);
    }
});

• getScript()方法

html代码：
<button>按钮</button>

JavaScript代码：
$('button').click(function(){
       //动态加载指定JavaScript文件，并且执行
    $.getScript('data/server.js',function(data){
        console.log(data);
    })
});

• getJSON()方法

html代码：
<button>按钮</button>

JavaScript代码：
$('button').click(function(){
    //getJSON()方法的请求方式为GET
    $.getJSON('data/server.json',{name:'张三'},function(data){
        console.log(data);
    })
});

• 表单序列化

专门针对表单的方法，可以快速获取表单input里面的value，但是必须在表单中添加name属性，否则获取不到

html代码：
<form>
    <input type='text'>
    <input type='password'>
    <input type='submit'>
</form>

JavaScript代码：
$('form').bind('submit',function(event){
    //阻止提交按钮的默认行为
    event.preventDefault();
    //表单序列化：根据表单默认同步提交获取数据的方式
    //var data=$('form').serialize();
    var data=$('form').serializeArray();
    //通过一部交互提交表单
    $,post('data/server,json',data,function(data){
           console.log(data);
    });
});