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>

只是为了让您知道，当从同一个JSP中的另一个触发器操作调用时，ajax调用工作正常，但是当从“click”函数调用时，它会检索警报错误，但在屏幕上显示的时间不到1秒，所以我不能告诉你它说的是什么。顺便说一句，Firebug抛出“NS_ERROR_NOT_AVAILABLE：提示被用户中止”。请注意，我尝试将“click”触发器替换为“submit”，其发生完全相同。我的猜测是表单是在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

不按下按下提交按钮时执行javascript，而是使用普通按钮并从脚本中执行提交功能。

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();
        });;
    }
});

在表单提交之前的Ajax调用不起作用

3 个答案: