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身份不是上课.它根本不叫阿贾克斯.它正在提交,因为它是一个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(),这里或这里