防止在 AJAX 请求时刷新答案

【问题标题】：Preventing refresh upon AJAX request防止在 AJAX 请求时刷新
【发布时间】：2017-06-06 02:47:06
【问题描述】：

我的代码中有一个表单，我只想使用 AJAX 在我的网页上显示该表单中的字段。我尝试了 e.preventDefault() 并返回 false，但这些似乎都不起作用。

我通过按钮点击事件触发提交。

我的 Jquery 代码：

$("body").on('click', '#save', function (e) {//button which triggers submit
    $('form').submit();
    e.preventDefault();
});

$('#form').on('submit', function(e){
    e.preventDefault();
    e.stopPropagation();
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    $.ajax({
        type: 'POST',
        url: '/results',
        data: $('#form').serializeArray(), 
        success: function (data) {
            //if no error from backend validation is thrown
            return false;
            $('#tabShow').html(data);      
        },
        error: function () {
            alert('error');
        }
    });

我的表单 html 是：<form class="form-horizontal" method="POST" action="/results" id="form">

在我的 web.php 中：

Route::post('/results', function() {
$m=Request::all();
var_dump($m);
});

此代码的问题在于它刷新了我所在的当前页面。我有一个保存按钮，它应该提交表单。由于我的其他功能，我不能使用类型提交。

感谢您的帮助。

【问题讨论】：

在其他任何事情之前先执行e.preventDefault();
也试过了（即 $("body").on('click', '#save', function (e) {e.preventDefault()};) 它只是刷新页面留在我现在的那个。
#save 按钮在表单之外吗？
我能问一下您为什么要在<body> 元素上进行 OnClick
@RiggsFolly 这是因为我正在动态接收表单并且不得不求助于事件委托，body 似乎正在使用该按钮。

标签： javascript jquery ajax

【解决方案1】：

在保存按钮点击事件中执行请求，例如。

HTML

<form id="contact-form" class="form-horizontal" action="/echo/html/" method="post">
    <!-- many fields -->
    <button id="save" class="btn btn-primary btn-lg">Submit</button>
</form>

$("body").on('click', '#save', function (e) {//button which triggers 
    var contactForm = $('#contact-form');

    e.preventDefault();
    $.ajaxSetup({
        beforeSend: function(xhr) {
            xhr.setRequestHeader('X-CSRF-TOKEN', $('meta[name="csrf-token"]').attr('content'));
        }
    });

    // Send a POST AJAX request to the URL of form's action
    $.ajax({
      type: "POST",
      url: contactForm.attr('action'),
      data: contactForm.serialize()
    })
    .done(function(response) {
      console.log(response);
    })
    .fail(function(response) {
      console.log(response);
    });
});

Working demo

【讨论】：

不走运：/ ajax 请求没有被触发也没有给出错误。

【解决方案2】：

尝试在脚本末尾使用return false（同时删除 preventDefault() ）

【讨论】：