时间戳

首页 > 解决方案 > 使用 jQuery 提交表单后停止页面重定向

javascript - 使用 jQuery 提交表单后停止页面重定向

问题描述

我有一个简单的代码，我尝试在不重定向页面的情况下发帖。到目前为止，我的代码如下所示：

$(function() {
    $('#btn').on('click', '.document', function(e) {
        e.preventDefault();
        $.ajax({
           
            type: 'post',
            url: '/save',
            data: {
                html: '<p>Sucess</p>',
                delay: 1
            },
            dataType: 'html',
           
            success: function(data) {
                console.log('success');
                $('.document').append(data);
            },
     
        });
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  <form action="/save" method="post" autocomplete="off" id="theForm">
    
    <button id="btn" type="submit" name="send">
      Send
    </button> 
  </form>
  
  <span class="document"></span>

有人可以帮我解决这个问题吗？我不知道为什么我的代码不起作用，我希望能够POST不重新加载和重定向页面。

标签： javascriptjquery

解决方案

您将委托事件处理程序附加到span没有内容的 a ，并且主选择器不是 that 的父级span。

正确的方法是将submit事件处理程序附加到form元素。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form action="/save" method="post" autocomplete="off" id="theForm">
  <button id="btn" type="submit" name="send">Send</button>
</form>

<span class="document"></span>

jQuery($ => {
  $('#theForm').on('submit', e => {
    e.preventDefault();

    $.ajax({
      type: 'post',
      url: '/save',
      data: {
        html: '<p>Sucess</p>',
        delay: 1
      },
      dataType: 'html',
      success: function(data) {
        console.log('success');
        $('.document').append(data);
      }
    });
  });
});

推荐阅读