首页 > 代码库 > ajax学习笔记3-jQuery实现ajax（大拇指向上）
ajax学习笔记3-jQuery实现ajax（大拇指向上）
jQuery实现ajax：
jQuery本身提供了一个ajax方法，jQuery.ajax([settings])
type:类型，”POST”或”GET”（默认）
url:发送请求的地址
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="http://www.mamicode.com/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。
ajax学习笔记3-jQuery实现ajax（大拇指向上）