jQuery对ajax的封装之$.ajax()的使用
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);}}}
}
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！