表單提交前的Ajax調用不起作用

Question

我有一個Spring MVC-JSP Web應用程序。 在提交特定表單之前，我需要用JS / jQuery填充文本值輸入，以便POSTed表單包含該信息。 此文本值是ajax調用的結果，應在單擊“提交”按鈕時但在將表單數據發送到控制器之前執行該操作。 我的JSP中的相關代碼如下：

    <script>
                //Gets from model a new valid file code number
                function getFileCodeNumber(res){
                    $.ajax({
                        type: "post",
                        url: "getFileCodeNumber",
                        cache: false,
                        data: { department: $("#department").val(), docType: $("#docType").val() },
                        success: res,
                        error: function(){  alert('Error while request..');}
                    });
                }
            </script>

    <script>
                $(function() {
                    //Other JS code
                    $("#submitForm").click((function(event) {
                        if($("#chkLanguage").prop('checked')){
                                  //some stuff
                        }else{
                            getFileCodeNumber(function(data){
                                  //do some stuff with 'data'
                            });
                        }
                    }));
                });
            </script>

     <form:form id="form" class="form-horizontal" method="post" action="AddDoc" commandName="document" enctype="multipart/form-data">
    <div class="row" style="text-align:center;">
                    <input id="submitForm" type="submit" class="btn btn-primary btn-lg" name="commit" value="Finish">
                </div>
                </br>
            </form:form>

只是要讓您知道，ajax調用在同一JSP中從另一個觸發器動作調用時效果很好，但是從“ click”函數調用時，它會檢索警報錯誤，但在屏幕上顯示的時間少於1秒，因此我無法告訴你說什么。 順便說一句，Firebug拋出“ NS_ERROR_NOT_AVAILABLE：提示被用戶中止”。 請注意，我嘗試將“單擊”觸發器替換為發生完全相同的“提交”。 我的猜測是在ajax調用完全完成之前提交表單，但是我希望“提交”和“單擊”功能在發布數據之前完成其工作。

有人知道嗎？

編輯：我發現我看不到的警報正在打印ajax調用的錯誤代碼。 但是，我已經檢查了控制器的功能，該功能可以對此調用做出響應，並且我已經看到它成功完成並檢索了期望值。 而且，當我從同一JSP中的另一個觸發器調用此函數時，它可以完美運行。 只是為了讓您看到控制器中的簡單代碼：

@RequestMapping(value = "getFileCodeNumber", method = RequestMethod.POST, headers = "Accept=*/*")
    public @ResponseBody
    String getFileCodeNumber(@RequestParam(value = "department", required = true) String department,
            @RequestParam(value = "docType", required = true) String docType) {
        int n = cdocs.getNewCode(department, docType);
        if (n == 0) {
            return "EEEE";
        } else {
            char[] zeros = new char[4];
            Arrays.fill(zeros, '0');
            DecimalFormat df = new DecimalFormat(String.valueOf(zeros));
            System.out.println(df.format(n));
            return df.format(n);
        }//END_IF
    }//END_METHOD

有任何想法嗎？

Answer 1

試試看：

function getFileCodeNumber(res) {
    return $.ajax({
        type: "post",
        url: "getFileCodeNumber",
        cache: false,
        data: {
            department: $("#department").val(),
            docType: $("#docType").val()
        },
        success: res,
        error: function () {
            alert('Error while request..');
        }
    });
}

$("#submitForm").click(function (event) {
    event.preventDefault();
    if ($("#chkLanguage").prop('checked')) {
        //some stuff
    } else {
        getFileCodeNumber(function (data) {
            //do some stuff with 'data'
        }).done(function () {
            $('#form').get(0).submit();
        });
    }
});

Answer 2

代替在按下submitbutton時執行JavaScript，而是使用普通按鈕並從腳本執行submit函數。

Answer 3

您可以執行以下操作：

function getFileCodeNumber(res){
    $.ajax({
        type: "post",
        url: "getFileCodeNumber",
        cache: false,
        data: { department: $("#department").val(), docType: $("#docType").val() },
        success: res,
        error: function(){  alert('Error while request..');}
    })
}

$(function() {
    if($("#chkLanguage").prop('checked')){
        //some stuff
        $("#form").submit();
    }else{
        getFileCodeNumber(function(data){
        //do some stuff with 'data'
        }).done(function(){
            $("#form").submit();
        });;
    }
});