浅析onsubmit校验表单时利用ajax的return false无效问题
浅析onsubmit校验表单时利用ajax的return false无效问题
发布时间:2016-12-30 来源:查字典编辑
摘要:复制代码代码如下:/***表单提交校验**/functiononSubmit(){if($('#name').val().length

复制代码 代码如下:

/**

* 表单提交校验

**/

function onSubmit(){

if($('#name').val().length<2){

alert("名称请不少于两个汉字");

return false;

}

var t = new Date().getTime();

$.ajax({

type: "POST",

url: "/users/checkrepeat/",

data: "name=" + $('#name').val() + "&time=" + t,

success:function(res){

if(res == 'exists'){

alert("名称已存在,请修改.");

return false;

}

}

});

}

问题原因:

1. ajax时return false 的function与onsubmit()不是同一个函数;

2. 在ajax执行时,async默认的设置值为true,这种情况为异步方式,就是说当ajax发送请求后,在等待server端返回的这个过程中,前台会继续 执行ajax块后面的脚本,直到server端返回正确的结果才会去执行success,也就是说这时候执行的是两个线程,ajax块发出请求后一个线程 和ajax块后面的脚本(另一个线程)。

修改后的代码:

复制代码 代码如下:

/**

* 表单提交校验

**/

function onSubmit(){

if($('#name').val().length<2){

alert("名称请不少于两个汉字");

return false;

}

var flag = true;

var t = new Date().getTime();

$.ajax({

type: "POST",

async:false, // 设置同步方式

cache:false,

url: "/users/checkrepeat/",

data: "name=" + $('#name').val() + "&time=" + t,

success:function(res){

if(res == 'exists'){

alert("名称已存在,请修改.");

flag = false;

}

}

});

if(!flag)

return false;

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类