表单提交前的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();
        });;
    }
});