记一次ajax交互问题
问题描述:
仍然在表单中,像往常一样,异步获取表单内所有输入框的信息,点击提交,确实也走了后台,但是结果却走了ajax的error。
这一点使我当时非常疑惑,为什么会走error呢?
一般走error的原因如下:
(1)不能正确访问URL;
(2)请求类型有误;
(3)参数有误;
(4)传到后台的URL导致某种异常,从而导致ajax走error
(5)请求参数类型有误,比如要传json,你却传了xml等,也会导致error;
以上是我之前遇到的导致ajax走error的原因。
今天这个error非常奇怪,正常走URL,后台参数传到了,没有报错,但是就是走error。
浏览器 f12+f5调试无报错,正常情况下,ajax报error,还有就是你的html文件中某个js有误,js是一个非常爱发票脾气的女孩,心情不好(指的是只要一个页面用到了js,页面中某个js存在问题,通常会影响页面其他代码,从而导致整体受到影响,出现问题),页面就不行了(页面不行了的意思是说:一旦页面中某个js出现问题,会导致其他部分js与后台交互渲染数据就会出现问题)。
这就是我国古代常说的,"牵其一,必动其余"。
所以前后端开发用js的要特别仔细小心,稍不如意,就会导致殃及池鱼。
最后解决办法:我将async改为false,意为同步,通常情况下,axync默认是true,意为异步的。
果然改了之后就好了,正常返回数据,将async去掉却发现又变成那样了,最后我只能初步的判断是这个原因导致的。
该界面使用了layui框架+metronic相关的组件
下面是我的js代码
//登录功能函数
var handleSignInFormSubmit = function() { $('#m_login_signin_submit').click(function() { //手机号
var username = $("#username").val();
//密码
var password = $("#password").val();
//手机号验证正则表达式
var myreg=/^[1][3,4,5,7,8][0-9]{9}$/; if(username==null||username==""){
layui.use('layer', function(){
var layer = layui.layer; layer.alert("请输入手机号",{icon:5});
});
return false;
}else if(!myreg.test(username)){
layui.use('layer', function(){
var layer = layui.layer; layer.alert("无效手机号",{icon:5});
});
return false;
}else if(password==null||password==""){
layui.use('layer', function(){
var layer = layui.layer; layer.alert("请输入密码",{icon:5});
});
return false;
}else if(password.length<||password.length>16){
layui.use('layer', function(){
var layer = layui.layer; layer.alert("密码不能小于6位或大于16位",{icon:5});
});
return false;
}else{
$.ajax({
async:false,
url:ZL.url.api.login,
type:"POST",
data : {"username":username,"password":password},
dataType : 'json',
success:function(data){ if(data.returnCode=="000000"){
layui.use('layer', function(){
var layer = layui.layer; layer.alert(data.returnMsg,{icon:1});
}); setTimeout(() => {
window.location.href= "index.html";
}, 1000);
return true;
}else if(data.returnCode="111111"){ layui.use('layer', function(){
var layer = layui.layer; layer.alert(data.returnMsg,{icon:5});
});
return false;
}else if(data.returnCode="222222"){
layui.use('layer', function(){
var layer = layui.layer; layer.alert(data.returnMsg,{icon:5});
});
return false;
}else if(data.returnCode="500"){
layui.use('layer', function(){
var layer = layui.layer; layer.alert(data.returnMsg,{icon:5});
});
return false;
} },error:function(XMLHttpRequest, textStatus, errorThrown){
alert("失败"+username+"||"+password);
// 状态码
alert(XMLHttpRequest.status);
// 状态
alert(XMLHttpRequest.readyState);
// 错误信息
alert(textStatus);
return false;
} }); } });
}
另外深入了分析了下,应该也是和form有关的,但是我仍然像往常那样form的action去掉或者让它等于'#',防止影响ajax正常请求数据。
但是也是无济于事,最后我新建一个test.html,将ajax的代码复制过去,却发现正常运行。
最后我只能用这个结论来概述:
我这个登录界面涉及到metronic的较多组件,同时,最初情况下,metronic用的ajax请求代码如下:
var handleSignInFormSubmit = function() {
$('#m_login_signin_submit').click(function(e) {
e.preventDefault();
var btn = $(this);
var form = $(this).closest('form');
form.validate({
rules: {
email: {
required: true,
email: true
},
password: {
required: true
}
}
});
if (!form.valid()) {
return;
}
btn.addClass('m-loader m-loader--right m-loader--light').attr('disabled', true);
form.ajaxSubmit({
url: 'ZL.url.api.login
success: function(response, status, xhr, $form) {
// similate 2s delay
setTimeout(function() {
btn.removeClass('m-loader m-loader--right m-loader--light').attr('disabled', false);
showErrorMsg(form, 'danger', 'Incorrect username or password. Please try again.');
}, 2000);
}
});
});
}
说到ajaxSubmit就不能不提到ajaxForm,两者有如下区别:
(1)ajaxForm不能主动提交form,函数只是为提交表单而做,需要以submit来触发提交。
(2)ajaxSubmit会主动提交表单,同时还可以在点击其他按钮时,例如button之类的,也可以触发提交,但不一定是submit按钮。
记一次ajax交互问题的更多相关文章
- ThinkPHP中使用ajaxReturn进行ajax交互
以管理员登录为例来介绍下$this->ajaxReturn与模板页进行ajax交互使用方法 首先看PHP控制器的处理,在application/Admin/Controller/LoginCon ...
- struts2 的验证框架validation如何返回json数据 以方便ajax交互
struts2 的验证框架validation简单,好用,但是input只能输出到jsp页面通过struts2的标签<s:fielderror />才能取出,(EL应该也可以). 如果使 ...
- struts2中使用json插件实现ajax交互
json插件可以简单的实现ajax交互,避免了使用struts2-dojo-plugin.jar包时带来的struts2.x版本冲突问题.并且减少了使用ajax标签时需要的繁琐的配置包括web.xml ...
- Python搭建Web服务器,与Ajax交互,接收处理Get和Post请求的简易结构
用python搭建web服务器,与ajax交互,接收处理Get和Post请求:简单实用,没有用框架,适用于简单需求,更多功能可进行扩展. python有自带模块BaseHTTPServer.CGIHT ...
- 关于文件上传的ajax交互
首先我们来了解一下上传文件 <input type="file"> input的file常用上传类型 后缀名 MIME名称 *.3gpp audio/3gpp, vid ...
- jq的ajax交互封装
jq封装的ajax,然后 在此前和此后都是很多要考虑的 ,何不 想想构思封装下. 下面: 基本上网页都存在各种ajax,使得网页变得更加易于操作. 举个长长的例子吧: <input type= ...
- springmvc与ajax交互常见问题
这是我个人再编写博客系统的时候,因个人疏忽犯下的低级错误. 不过犯错是一件好事,有助于总结. 1.关于参数前加@RequestBody 如果是使用ajax交互时,必须要加上这个contentType: ...
- 前端弹出对话框 js实现 ajax交互
原本计划实现这样一个需求: 前台点击触发某业务动作,需要用户补充信息,不做跳转页面,弹窗的形式进行补充信息. 折腾出来了,但是最终没有用到. 代码还有些毛躁,提供大概实现逻辑. 实现思路: 在窗口铺上 ...
- SpringMVC与Ajax交互
1 springmvc和ajax的交互 1.1 请求字符串响应json 客户端发送的数据:key=value&key1=value1 响应回来:json 1.1.1json的支持jar包 1 ...
随机推荐
- linux系统下开启一个简单的web服务
linux 下开启一个简单的web服务: 首先需要linux下安装nodejs 然后创建一个test.js: vi test.js var http =require("http&quo ...
- iphone设置fiddler代理测试
iPhone上配置fiddler为代理方法: 打开IPhone, 找到你的网络连接,打开HTTP代理,输入Fiddler所在机器的IP地址(比如:192.168.1.104) 以及Fiddler的端口 ...
- 微信获取openId
router.beforeEach(function(to, from, next){ //中间页等待跳转 if(to.meta.requireCheck=="WaitLogin" ...
- vscode 代码跳转之PHP篇
1.安装插件:PHP IntelliSense 2.配置:"php.executablePath": "C:\\php\\php.exe", 但是目前有问题,跨 ...
- html5中高德、腾讯、百度 地图api调起手机app
html 部分 <div id="mapBg"> <div class="mapTab"> <a href="" ...
- Web 系统架构一般组成
负载层技术 负载分配层,是单指利用软件实现的计算机系统上的狭义负载均衡.它是根据业务形态设计一种架构方式,将来自外部客户端的业务请求分担到每一个可用的业务节点上 . 1.用户终端不只包括类 ...
- js map()处理数组和对象数据
之前的文章梳理了JS数组与对象属性的遍历方法,本文介绍专门用以遍历并处理数据的map()方法. 一.原生map() map()是数组的一个方法,它创建一个新数组,其结果是该数组中的每个元素都调用一个提 ...
- 前端构建工具 Gulp.js 上手实例
在软件开发中使用自动化构建工具的好处是显而易见的.通过工具自动化运行大量单调乏味.重复性的任务,比如图像压缩.文件合并.代码压缩.单元测试等等,可以为开发者节约大量的时间,使我们能够专注于真正重要的. ...
- python中的字符串编码问题——1.理解编码和解码问题
理解编码与解码(python2.7):1)编码 是根据一个想要的编码名称,把一个字符串翻译为其原始字节形式.>>> u_str=u'字符串编码aabbbcccddd'>> ...
- statsmodels中的summary解读(以linear regression模型为例)
https://datatofish.com/statsmodels-linear-regression/ https://blog.datarobot.com/ordinary-least-squa ...