防止页面重新加载和重定向表单提交 ajax/jquery答案

【问题标题】：Prevent page reload and redirect on form submit ajax/jquery防止页面重新加载和重定向表单提交 ajax/jquery
【发布时间】：2014-12-21 10:43:06
【问题描述】：

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

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" 代替，结果相同。我无法解决这个问题，它正在发疯。如果可能的话，由于某些设计问题，我宁愿使用超链接。非常感谢您对此提供的帮助。

【问题讨论】：

标签： javascript php jquery html ajax

【解决方案1】：

我处理这个问题的方法：我删除了整个form 标签并将所有表单元素（如输入、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() 函数。

【讨论】：

【解决方案2】：

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

为您所需的表单本身提供一个 ID，或者您可以通过您喜欢的任何其他方式获取它。
在表单输入“提交”中调用您的 javascript 文件中的 onclick 方法。
在此方法中创建一个变量引用您的来自 id 的 addEventListener 并在“提交”而不是“点击”上创建一个 preventDefault 方法。
为了澄清这一点，请参阅：
```
// 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，就可以完成。

当然，它只适用于表单。

【讨论】：

【解决方案3】：

另一种避免提交表单的方法是将按钮放置在表单之外。我有正在工作的现有代码，并根据工作代码创建了一个新页面，并像这样编写了 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/>
    <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>

【讨论】：

不幸的是，当用户按下 [enter] 时，这不会点击按钮，但仍会尝试提交表单。

【解决方案4】：

我也有点忙于寻找解决这个问题的方法，到目前为止我找到的最好的工作方法是这个-

尝试使用 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);

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

【讨论】：

【解决方案5】：

修改函数如下：

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);
      }
    });
});

【讨论】：

别忘了事件对象需要传入函数调用
onclick="sendForm(this)" 不是event
谢谢，但它不起作用。事情就在它刷新之前，我可以看到 ul 已填充。除了 preventDefault() 之外，我还尝试在 onClick 中使用 return false，例如“sendForm(); return false;”将 return default 放在 ajax 之后，同时具有 preventDefault() 和 return false；以及任何展示位置的组合。
@VettanMaximillion 去掉内联事件处理程序，然后看我的“更新2”
非常感谢。我之前尝试过，但没有成功，结果在我的无知和绝望中，我没有意识到我的剧本是在头脑中而不是在身体中。在你的帮助下，我确定了它。谢谢你，尤其是这么快的回复。

【解决方案6】：

简单而完整的工作代码

<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 的表单

【讨论】：

【解决方案7】：

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

【讨论】：

【解决方案8】：

您是否尝试过使用

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

【讨论】：