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);
}
}
}
}