ajax的概念就不在说了。客户端从服务器端请求数据,只说基于在jquery封装好的基础之上浅谈ajax的用法。
$.ajax(url,[settings]); jquery最底层实现;
$.get(url,[data],[fn],[type])与$.post(url,[data],[fn],[type]);在底层$.ajax()的基础上进行了简化。
html页面:
员工查询
员工新建
$(document).ready(function(){
$("#search").click(function(){
$.ajax({
type: "GET",
url: "serverjson.php?number=" + $("#keyword").val(),
dataType: "json",
success: function(data) {
if (data.success) {
$("#searchResult").html(data.msg);
} else {
$("#searchResult").html("出现错误:" + data.msg);
}
},
error: function(jqXHR){
alert("发生错误:" + jqXHR.status); //错误状态码
},
});
});
$("#save").click(function(){
$.ajax({
type: "POST",
url: "serverjson.php",
cache: false,
//不设置ajax缓存
async: false
,//同步操作
data: {
name: $("#staffName").val(),
number: $("#staffNumber").val(),
sex: $("#staffSex").val(),
job: $("#staffJob").val()
},
dataType: "json",
success: function(data){
if (data.success) {
$("#createResult").html(data.msg);
} else {
$("#createResult").html("出现错误:" + data.msg);
}
},
error: function(jqXHR){
alert("发生错误:" + jqXHR.status);
},
});
});
});
上面的$.ajax()都可以换成$.get()或$.post();我个人的观点在所做的项目中,$get()与$.post()的最大区别就是$get()中的url后面可以带参数。