问题描述:
仍然在表单中,像往常一样,异步获取表单内所有输入框的信息,点击提交,确实也走了后台,但是结果却走了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. Linux安装jdk,编写helloworld程序

    今天学习了Linux安装jdk,做个笔记记录一下. 第一步,确定Linux是32位的还是64位的,然后到oracle官网上下载对应版本的jdk,一般下载.tar.gz文件.查看Linux的版本的命令是 ...

  2. xamarin.android 实现 Activity 底部弹出对话框菜单

    Resources/drawable 下新增如下文件: push_bottom_in.xml <?xml version="1.0" encoding="utf-8 ...

  3. HTML5 FormData实现文件上传实例

    表单提交,文件上传是一个常用又十分麻烦的功能,以前要上传文件通常都是借助插件或者flash来实现,噼里啪啦的加载一大堆东西.自从有了HTML5的FormData后,老板再也不用担心我的上传了. For ...

  4. 最好最实用的二次开发教程 cms

    ◆二次开发 什么是二次开发? 二次开发,简单的说就是在现有的软件上进行定制修改,功能的扩展,然后达到自己想要的功能和效果,一 般来说都不会改变原有系统的内核. 为什么要二次开发? 随着信息化技术的不断 ...

  5. 一步一步 Pwn RouterOS之调试环境搭建&&漏洞分析&&poc

    前言 本文由 本人 首发于 先知安全技术社区: https://xianzhi.aliyun.com/forum/user/5274 本文分析 Vault 7 中泄露的 RouterOs 漏洞.漏洞影 ...

  6. HSQL结合润乾报表同步部署问题

     1 . 问题概述 中国登记结算公司为了验证报表模型和附带的样例[内建的不算],都是需要连接携带的DEMO数据源才能够运行, 应用程序[润乾报表]需要部署到UNIX服务器上, DEMO自带的HSQ ...

  7. Android ListView无数据项时提示

    只需要调用在代码中调用setEmptyView(View emptyView)设置ListView为空时显示这个TextView即可. 布局文件 <?xml version="1.0& ...

  8. 百度网盘下载器 PanDownload v2.0

    PanDownload是一款坚持以用户体验为中心,畅快淋漓的下载为理念而打造的下载工具. 从2017年2月9日首个版本推出,时至今日已经一年七个月了,首先感谢大家一直以来的支持与建议,促使着我不断地对 ...

  9. redis 事务、Jedis事务处理流程

    127.0.0.1:6379> multiOK127.0.0.1:6379> sadd myset a b cQUEUED  ——>并没有执行,排队等待127.0.0.1:6379& ...

  10. Django ORM字段类型 单表增删改查 万能的双下划线

    1.ORM三种模型 模型之间的三种关系:一对一,一对多,多对多. 一对一:实质就是在主外键(author_id就是foreign key)的关系基础上,给外键加了一个UNIQUE=True的属性: 一 ...