Question

此时我正在打扰我，但现在是时候让我寻求帮助了（问我明天上班，不想整晚都在这里）

我的表单位于模态中，这是我的脚本

List<Object> b = new ArrayList<>();
b.add(new A());  //if you want to call the methods of A or B you need to cast it first, remember to use instanceof keyword prior to casting
b.add(new B());

一切正常，它会激活脚本并通过成功消息提交到后端，但是一旦你关闭弹出成功消息，它就会重定向到动作＆＃34; apply-now＆＃34;页。

如果不破坏提交，我怎么能阻止这种情况，因为我试过返回false并阻止默认。

继承表格

$(function() {
    $("#applyForm").on('submit' , function(e) {
        $.ajax({ 
            type: 'POST',
            url: $("#applyForm").attr("action"),
            data: $('#applyForm').serialize(),
            success: function(data){
              alert('successfully submitted')},
            error: function(data){
              alert('something went wrong')
          }

     });
});
});

真的很感激任何帮助！

由于

Ĵ

Answer 1

如果您希望页面不重新加载，请尝试此操作：

$(function() {
    $("#applyForm").on('submit' , function(e) {
       e.preventDefault();
       //... the rest of your code
       //or add return false;
       return false;
    });
});

当您发现实际提交＆＃34;正常＆＃34; 过程将会发生时，您不要那样。所以你必须通过e.preventDefault()来阻止它。您可以阅读有关它的文档here。

或者在这里查看它保持在同一页面上的示例。

＆＃13;

$("#form").submit(function(e){
    e.preventDefault();
    $(this).append("The page is staying here");
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" id="form">
    <input type="text" name="first" id="first">
    <input type="submit" value="enter">
</form>

＆＃13;

希望这会对你有所帮助。

Answer 2

表格正在提交两次。一旦使用表单操作，另一次使用ajax调用。如果您希望仅发送ajax调用，则在ajax函数外返回false应该可以解决问题。 When to use PreventDefault( ) vs Return false?

$(function () {
    $("#applyForm").on('submit', function (e) {
        //e.preventDefault();
        $.ajax({
            type: 'POST',
            url: $("#applyForm").attr("action"),
            data: $('#applyForm').serialize(),
            success: function (data) {
                alert('successfully submitted')
            },
            error: function (data) {
                alert('something went wrong')
            }

        });
        return false;
    });
});

Answer 3

我希望这项工作。

1) <button type="submit" id="submit" class="btn btn-warning">
   Apply  now</button> with preventDefault method
2) button type="button" id="submit" class="btn btn-warning">Apply now</button>
   change the type="submit" to type="button"

实施例

<form action="/apply-now/" enctype="multipart/form-data" id="applyForm" method="post" name="applyForm" class="form">
<input name="is_data_submitted" type="text" value="1"> 
<input name="listing_id" type="text" value="999">
 MY FORM DATA
 <button type="button" id="submit" class="btn btn-warning">Apply now</button>
 </form>

$(document).ready(function(){
$("#applyForm").on('click','#submit' , function() {
alert("Click check")
console.log($('#applyForm').serialize())
});
});

Answer 4

您并未阻止默认表单提交行为。要解决此问题，请在Ajax调用之前立即添加以下内容：

e.preventDefault();

额外提示：确保表单仅在每次提交时提交一次＆＃34;提交＆＃34;单击，停止点击事件的传播通过DOM冒泡。

在preventDefault之后，立即输入：

e.stopPropagation();

Ajax表格不会保留在页面上

4 个答案: