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

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 不是类。它根本不调用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() , here或here