javascript - 标签<form>是否在ajax请求后删除部分代码？

我有这样一种形式：

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

当我按SEARCH按钮时（我正在使用jquery来确定何时按下按钮），我调用了ajax请求，并从html文件中的json文件中打印了一些信息，但是会发生奇怪的事情：

我看不到结果！否则，如果我删除了表单标签（所以我只有输入和按钮元素），一切都很好，我可以看到所有数据……那会发生什么？！我应该如何用jquery正确地执行ajax请求（因此当按下按钮时）？

jQuery：

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

阿贾克斯：

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

}

最佳答案

将您的点击事件更改为此：

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

您的问题似乎就是我在上面的评论中所假定的。

type="submit"内的<form>按钮将导致处理表单并重新加载页面，而如果没有<form>标记，则不会发生这种情况。通过执行e.preventDefault();，您将指示按钮不提交表单，而是执行您的searchData()函数。

关于javascript - 标签<form>是否在ajax请求后删除部分代码？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40047176/