Question

当我通过ajax发出“POST”请求时，页面在返回请求时加载。

我们不是要使用ajax来阻止整个页面重新加载吗？

这是我的HTML代码：

<form method="post">
<div align="center" class="col-md-10">
    <input  type="text" id= "input" name="input" >
 </div><
 <div class="form-group">
    <button type="submit" class="btn btn-default" id="search">
     Search
    </button>
  </div>
  </form>

这是我的ajax请求：

<script>
    $(document).ready(function () {
    $(".search").on('click', function () {
            var data = {};
            data['input'] = $('#input').val();
            // Submit data via AJAX§
            $.ajax({
            url: '/home',
                    type: 'post',
                    data: data,
                    success: function (data) {
                    }
            });
    });
    });
</script>

有谁知道如何解决这个问题以及我做错了什么!!!

Answer 1

我认为，你有search作为id不是类。它根本不叫阿贾克斯。它正在提交，因为它是一个submit按钮，因此请更改您的代码，

注意： .search无效，

$("#search").on('click', function (e) {
    e.preventDefault();
    var data = {};
    data['input'] = $('#input').val();
        // Submit data via AJAX
    $.ajax({
        url: '/home',
        type: 'post',
        data: data,
        success: function (data) {

        }
    });
});

e.preventDefault()用于阻止提交按钮的默认行为（默认情况下，点击提交按钮会重新加载页面。）详情了解e.preventDefault()，here或{{3 }}

Answer 2

你正在使用Id并选择错误的类。

使用

$("#search").on('click', function (e) {

而不是

$(".search").on('click', function (e) {

所以最终的JS将是

<script>
$(document).ready(function () {
    $("#search").on('click', function (e) {
        e.preventDefault();
        e.stopPropagation();
        var data = {};
        data['input'] = $('#input').val();
        // Submit data via AJAX§
        $.ajax({
        url: '/home',
                type: 'post',
                data: data,
                success: function (data) {
                }
        });
    });
});

Answer 3

您的代码确定您只需将preventDefault()添加到click函数，然后从.search更改为#search，即..

<script>
    $(document).ready(function () {
    $("#search").on('click', function (e) {
            e.preventDefault();
            var data = {};
            data['input'] = $('#input').val();
            // Submit data via AJAX§
            $.ajax({
            url: '/home',
                    type: 'post',
                    data: data,
                    success: function (data) {
                    }
            });
    });
    });
</script>

event.preventDefault（）

此方法不接受任何参数。例如，单击的锚点不会将浏览器带到新的URL。我们可以使用event.isDefaultPrevented（）来确定此方法是否具有由此事件触发的事件处理程序调用

Answer 4

如果您需要在没有页面加载的情况下提交表单，则需要阻止按钮的默认行为：

$(your_button).on('click', function (ev) {
    ev.preventDefault();
    // do stuff here
});

Answer 5

您必须在onclick事件处理程序中返回false才能停止提交表单：

$(".search").on('click', function () {
    var data = {};
    data['input'] = $('#input').val();
    // Submit data via AJAX§
    $.ajax({
        url: '/home',
        type: 'post',
        data: data,
        success: function (data) {
        }
    });

    return false;
});

请同时查看此内容以获取有关difference between return false; and e.preventDefault();

的更多信息

Answer 6

使用type =“button”而不是提交。 “提交”按钮将按原样提交表单。

ajax正在加载页面以返回POST请求

6 个答案: