阻止表单提交时的页面重新加载和重定向 ajax/jquery

17 浏览
0 Comments

阻止表单提交时的页面重新加载和重定向 ajax/jquery

我已经查看了所有类似的帖子，但似乎没有什么帮助。这是我所拥有的内容：

HTML：


  

    

      
      
      
        发送留言
        清空表单

    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()以及包括return false;在onClick中的所有组合。我还尝试了使用input type="button"和type="submit"，结果也一样。我无法解决这个问题，它让我疯了。如果可能的话，由于一些设计上的问题，我宁愿使用超链接。

    非常感谢您的帮助。

    0

    3 答案

    0 Comments

    问题出现的原因是在表单提交时页面会重新加载并重定向。解决方法是使用preventDefault()函数阻止表单的默认行为，同时使用jQuery的ajax()函数来处理表单的提交。具体的代码如下：

    以上代码将在表单提交时阻止页面的重新加载和重定向，并使用ajax()函数将表单数据发送到服务器端进行处理。最后，通过将事件对象传递给sendForm()函数来确保正确工作。

    0
    0 Comments

    问题的出现原因：表单提交后会导致页面重新加载和重定向。

    解决方法：使用XHR发送请求到任意URL，而不是使用$.ajax()方法。

    示例代码：

    


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

    这样就可以成功发送数据而不会导致页面重新加载。

    0
    0 Comments

    防止表单提交时页面刷新和重定向的ajax / jquery解决方法

    当我们在网页中使用表单时，通常会遇到一个问题：当用户点击提交按钮后，页面会重新加载，并且可能会重定向到另一个页面。这对于我们想要在当前页面中处理表单数据并更新页面内容的情况来说是不方便的。为了解决这个问题，我们可以使用ajax或jquery来防止页面刷新和重定向。

    问题原因：

    页面刷新和重定向通常是由于表单的默认行为引起的。当我们点击提交按钮时，浏览器会自动发送表单数据，并且会刷新页面或重定向到另一个页面。

    解决方法：

    一种解决方法是通过使用ajax或jquery来覆盖表单的默认行为。我们可以通过以下方式来实现：

    1. 在表单的HTML标记中添加一个id属性，以便我们可以在javascript中引用它。

    2. 在javascript中，使用jquery的事件处理函数来捕获表单的提交事件。

        $(document).ready(function(){
        $('#myForm').submit(function(e){
            // 阻止表单的默认行为
            e.preventDefault();
            // 处理表单数据并更新页面内容
            // 使用ajax发送表单数据到服务器
            $.ajax({
                url: '处理表单数据的URL',
                method: 'POST',
                data: $('#myForm').serialize(),
                success: function(response){
                    // 处理服务器返回的响应
                }
            });
        });
    });

    3. 在ajax的成功回调函数中，我们可以处理服务器返回的响应数据，并更新页面内容。

    通过这种方式，我们可以防止页面刷新和重定向，并在当前页面中使用ajax或jquery处理表单数据。这种方法对于需要在页面中实时更新数据而不刷新整个页面的情况非常有用。

    0