浅析onsubmit校验表单时利用ajax的return false无效问题

复制代码 代码如下:

  /**

  * 表单提交校验

  **/

  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;