Question

我有以下情况

用户填写表单并点击提交
我想执行ajax请求来解析其中一个表单字段的值
一旦我解决了ajax请求，我希望填充隐藏的表单字段，然后提交表单。

这可以用jquery完成吗？

$form.on('submit', function () {
  // at this point I can begin the ajax request but there will not be enough time
  // for the ajax request to complete, the ajax request will also require a callback
});

是否有处理这种情况的已知模式？

编辑：

我只想澄清我的问题在这里。我无法弄清楚如何在提交事件处理程序中执行ajax请求，因为ajax请求是异步的，表单无论如何都会简单地提交。 $ .ajax提供了一个＆＃39; async：flase＆＃39;我需要的选项，解决了我的问题。

由于

Answer 1

您想使用JQuery ajax调用的success属性。

如果数据检查未通过，您需要return false;取消表单提交。

$form.on('submit', function () {
    $.ajax({
            type: "POST",
            url: 'firsturltarget',
            data: formData,
            success: function (dataCheck) {
            if (dataCheck == 'value') {
                // Data Check passed finish submitting form
                $.ajax({
                     type: "POST",
                     url: '/login/spam',
                     data: formData
                 });
            }
            else {
                return false;  // Data Check invalid, cancel submit
            }
        }
    });
});

Answer 2

使用

$( "#target" ).submit(function( event ) {
  alert( "Handler for .submit() called." );
  event.preventDefault();
});

表格

并提交使用

$( "#other" ).click(function() {
  $( "#target" ).submit();
});

Answer 3

首先编写绑定提交事件。

$("#form-id").submit(function(){
              //check the input here
            $.ajax({
                    url:"something",
                    type:"post",
                    data:{label:value},
                    success:function(data){
                     //populate values in hidden field
                     return true;
                    },
                    error:function(){
                    }
                });
});

Answer 4

据我所知，使用jquery提交表单的最佳方式是

$('body').on('submit', '#FormId', function(event){

    event.preventDefault(); //stops execution of default form action
    $.ajax({
        url : 'localhost/project/controller/method', //type your form submit method path
        type : 'post', //your form method...either get or post
        data : $(this).serialize(), //by this all input field data will be grabbed
        dataType : 'json', //the data type that you want back from your form submit method
        success: function(data)
        {
           //your code after successful submission of your form
        }  
    });

});

如何阻止提交，做一个ajax请求，然后完成提交？

4 个答案: