记一次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 ...
随机推荐
- idea 版本升级至最新版
前言:当前最新版为官网上的2018.2.3版本 一.下载最新版 官网地址:http://www.jetbrains.com/idea/download/#section=windows 百度网盘地址: ...
- 【朴灵评注】JavaScript 运行机制详解:再谈Event Loop
PS: 我先旁观下大师们的讨论,得多看书了~ 别人说的:“看了一下不觉得评注对到哪里去,只有吹毛求疵之感. 比如同步异步介绍,本来就无大错:比如node图里面的OS operation,推敲一下就 ...
- jQuery基础(鼠标事件,表单事件,键盘事件,自定义事件 篇)
1.jQuery鼠标事件之click与dbclick事件 方法一:$ele.click()(不带参数) <div id="test">点击触发<div&g ...
- js下载文件
本文的前提是:后台给的是一个可以下载的url的情况下的下载: 怎样的文件url才能触发浏览器的下载行为?(转自SF) 能触发浏览器下载的url有两类: response header中指定了Conte ...
- angular2上传图片
话不多说,直接写 一.html页面 二.html代码: <div class="descright"> <div class="clinic-img ...
- redis 适用场景、缓存选择、java实现
redis适用场景 查询多,修改少:如国家地区信息.商品分类.数据字典 缓存选择 hibernate二级缓存.mybatis二级缓存.redishibernate二级缓存.mybatis二级缓存默认不 ...
- Django ORM字段类型 单表增删改查 万能的双下划线
1.ORM三种模型 模型之间的三种关系:一对一,一对多,多对多. 一对一:实质就是在主外键(author_id就是foreign key)的关系基础上,给外键加了一个UNIQUE=True的属性: 一 ...
- 灰度图的直方图均衡化(Histogram Equalization)原理与 Python 实现
原理 直方图均衡化是一种通过使用图像直方图,调整对比度的图像处理方法:通过对图像的强度(intensity)进行某种非线性变换,使得变换后的图像直方图为近似均匀分布,从而,达到提高图像对比度和增强图片 ...
- 由于使用JDBC ResultSet的滚动功能而导致的内存溢出
前天一去公司,老大说,服务器全挂了! 最后排查了半天,结论是内存溢出! 在WAS的DUMP日志中,看得我头晕眼花,终于找到了罪魁祸首,原来是有同事写代码的时候使用了可滚动的结果集导致内存溢出. 什么是 ...
- javascript中return的作用
这里面的return含有一些细节知识: 例如:onClick='return add_onclick()'与 onClick='add_onclick()'的区别 JAVASCRIPT在事件中调用函数 ...