这5个Ajax的坑，你踩过几个？
Posted web前端开发
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了这5个Ajax的坑，你踩过几个？相关的知识，希望对你有一定的参考价值。
ajax()定义
坑1：jQuery+ajax提交json数据成功却进入error
function getNews(){
try{
$.ajax({
type: "GET",
url:'xxx.json',
dataType: 'json',
jsonp : "callback",
success: function (msg) {
console.log(msg);
},
error:function (error) {
console.log(error)
}
});
}catch(e){
alert(e.message);
return false;
}
}
首先得确保json的jar包都已经导入正确 然后在看看网页和servlet之间的数据类型是否一致 contentType: "application/json;charset=utf-8",两边都需要设置一下传输的内容
异步： 请求通过事件触发->服务器处理（这是浏览器仍然可以作其他事情）->处理完毕
异步就是你喊了我一声去吃饭，然后自己就先走了去吃饭，我得到消息后可能马上追着你去吃饭，也可能等到下班后我自己再去吃饭。
看看open方法的几个参数。
.open (http-method, url, async, userID, password)
（后面是帐号和密码，在禁止匿名访问的http页面中，需要用户名和口令）
其中async是一个布尔值。 如果是异步通信方式(true)，客户机就不等待服务器的响应； 如果是同步方式(false)，客户机就要等到服务器返回消息后才去执行其他操作。
分为GET与POST： GET 最为常见的HTTP请求，普通上网浏览页面就是GET。 GET方式的参数请求直接跟在URL后，以问号开始。 （JS中用window.location.search获得）。 参数可以用encodeURIComponent进行编码，使用方式:
var EnParam = encodeURIComponent(param);
URL只支持大约2K的长度，即2048字符数； 使用GET进行AJAX请求时候会缓存导致出现的页面不是正确的，一般方法加random参数值； ajax.send(null)。
POST - 向服务器提交数据用到。 需要将form表单中的值先取出转换成字符串，用&符号连接，（同GET传参数一样）； 提交数据量2GB ； 使用ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')，处理提交的字符串;ajax.send(strings)，这个strings表示form中需要提交的内容，例如a=1&b=2类似这样的字符串。
ajax.open方法中，第3个参数是设同步或者异步。 prototype等js类库一般都默认为异步，即设为true。 先说下同步的情况下，js会等待请求返回，获取status。 不需要onreadystatechange事件处理函数。 而异步则需要onreadystatechange事件处理，且值为4再正确处理下面的内容。
$.ajax({
url : 'your url',
data:{name:value},
cache : false,
async : true,
type : "POST",
dataType : 'json/xml/html',
success : function (result){
return result;
}
});
var ret = null;
$.ajax({
url : 'your url',
data:{name:value},
cache : false,
async : true,
type : "POST",
dataType : 'json/xml/html',
success : function (result){
ret=result;
}
});
return ret;
坑4：jQuery+ajax在手机Safari中提交信息无效
/**我的邀请奖励汇总记录接口**/
getTotalList:function(v){
try{
var al = "#firstAnchor";
$.ajax({
url:getOAByActivity()+"/act/se/20190916/recommend/my/total",
dataType:"jsonp",
jsonp:"callback",
data:{activityPeriods:"SE20190916",companyId:"14"},
success:function(msg){
var code = msg["code"];
if("0"==code){
执行1
}else if("98"==code || "99"==code){
执行2
}
else{
alert("网络问题"+code);
}
}
});
}
catch(e){
alert(e.message);
}
}
//提交注册数据
submitLogin:function(event){
//var _this=event.data.obj;
try{
$(".error_msg").html("").hide();
//验证数据
var accountNo=$.trim($("#accountNo").val());
if(accountNo=='' || accountNo.length<6){
$(".error_msg").html("请输入正确的账户号码").show();
//alert("请输入正确的账户号码");
return false;
}
if('90' == accountNo.substr(0, 2)){
$(".error_msg").html("账户类型暂不支持").show();
//alert("账户类型暂不支持");
return false;
}
var phoneNo=$.trim($("#guestPhone").val());
var regPhone = /^(13|14|15|16|17|18|19)d{9}$/;
if (!regPhone.test(phoneNo)){
$(".error_msg").html("请输入正确的手机号码").show();
//alert("请输入正确的手机号码");
return false;
}
//ajax
$.ajax({
type:"POST",
url: getOAByActivity()+"/act/ext/login",
dataType:"jsonp",
jsonp:"callback",
data:{activityPeriods:"SE20180916",accountNo:accountNo,phone:phoneNo,captchaFlag:"0",companyId:"14"},
success:function(msg){
if("0"==msg["code"]){//成功
$("#member_login").hide();
recommend.getTotalList(1);
$("#login_false1").hide();
$("#login_false2").hide();
}else if (msg["code"] == '20063'){
$(".error_msg").html("很抱歉，您还没有开通/激活真实账户，请先开通/激活账户，如有疑问请咨询在线客户！").show();
}else{
$(".error_msg").html(msg["infoMsg"]).show();
//alert(msg["msg"]);
return false;
}
}
});
}
catch(e){
alert(e.message);
return false;
}
}
var accountNo=$.trim($("#accountNo").val());
var phoneNo=$.trim($("#guestPhone").val());
/**我的邀请奖励汇总记录接口**/
getTotalList:function(v){
var accountNo=$.trim($("#accountNo").val());
var phoneNo=$.trim($("#guestPhone").val());
try{
var al = "#firstAnchor";
$.ajax({
url:getOAByActivity()+"/act/se/20190916/recommend/my/total",
dataType:"jsonp",
jsonp:"callback",
data:{activityPeriods:"SE20190916",companyId:"14"},
success:function(msg){
var code = msg["code"];
if("0"==code){
执行1
}else if("98"==code || "99"==code){
执行2
}
else{
alert("网络问题"+code);
}
}
});
}
catch(e){
alert(e.message);
}
}
$.ajax({
type: "POST",
url: "http://www.xxx.com/xxx.jsp",
data: "nick_name=nickname&newsid=nid&content=content&callback=?",
dataType : "jsonp"
});
var sUsrAgent=navigator.userAgent; var isSF=sUsrAgent.indexOf("Safari")!=-1; if(isSF){ $.ajax({ type: "POST", url: "http://xxxxxx.jsp", data: "nick_name=nickname&content=content&callback=?", async: false }); }else{ $.ajax({ type: "POST", url: "http://xxxxxx.jsp", data: "nick_name=nickname&content=content&callback=?", async: false, dataType : "jsonp" }); }
以上是关于这5个Ajax的坑，你踩过几个？的主要内容，如果未能解决你的问题，请参考以下文章