Question

我有一种这样的形式：

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

当我按下SEARCH BUTTON（我使用jquery来判断按钮何时被按下）时，我调用ajax请求并从hson文件中的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()功能。

Answer 2

只需更改

<button type="submit" ...

到

<button type="button" ...

否则，无论您的点击处理程序如何，表单都会提交并重新加载您的页面。

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

2 个答案: