javascript - Ajax 表单不会保留在页面上

Question

我一直在思考这个问题，但现在是我寻求帮助的时候了(问我明天有工作，不想整晚都在这上面)

我的表单位于模式内，这是我的脚本

$(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')
          }

     });
});
});

一切正常，它会启动脚本并提交到后端并显示成功消息，但是一旦您关闭弹出的成功消息，它就会重定向到操作“立即申请”页面。

我怎样才能在不破坏提交的情况下防止这种情况发生，因为我已经尝试过 return false 和 PreventDefault。

这是表格

<form action="/apply-now/" enctype="multipart/form-data" id="applyForm" method="post" name="applyForm" class="form">
<input name="is_data_submitted" type="hidden" value="1"> 
<input name="listing_id" type="hidden" value="{$listing_id}">

MY FORM DATA

<button type="submit" id="submit" class="btn btn-warning">Apply now</button>

任何帮助将不胜感激!

谢谢

J

Answer 1

该表单已提交两次。一次使用表单操作，另一次使用 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;
    });
});