问题描述:
仍然在表单中,像往常一样,异步获取表单内所有输入框的信息,点击提交,确实也走了后台,但是结果却走了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交互问题的更多相关文章

  1. ThinkPHP中使用ajaxReturn进行ajax交互

    以管理员登录为例来介绍下$this->ajaxReturn与模板页进行ajax交互使用方法 首先看PHP控制器的处理,在application/Admin/Controller/LoginCon ...

  2. struts2 的验证框架validation如何返回json数据 以方便ajax交互

    struts2 的验证框架validation简单,好用,但是input只能输出到jsp页面通过struts2的标签<s:fielderror  />才能取出,(EL应该也可以). 如果使 ...

  3. struts2中使用json插件实现ajax交互

    json插件可以简单的实现ajax交互,避免了使用struts2-dojo-plugin.jar包时带来的struts2.x版本冲突问题.并且减少了使用ajax标签时需要的繁琐的配置包括web.xml ...

  4. Python搭建Web服务器,与Ajax交互,接收处理Get和Post请求的简易结构

    用python搭建web服务器,与ajax交互,接收处理Get和Post请求:简单实用,没有用框架,适用于简单需求,更多功能可进行扩展. python有自带模块BaseHTTPServer.CGIHT ...

  5. 关于文件上传的ajax交互

    首先我们来了解一下上传文件 <input type="file"> input的file常用上传类型 后缀名 MIME名称 *.3gpp audio/3gpp, vid ...

  6. jq的ajax交互封装

    jq封装的ajax,然后 在此前和此后都是很多要考虑的  ,何不 想想构思封装下. 下面: 基本上网页都存在各种ajax,使得网页变得更加易于操作. 举个长长的例子吧: <input type= ...

  7. springmvc与ajax交互常见问题

    这是我个人再编写博客系统的时候,因个人疏忽犯下的低级错误. 不过犯错是一件好事,有助于总结. 1.关于参数前加@RequestBody 如果是使用ajax交互时,必须要加上这个contentType: ...

  8. 前端弹出对话框 js实现 ajax交互

    原本计划实现这样一个需求: 前台点击触发某业务动作,需要用户补充信息,不做跳转页面,弹窗的形式进行补充信息. 折腾出来了,但是最终没有用到. 代码还有些毛躁,提供大概实现逻辑. 实现思路: 在窗口铺上 ...

  9. SpringMVC与Ajax交互

    1 springmvc和ajax的交互 1.1  请求字符串响应json 客户端发送的数据:key=value&key1=value1 响应回来:json 1.1.1json的支持jar包 1 ...

随机推荐

  1. POJ2251(KB1-B 三维BFS)

    Dungeon Master Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 40872 Accepted: 19936 Desc ...

  2. 解决win7无法打开chm格式文件的问题

    解决win7无法打开chm格式文件的问题. (一).简单方法(本人用的这个) 1.打开chm2.win7提示安全问题3.chm无法显示内容4.关闭chm5.右键点击chm,点击“解除锁定”,ok  没 ...

  3. Android 使用全局变量的问题

    现在每天都在忙,而且一忙起来,就把写笔记的事情放在了后面,最近在写程序的时候,突然要使用全局变量,就按照以前的方式,写了一个类,然后把变量都声明为静态变量,然后做为全局变量使用,但是在进行Activi ...

  4. drupal7 addExpression+union+分页

    global $user; $query_single = db_select('mp_order_singlepay', 'ms') ->fields('ms', array('order_i ...

  5. CentOS7.4 + Ambari 2.6.1.5 + HDP 2.6.4.0 安装部署

    1. 参考说明 参考文档: https://docs.hortonworks.com/HDPDocuments/Ambari-2.6.1.5/bk_ambari-installation/conten ...

  6. java 内存分析之堆栈空间

    package Demo; public class Demo { public static void main(String[] args) { Demo demo = new Demo(); ; ...

  7. Pig类型转换

    users.data的内容如下: lisg 28 75 dengsl 24 88 强制类型转换 users = load '/users.data' fehed = foreach users gen ...

  8. Python 操作数据库pymysql

    import pymysql #添加数据 conn , user='root', passwd='', db='yyy') #更改获取数据结果的数据类型,默认是元组,可以改为字典等:#cursor=c ...

  9. springMVC入门-03

    接着上一讲介绍springMVC针对rest风格的支持. 查询数据 使用前:/user_show?id=120 使用后:/user/120 删除数据 使用前:/user_delete?id=123 使 ...

  10. Jmeter入门--参数化、集合点

    一.参数化 1.用户定义的变量 用户自定义变量中的定义的所有参数的值在测试计划的执行过程中不能发生取值的改变,因此一般仅将测试计划中不需要随迭代发生改变的参数(只取一次值的参数)设置在此处.例如应用的 ...