在ajax请求完成后提交表单

时间:2018-07-30 02:47:33

标签: javascript jquery ajax

我有一个使用用户名的注册表格。而且我想在提交表单之前通过ajax验证用户名。

HTML

<form name="su_form" action="/usersignup/" onsubmit="return validateForm()" method="post">

脚本

function validateForm() {

var f  = document.forms["su_form"]["username"].value;

//validate username
$.ajax({
url: "/check_username/",
type: 'post',
data: {
  "username": f
},
statusCode: {
  400: function() {
    $('#username').append("Username already exist");
    $('#username').addClass("disblock");
  }
 }
});
}

如果将return false;放在statusCode函数中,则不会影响封闭函数。

我尝试将其与变量绑定

function validateForm() {

var f  = document.forms["su_form"]["username"].value;
var okay = "true";

//validate username
$.ajax({
url: "/check_username/",
type: 'post',
data: {
  "username": f
},
statusCode: {
  400: function() {
    $('#username').append("Username already exist");
    $('#username').addClass("disblock");
    okay = "false";
  }
 }
});
}

return okay;

因为ajax是异步请求,所以将其与变量绑定无济于事。表单在ajax完成之前提交。

1 个答案:

答案 0 :(得分:0)

jQuery Ajax允许您执行同步请求,只需向您的Ajax请求添加async:false即可。更多信息,请点击http://api.jquery.com/jquery.ajax/