AJAX异步提交,浏览器总跳出下载界面
问题:
我在写一个网页的“用户登录”部分时,要将用户名和密码传到后端验证,想在前端用了AJAX异步提交功能,将
用户名密码传到后端,然后后端返回验证结果。但AJAX写好后每次刷新网页都会跳出下载窗口,起初以为是
AJAX传输的数据格式出了问题,导致浏览器误以为后台传来的数据是下载内容(这么猜测的),于是
换了xml,txt,jaon 等格式试了个遍,最后还是没解决。后来翻到这篇帖子,才明白:
http://www.jb51.net/article/32540.htm,我们先看看我的代码:
下面是我前端AJAX部分代码:
$(document).ready(function(){
$("#id_login").click(function(){
if($("#userName").val() == ""){
$("#msgbox").html("Sorry, Empty Username.").addClass('myinfo').fadeTo(900,1,function(){});
return false;
}
if($("#passWord").val() == ""){
$("#msgbox").html("Sorry, Empty PassWord.").addClass('myinfo').fadeTo(900,1,function(){});
return false;
}
$.ajax({
url: 'kzkj_check.jsp',
async:false,
data: 'un='+ $('#userName').val() +'&pw=' + $('#passWord').val(),
type: "get",
success: function(msg){
if(msg.toString().trim() != "ERROR") //TRUE,return username;Message Sent, check and redirect
{ // and direct to the success page
//alert("name true "+msg.toString().trim()+"==");
$("#msgbox").html('Login Verified, Logging in.....').addClass('myinfo').fadeTo(900,1,
function()
{
document.location='kzkj_login.jsp?user='+msg;
});
}
else
{
//alert("name false "+msg.toString().trim()+"==");
$("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
{
$(this).html('Sorry, Wrong Username Or Password.').removeClass().addClass('myerror').fadeTo(900,1);
});
}
},
error:function (err) {
alert("ajax err:"+ err);
}
});
});
“登录”控件的代码如下:
<INPUT type=submit name=login value=登录 id=id_login>
这里有个问题:单击控件的时候触发了submit(如上代码),同时也触发了AJAX异步传输,那么,究竟谁先触发,中途二者怎么工作?
根据帖子的意思(http://www.jb51.net/article/32540.htm),先触发AJAX异步传输,由于是异步传输,后台发送数据后在等待前台返回
数据间歇执行了submit,刷新了页面,导致AJAX没收到数据。
问题是,AJAX没收到数据应该执行:
error:function (err) {
alert("ajax err:"+ err);
}
这段代码啊,前端为何会出现下载提示?
反正我删除submit以后一切正常,有高人知道具体细节的请多多指教。
另外一个解决途径:
还有一个原因是因为我用的是异步提交,没等验证成功的时候已经执行了按钮的提交事件,所以页面已经刷新,将其改成同步提交,按钮的提交事件必须等ajax验证结束后判断是否进行提交就可以解决这个问题了!
AJAX异步提交,浏览器总跳出下载界面的更多相关文章
- ASP.NET MVC 网站开发总结(五)——Ajax异步提交表单之检查验证码
首先提出一个问题:在做网站开发的时候,用到了验证码来防止恶意提交表单,那么要如何实现当验证码错误时,只是刷新一下验证码,而其它填写的信息不改变? 先说一下为什么有这个需求:以提交注册信息页面为例,一般 ...
- jQuery选取所有复选框被选中的值并用Ajax异步提交数据
昨天和朋友做一个后台管理系统项目的时候涉及到复选框批量操作,如果用submit表单提交挺方便的,但是要实现用jQuery结合Ajax异步提交数据就有点麻烦了,因为我之前做过的项目中基本上没用Ajax来 ...
- Ajax异步提交登录(2)--登录使用
http://cjp1989.iteye.com/blog/1740964 1.Ajax的原理: Ajax的原理就是:通过javascript的方式,将前台数据通过xmlhttp对象传递到后台,后台在 ...
- ajax 异步 提交 含文件的表单
1.前言 需求是使用 jquery 的 ajax 异步提交表单,当然,不是简单的数据,而是包含文件数据的表单.于是我想到了 new FormData() 的用法, 可是仍然提交失败,原来是ajax的属 ...
- Django之ORM多对多表创建方式,AJAX异步提交,分页器组件等
MTV与MVC MTV模型: M:模型层(models.py),负责业务对象和数据库关系的映射(ORM) T:模板层(Template),负责如何把页面展示给用户(HTML) V:视图层( ...
- 使用ajax异步提交表单
虽然这篇文章的标题是提交表单,但是主要的难点在于使用ajax提交文本域的内容, 在工作中的经常会需要ajax跨域的问题,通常的需求使用jsonp就可以得到解决,但是当前项目中有一个图片服务器,客户端需 ...
- extJs常用的四种Ajax异步提交
/** * 第一种Ajax提交方式 * 这种方式需要直接使用ext Ajax方法进行提交 * 使用这种方式,需要将待传递的参数进行封装 * @return */function saveUser_aj ...
- jquery ajax异步提交表单数据
使用jquery的ajax方法可以异步提交表单,成功后后台返回json数据,回调函数处理,可以不用刷新页面,达到异步的目的: 处理表单的数据可以用serialize()方法进行序列化,而如果提交的数据 ...
- jquery ajax异步提交表单数据的方法
使用jquery的ajax方法可以异步提交表单,成功后后台返回json数据,回调函数处理,可以不用刷新页面,达到异步的目的: 处理表单的数据可以用serialize()方法进行序列化,而如果提交的数据 ...
随机推荐
- C语言移位运算符
位移位运算符是将数据看成二进制数,对其进行向左或向右移动若干位的运算.位移位运算符分为左移和右移两种,均为双目运算符.第一运算对象是移位对象,第二个运算对象是所移的二进制位数. 位移位运算符的运算对象 ...
- iOS设备per app vpn,什么是什么系统的要求,必须?
坑爹Apple网站信息MDM厂商资料,最有发言权iOS 7.x设备支持per app vpn该,但它没有说明是什么系统要求环保要求. 1. iOS 7.x 设备.当然 2. iOS 7.x 需要设备M ...
- 6天通吃树结构—— 第三天 Treap树
原文:6天通吃树结构-- 第三天 Treap树 我们知道,二叉查找树相对来说比较容易形成最坏的链表情况,所以前辈们想尽了各种优化策略,包括AVL,红黑,以及今天 要讲的Treap树. Treap树算是 ...
- crawler_分布式网络爬虫的设计与实现_设计图
一.集中调度式 二.p2p 三.混合调度式 四.大型集群
- sql级联删除
原文:sql级联删除 功能:在删除主表时,自动删除副表(外键约束)相应内容 删除包含主键值的行的操作,该值由其它表的现有行中的外键列引用.在级联删除中,还删除其外键值引用删除的主键值的所有行. 如: ...
- 加载xib文件的两种方式
一.加载xib文件的两种方式 1.方法一(NewsCell是xib文件的名称) NSArray *objects = [[NSBundle mainBundle] loadNibNamed:@&quo ...
- 2014阿里实习生面试题——mysql如何实现的索引
这是2014北京站的两副面孔阿里实习生问题扯在一起: 在MySQL中.索引属于存储引擎级别的概念,不同存储引擎对索引的实现方式是不同的,比方MyISAM和InnoDB存储引擎. MyISAM索引实现: ...
- Windows下一个ROracle安装与使用
ROracle一个简短的引论: ROracle这是R连接到接入Oracle数据库DBI(Oracledatabase interface)介面.这是基于OCI一个DBI兼容Oracle司机. 具体见说 ...
- C++ AMP 介绍(两)
C++ AMP 介绍(两) 最后更新:2014-05-02 读前提:<C++ AMP介绍(一个)> 周边环境:Windows 8.1 64bit英文版,Visual Studio 2013 ...
- CodeSmith
完美解决CodeSmith无法获取MySQL表及列Description说明注释的方案 问题描述: CodeSmith是现在比较实用的代码生成器,但是我们发现一个问题: 使用CodeSmith编写 ...