Ajax用法

---

一、$.ajax

jquery 调⽤ ajax ⽅法：
 格式：
 $.ajax({
	 type：请求⽅式 GET/POST,
	 url：请求地址 url,
	 async：是否异步，默认是 true 表示异步,
	 data：发送到服务器的数据,
	 dataType：预期服务器返回的数据类型,
	 contentType：设置请求头,
	 success：请求成功时调⽤此函数,
	 error：请求失败时调⽤此函数
});

示例

get请求

$.ajax({
    type:"get",
    url:"js/cuisine_area.json",
    async:true,
    success : function (msg) {
        var str = msg;
        console.log(str);
        $('div').append("<ul></ul>");
        for(var i=0; i<msg.prices.length;i++){
            $('ul').append("<li></li>");
            $('li').eq(i).text(msg.prices[i]);
        }
    },
    error : function (errMsg) {
        console.log(errMsg);
        $('div').html(errMsg.responseText);
    }
});

post请求（需要有后端）

$.ajax({
    type:"post",
    data:"name=tom",
    url:"js/cuisine_area.json",
    contentType: "application/x-www-form-urlencoded",
    async:true,
    success : function (msg) {
        var str = msg;
        console.log(str);
        $('div').append("<ul></ul>");
        for(var i=0; i<msg.prices.length;i++){
            $('ul').append("<li></li>");
            $('li').eq(i).text(msg.prices[i]);
        }
    },
    error : function (errMsg) {
        console.log(errMsg);
        $('div').html(errMsg.responseText)
    }
});

二、$.get

这是⼀个简单的 GET 请求功能以取代复杂 $.ajax 。
请求成功时可调⽤回调函数。如果需要在出错时执⾏函数，请使⽤ $.ajax。

1、请求json⽂件，忽略返回值

$.get('js/cuisine_area.json');

2、请求json⽂件，传递参数，忽略返回值

  $.get('js/cuisine_area.json', {name:"tom",age:100});

3、请求json⽂件,拿到返回值,请求成功后可拿到返回值

   $.get('js/cuisine_area.json', function(data){
       console.log(data);
   });

4、请求json⽂件,传递参数,拿到返回值

$.get('js/cuisine_area.json', {name:"tom",age:100}, function(data){
    console.log(data);
});

三、$.post

这是⼀个简单的 POST 请求功能以取代复杂 $.ajax 。
请求成功时可调⽤回调函数。如果需要在出错时执⾏函数，请使⽤ $.ajax。
1、请求json⽂件，忽略返回值

$.post('../js/cuisine_area.json'); 

2、请求json⽂件，传递参数，忽略返回值

$.post('js/cuisine_area.json', {name:"tom",age:100});

3、请求json⽂件,拿到返回值,请求成功后可拿到返回值

$.post('js/cuisine_area.json', function(data){
   console.log(data);
}); 

4、请求json⽂件,传递参数,拿到返回值

$.post('js/cuisine_area.json', {name:"tom",age:100}, function(data){
 console.log(data);
});

四、$.getJSON

表示请求返回的数据类型是JSON格式的ajax请求

$.getJSON('js/cuisine_area.json', {name:"tom",age:100}, function(data){
 // 要求返回的数据格式是JSON格式
 console.log(data); 
});

data的数据格式

1、json格式

形如：
{“username”:”chen”,”nickname”:”alien”}

2、json字符串

形如：
'{“username”:”chen”,”nickname”:”alien”}'
或者
JSON.stringify({“username”:”chen”,”nickname”:”alien”})

3.标准参数模式

形如：
“username=chen&nickname=alien”
或者
$(“#form1”).serialize()
其含义是把表单的数据拼成这个格式的字符串！

总结：
post请求能用1、2、3类型传递参数
get请求能用1、3类型传递参数
$(“#form1”).serialize() 是将对应表单中的input的name和value进行拼装，最后拼成3类型的字符串