提交表单前的Ajax调用

Question

在使用ajax提交表单之前，我需要检查数据是否已经存在于数据库中。最常见的情况是检查用户名和电子邮件地址的可用性。

但是，我测试了ajax函数并没有使用表单控件，它可以正常工作。该项目是使用MVC 3 VB创建的。

Javascript：

$('#addSalesPeople').click(function () {
   $.post("ajax_functions/checkDuplicate.cshtml",
   {
      extension: document.getElementById('Extension').value,
      initials: document.getElementById('Initials').value
   },
      function (data, status) {
      alert("Data: " + data + "\nStatus: " + status);
   });
});

HTML:

@Using Html.BeginForm("Create", "SalesPeople", FormMethod.Post)
@Html.ValidationSummary(True)
@<fieldset>  
    ............................
    ..............................  

    @Html.TextBoxFor(Function(model) model.Extension, New With {.onkeyup = "javascript: charCounter(this,4);", .onblur = "javascript: zeroPad(this, 4)"})

    @Html.TextBoxFor(Function(model) model.Initials)

    <input id="addSalesPeople" class="btn span2" type="submit" value="Add" />

</fieldset>

-Thanks

- Suchan Dongol

---

扩展名应该是 extension: document.getElementById('Extension').value，缩写也一样。此外，“无法使其工作”并不是非常具体的描述。 - Musa

你可以使用远程验证来实现这个目的。参见StackOverFlow - Nighil

Answer 1

你需要观察表单的submit事件。

不要

$('#addSalesPeople').click(function () {

使用

$('#theFormId').submit(function () {

查看: http://api.jquery.com/submit/

您还可以禁用表单提交，稍后手动发送它：

$( '#theFormId' ).submit( function ( event ) {

    event.preventDefault();

    /* your AJAX code */

    $( '#theFormId' ).submit();
} );

- feeela

---

我猜应该需要一个标志来提交一次。否则，函数将会一直不停地调用自己…… - Ramazan Binarbasi

Answer 2

我将翻译以下内容：

我正在发布一段真实测试过的代码。

HTML: 在 @using 中使用的简单表单提交按钮

(Html.BeginForm())
{

//use your text box or other control here 
<input type="submit" id="Create" value="Create" class="btn btn-primary" />

}

JavaScript:

<script>

    $(document).ready(function () {

        $("form").submit(function (e) {
            e.preventDefault(); //prevent default form submit

            if ($(this).valid()) {

                var UserId= $('#UserId').val();

                $.ajax({
                    url: '/Home/CheckUserExist/',        //ControllerName/ActionName/
                    data: {
                        UserId: UserId                      
                    },
                    success: function (data) {
                        showMsg(data);
                    },
                    cache: false
                });
            }
        });

    });

    function showMsg(hasCurrentJob) {
        if (hasCurrentJob != "OK") {

            alert(hasCurrentJob);
            return false;
        } else {

    //if check is ok than from post to controller 

            $("form").unbind('submit').submit();
        }
    }

</script>


MVC Controller:

 public async Task<JsonResult> CheckUserExist(int UserId)
    {
            //condition for user check 

        if (UserExist==true)
        {
            return Json("User Exist Please choose another user name or etc", JsonRequestBehavior.AllowGet);         
    }

        return Json("OK", JsonRequestBehavior.AllowGet);
    }

如果您有任何问题，请发送邮件至[e-mail]。

- Vishal Sen

---

感谢Vishal sen :) :) - Charan Kumar Borra

有用的解释 - SeeSharp

感谢 unbind('submit')。没有它，我会进入一个递归循环。 - user1147654