jQuery实现ajax:
jQuery本身提供了一个ajax方法,jQuery.ajax([settings])
type:类型,”POST”或”GET”(默认)
data:是一个对象,连同请求发送到服务器的数据
dataType:预期服务器返回的数据类型,如果不指定,jQuery将自动根据HTTP包MIME信息来智能判断,一般采用json格式,可以设置为“json”
success:是一个方法,请求成功后的回调函数。传入返回后的数据,以及包含成功代码的字符串。
error:是一个方法,请求失败时调用此函数。传入XMLHttpRequest对象。
实现代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Demo</title> <style> body,input,button,select,h1{ font-size:26px; line-height:1.8; } </style> </head> <body> <h1>员工查询</h1> <label>请输入员工编号</label> <input type="text" id="keyword" /> <button id="search">查询</button> <p id="searchResult"></p> <h1>员工创建</h1> <label>请输入员工姓名:</label> <input type="text" id="staffName" /><br/> <label>请输入员工编号:</label> <input type="text" id="staffNumber" /><br/> <label>请输入员工性别: <select id="staffSex"> <option>男</option> <option>女</option> </select> </label><br/> <label>请输入员工职位:</label> <input type="text" id="staffJob" /><br/> <button id="save">保存</button> <p id="createResult"></p> <script src="jquery-3.1.1.js"></script> <script> $(document).ready(function(){ $("#search").click(function(){ $.ajax({ type:"GET", url:"service1.php?number="+$("#keyword").val(), dataType:"json", success:function(data){ if(data.success){ //如果json对象的success为true,则返回msg $("#searchResult").html(data.msg); }else{ $("#searchResult").html("出现错误:"+data.msg); } }, error:function(jqXHR){ alert("发生错误:"+jqXHR.status); } }); }); $("#save").click(function(){ $.ajax({ type:"POST", url:"service1.php", dataType:"json", data:{ name:$("#staffName").val(), number:$("#staffNumber").val(), sex:$("#staffSex").val(), job:$("#staffJob").val() }, success:function(data){ if(data.success){ //如果json对象的success为true,则返回msg $("#createResult").html(data.msg); }else{ $("#createResult").html("出现错误:"+data.msg); } }, error:function(jqXHR){ alert("发生错误:"+jqXHR.status); } }); }); }); </script> </body> </html>
jQuery可以自动添加Content-Type。