浅谈实例ajax

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后面可以带参数。