防止在表单submit ajax/jquery上重新加载和重定向页面 - Prevent page reload and redirect on form submit ajax/jquery

我已经浏览了所有类似的帖子，但似乎没有任何帮助。这就是我的

HTML:

<section>
  <form id="contact-form" action="" method="post">
    <fieldset>
      <input id="name" name="name" placeholder="Name" type="text" />
      <input id="email" name="email" placeholder="Email" type="text" />
      <textarea id="comments" name="comments" placeholder="Message"></textarea>
      <div class="12u">
        <a href="#" id="form-button-submit " class="button" onClick="sendForm()">Send Message</a>
        <a href="#" id="form-button-clear" class="button" onClick="document.getElementById('contact-form').reset()">Clear Form</a>
      </div>
      <ul id="response"></ul>
    </fieldset>
  </form>
</section>

JavaScript/jQuery：

function sendForm() {
  var name = $('input#name').val();
  var email = $('input#email').val();
  var comments = $('textarea#comments').val();
  var formData = 'name=' + name + '&email=' + email + '&comments=' + comments;
  $.ajax({
    type: 'post',
    url: 'js/sendEmail.php',
    data: formData,
    success: function(results) {
      $('ul#response').html(results);
    }
  }); // end ajax
}

当按下#form-button-submit时，我无法阻止页面刷新。我试过return false;，我试过了preventDefault()，以及onClick中包括return false;在内的所有组合。我也尝试使用input type="button"和type="submit"来代替，结果相同。我解决不了这个问题，这太疯狂了。如果可能的话，由于一些设计方面的原因，我宁愿使用超链接。我真的很感谢你在这方面的帮助。

修改函数如下：

function sendForm(e){
  e.preventDefault();
}

正如评论所提到的，通过事件：

onclick = sendForm(event);

更新2:

$('#form-button-submit').on('click', function(e){
   e.preventDefault();
   var name = $('input#name').val(),
       email = $('input#email').val(),
       comments = $('textarea#comments').val(),
       formData = 'name=' + name + '&email=' + email + '&comments=' + comments;
    $.ajax({
      type: 'post',
      url: 'js/sendEmail.php',
      data: formData,
      success: function(results) {
        $('ul#response').html(results);
      }
    });
});

function sendForm(){
    // all your code
    return false;
}

我也参与了寻找这个问题的解决方案，到目前为止，我找到的最好的工作方法是这个-

尝试使用XHR将请求发送到任何url，而不是$.ajax（）……我知道这听起来有点奇怪，但请尝试一下！
示例-

<form method="POST" enctype="multipart/form-data" id="test-form">

var testForm = document.getElementById('test-form');
testForm.onsubmit = function(event) {
event.preventDefault();
var request = new XMLHttpRequest();
// POST to any url
request.open('POST', some_url, false);
var formData = new FormData(document.getElementById('test-form'));
request.send(formData);

这将成功发送您的数据。。。而无需重新加载页面。

您尝试过使用吗

function sendForm(event){
    event.preventDefault();
}

简单完整的工作代码

<script>
    $(document).ready(function() {
        $("#contact-form").submit(function() {
            $("#loading").show().fadeIn('slow');
                $("#response").hide().fadeOut('slow');
                 var frm = $('#contact-form');
                 $.ajax({
                     type: frm.attr('method'),
                     url: 'url.php',
                     data: frm.serialize(),
                     success: function (data) {
                         $('#response').html(data);
                         $("#loading").hide().fadeOut('slow');
                         $("#response").slideDown();
               }, error: function(jqXHR, textStatus, errorThrown){
              console.log(" The following error occured: "+ textStatus, errorThrown );
            } });
           return false;
        });
    });
</script>

#loading可以是一个图像或在表单处理时显示的东西，使用该代码只需创建一个ID为contact-form的表单即可

避免表单提交的另一种方法是将按钮放在表单外部

<form id="getPatientsForm">
    Enter URL for patient server
    <br/><br/>
    <input name="forwardToUrl" type="hidden" value="/WEB-INF/jsp/patient/patientList.jsp" />
    <input name="patientRootUrl" size="100"></input>
    <br/><br/>
    <button onclick="javascript:postGetPatientsForm();">Connect to Server</button>
</form>

这种形式会导致上述不希望的重定向。将html更改为下面显示的内容解决了问题。

<form id="getPatientsForm">
    Enter URL for patient server
    <br/><br/>
    <input name="forwardToUrl" type="hidden" value="/WEB-INF/jsp/patient/patientList.jsp" />
    <input name="patientRootUrl" size="100"></input>
    <br/><br/>
</form>
<button onclick="javascript:postGetPatientsForm();">Connect to Server</button>

我希望任何人都能很好地理解我的想法，因为这是一个非常简单的想法。

给你需要的表格本身一个id，或者你可以通过任何其他你喜欢的方式获得它。
在表单输入"submit"中，从javascript文件中调用onclick方法。
在这个方法中，让一个变量引用你的from id，也就是它上面的addEventListener，并在"submit"上做一个preventDefault方法，而不是在"click"上
要澄清这一点，请参阅：
```
// element refers to the form DOM after you got it in a variable called element for example:
element.addEventListener('submit', (e) => {
   e.preventDefault();
   // rest of your code goes here
});  
```
简单地说，这个想法是在处理点击提交按钮事件之后，通过提交事件来处理表单。

无论您在该方法中的需求是什么，它现在都可以在不刷新的情况下工作：）
只要确保以正确的方式处理ajax，您就完成了。

当然，它只适用于表单。

我处理这个问题的方法：我删除了整个form标记，并将所有表单元素（如input、textarea标记）放置在div中，并使用一个按钮调用javascript函数。像这样：

<div id="myform">
<textarea name="textarea" class="form-control">Hello World</textarea>
<button type="submit" class="btn btn-primary"
                            onclick="javascript:sendRequest()">Save
                            changes</button>
<div>

Javascript：

function sendRequest() {
        $.ajax({
            type: "POST",
            url: "/some/url/edit/",
            data: {
                data: $("#myform textarea").val()
            },
            success: function (data, status, jqXHR) {
                console.log(data);
                if (data == 'success') {
                    $(`#mymodal`).modal('hide');
                }
            }
        });
        return true;
}

我想，当我们使用AJAX发送实际请求时，为什么要使用form。这种方法可能需要额外的努力来完成诸如重置表单元素之类的事情，但它对我有效

注意：上面的答案比这个更优雅，但我的用例有点不同。我的网页上有很多表格，我不认为在每个提交按钮上注册活动听众是一个好方法。因此，我让每个提交按钮调用sendRequest（）函数。