javascript - 标签在ajax请求后删除部分代码？

Question

我有一种这样的形式:

 <form>
    <input class="form-control" id="searchField" type="text">
    <button type="submit" id="searchUserButton">SEARCH BUTTON</button>
</form>

当我按下搜索按钮时(我使用 jquery 来确定何时按下按钮)，我调用 ajax 请求并在 html 文件中打印 json 文件中的一些信息，但发生了一些奇怪的事情:

我看不到结果!否则，如果我删除表单标签(所以我只有输入和按钮元素)一切正常，我可以看到所有数据......那么会发生什么？!我应该如何以正确的方式使用 jquery 进行 ajax 请求(因此当按下按钮时)？

Jquery:

    $("#searchUserButton").bind("click", function () {
    searchData();
    });

Ajax :

function searchData() {
    $.ajax({
        type: 'GET',
        url: 'data/file.json',
        dataType: 'json',
        success: showData,
        error: function () {
            // FAIL
            alert("ERROR!");
        }
    });

}

Answer 1

将您的点击事件更改为:

$("#searchUserButton").bind("click", function (e) {
    e.preventDefault();
    searchData();
});

你的问题似乎是我在上面的评论中假设的。

一个type="submit" <form> 内的按钮将导致表单处理并重新加载页面，而没有<form>标签，这不会发生。通过这样做e.preventDefault(); ，您指示按钮不提交表单，而是执行您的 searchData()功能。