jquery中ajax()的使用
$.ajax()方法，用法为$.ajax({})，**{}**是用来描述请求选项参数的对象(必须有)，其选项参数如下：
1)url：请求地址
2)data：请求参数(根据实际情况选用)，有两种格式：
①请求字符串，比如”adminCode=cxd”
②对象格式，比如：{“adminCode”:”cxd”}
3)type：请求类型(get/post)
4)dataType：服务器返回的数据类型：
①text：文本数据
②json：json字符串(会自动将json字符串转为js对象)
③html：html文档
④xml：xml文档
⑤script：js脚本
5)success：用于绑定事件处理函数,服务器处理正常时,处理服务器返回的数据
6)error：用于绑定事件处理函数,服务器处理异常时,处理服务器返回的数据
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#tab{
border: 1px solid black;
}
td{
border: 1px solid black;
}
</style>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function(){
$("#btn").click(function(){
var codeVal=$("#code").val();
var param="bookcode"+codeVal;
$.ajax({
type:"get",
url:"json.php",
data:{bookcode:codeVal},
dataType:"json",
success:function(num){
var tr=document.createElement("tr");
$("#tab").append(tr);
for(var key in num){
var td=document.createElement("td");
td.innerHTML=num[key];
tr.append(td);
}
}
})
})
})
</script>
</head>
<body>
<span>请输入图书编号：</span>
<input type="text" name="bookcode" id="code">
<input type="button" id="btn" value="提交">
<table id="tab" cellspacing="0"></table>
</body>
</html>
jquery封装ajax函数
$.ajax({ url,type,cache,data,dataType,success,error,contentType,processData[,其他可选参数]
});
- url：请求的后台程序地址
- type：请求方式（post/get）
- cache：true（缓存）false（不缓存）
- data：发送到后台的数据
- dataType：后台返回值类型
- success：请求成功后调用的回调函数
- error：请求失败时调用的回调函数
- contentType：请求头信息（DOM形式发送数据使用false）
- processData：处理数据方式（DOM形式发送数据使用false）
这个对象里包含了该方法所需要的请求设置以及回调函数等信息，参数以键值对的形式存在，所有参数都是可选的。如果调用$.ajax方法进行文件上传时，需要设置contentType和processData值为false，其他时候不需要设置。
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#tab{
border: 1px solid black;
}
td{
border: 1px solid black;
}
</style>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="jqueryAjax1.js"></script>
<script>
$(function(){
$("#btn").click(function(){
var codeVal=$("#code").val();
var param="bookcode"+codeVal;
ajax({
type:"get",
url:"json.php",
data:{bookcode:codeVal},
dataType:"json",
success:function(num){
var tr=document.createElement("tr");
$("#tab").append(tr);
for(var key in num){
var td=document.createElement("td");
td.innerHTML=num[key];
tr.append(td);
}
}
})
})
})
</script>
</head>
<body>
<span>请输入图书编号：</span>
<input type="text" name="bookcode" id="code">
<input type="button" id="btn" value="提交">
<table id="tab" cellspacing="0"></table>
</body>
</html>
封装ajax函数的步骤为下：
function ajax(obj){
// 默认的参数
var old={
type:"get",
url:"#",
data:{},
dataType:"json",
async:true,
success:function(data){
console.log(data);
}
};
//创建变量
var xmlhttp=null;
if(window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}else{
xmlhttp=new ActiveXObject("microsoft");
};
//处理形参，当传递参数时，传递的参数会覆盖默认的参数，不传递时，则使用默认的参数
for(var key in obj){
old[key]=obj[key];
};
var param=null;
//将传递的数据进行字符串拼接
for(var attr in obj.data){
param+=attr+"="+obj.data[attr]+"&";
};
//将拼接的多余的&进行裁剪
if(param){
param=param.substring(4,param.length-1);
};
if(obj.type == "get"){
old.url=obj.url+"?"+encodeURI(param);
};
//准备发送请求
xmlhttp.open(old.type,old.url,old.async);
var data=null;
//当传递方式为post时，添加http头
if(obj.type == "post"){
data=param;
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
}
//发送请求
xmlhttp.send(data);
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4){
if(xmlhttp.status==200){
var data=xmlhttp.responseText;
if(old.dataType=='json'){
data=JSON.parse(data);
}
// 回调函数
old.success(data);
}
}
}
}