如需要跟多资料请点击下方图片⬇(扫码加好友→备注 66)
Jquery 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){console.log(data); // 要求返回的数据格式是 JSON 格式
});