Question

我有一个如下表格

 <form:form action="/campaign/delete" modelAttribute="campaignDeleteForm" enctype="multipart/form-data" class="form-inline">
      <input type="hidden" name="brandId" value="${brandId}" />
      <input type="hidden" name="campaignId" value="${campaign.campaignId}" />
      <button class="btn" data-dismiss="modal"><fmt:message key="daydiary.brand.delete.box.confirm.no" /></button>
      <button class="btn btn-info btn-campaign-delete"><fmt:message key="daydiary.brand.delete.box.confirm.yes" /></button>  
    </form:form>

我的java脚本如下所示

$("#btn-campaign-delete").click(function(){
    var form = $(this).parents('form:first');
    doAjaxPost(form);
    form.submit();
});

function doAjaxPost(form){
   form.on('submit' , function(e) { 
    e.preventDefault();
    $.ajax({
        type: "POST",
        url: form.attr('action'),
        data: form.serialize
    }).done(function( data ) {

    });
   });
}

我看到的是ajax请求进入服务器，现在url更改为/ campaign / delete。我想留在同一页面上。这有可能吗？

Answer 1

如果您想留在页面上，请不要提交。换句话说，删除不必要的行：

form.submit();

Answer 2

此thread显示问题。手动调用submit时不会触发onSubmit。

Answer 3

如果您想将ajax请求发送到同一页面，您可以将您的url参数保留在AJAX请求中作为空字符串，并将表单操作保留为空：

<form:form action="" modelAttribute="campaignDeleteForm" enctype="multipart/form-data" class="form-inline">

Answer 4

如果要停止表单表单提交到您定义的操作URL。请尝试以下方法：

在你的表单标签中只需添加此属性onSubmit ='return false;'

< form onSubmit='return false;' action="" modelAttribute="campaignDeleteForm" enctype="multipart/form-data" class="form-inline">

从你的jQuery代码发布数据的地方删除提交功能，保持ajax原样。

function doAjaxPost(form){
    $.ajax({
        type: "POST",
        url: form.attr('action'),
        data: form.serialize
    }).done(function( data ) {

    });
}

我希望这可行。

无法阻止实际提交表单

4 个答案: