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

ajax is loading the page to return a POST request

本文关键字：返回 POST 请求 加载 ajax      更新时间：2023-09-26

当我通过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>
有没有人知道如何解决这个问题，我做错了什么!!

我认为，您有search作为id不是类。它根本没有调用ajax。它正在提交，因为它是一个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()，这里或这里

您正在使用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) {
                }
        });
    });
});

代码对。
您只需要将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. isdefaultprevent()来确定这个方法是否有由此事件触发的事件处理程序调用

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

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

你必须在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;
});

也请检查此以获得更多关于return false;和e.preventDefault();之间的差异的信息

使用type="button"代替submit。提交按钮将按原样提交表单。

相关文章：