Question

以下jsp代码在带有Form的forntend中正常工作，但我想知道如何使用Jquery调用该操作。简而言之，我不想使用动作并通过jquery直接调用它。

<form:form id="uploadCSVForm" modelAttribute="PeopleFileUpload" method="post" enctype="multipart/form-data" action="/admin/institutions/${mrceuser.person.institution.id}/uploadCsv">
        <p>
          <form:label for="fileData" path="fileData">File</form:label><br/>
          <form:input path="fileData" type="file"/>
        </p>
        <p>
          <input type="button" value="Save" onclick="InstitutionDialog.prepareForSubmit('#uploadCSVForm');" />
          <input type="button" value="Cancel" onclick="InstitutionDialog.hide();return false;"/>
        </p>
      </form:form>

我使用

实现了同样的目标

 ChangeDialog.noInputSubmit(ChangeDialog.InstitutionsProperty, "Uploaded CSV for " + jQuery('input#name').val(),
      function () {jQuery('#uploadCSVForm').submit()});

ChangeDialog.noInputSubmit的位置如下：

ChangeDialog.noInputSubmit = function (changeArea, message, callback) {
    ChangeDialog.changeArea = changeArea.id;
    var valueMap = ChangeDialog.getValueMap();
    valueMap.description = message;
    jQuery.ajax({
        url:RootPath.getPath()+'/admin/changes/',
        type:'POST',
        data:valueMap,
        success:callback,
        error:ChangeDialog.handleError
    });
    return false;
};

Answer 1

如果您只想使用jquery提交表单，那么您需要首先阻止提交事件，然后在成功时触发提交事件，如下所示：

$('#btnSubmit').click(function (e) {
e.preventDefault(); //  prevent default action of submit button
var element = this;    
ajax({
    url:RootPath.getPath()+'/admin/changes/',
    type:'POST',
    data:valueMap,
    contentType: "application/json; charset=utf-8",
    success: function (data) {
    if (data.status == "Success") {
        alert("Done");
        $(element).closest("form").submit(); // submit form
    } else {
        alert("Error occurs on the Database level!");
    }
    },
    error:ChangeDialog.handleError
});
});

您可以根据需要更改方法名称和参数，但核心逻辑应该相同。

使用Jquery而不是表单调用Spring MVC

1 个答案: