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

【问题标题】：tag <form> deletes part of code after ajax request?标签 <form> 在ajax请求后删除部分代码？
【发布时间】：2017-02-24 02:56:45
【问题描述】：

我有这样一种形式：

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

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

我看不到结果！否则，如果我删除表单标签（所以我只有输入和按钮元素）一切正常，我可以看到所有数据......那么会发生什么？！我应该如何以正确的方式使用 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!");
        }
    });

}

【问题讨论】：

你也可以发布你的JS代码吗？
单击按钮时，您可能没有执行e.preventDefault();。如果在表单标签中，默认情况下提交按钮将导致页面重新加载。没有表单标签，这不会发生。

标签： javascript jquery html ajax

【解决方案1】：

将您的点击事件更改为：

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

您的问题似乎是我在上面的 cmets 中所假设的。

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

【讨论】：

【解决方案2】：

只是改变

<button type="submit" ...

到

<button type="button" ...

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

【讨论】：