标签& lt; form>删除ajax请求后的部分代码

tag <form> deletes part of code after ajax request?

本文关键字：请求 代码 删除 lt form 标签 ajax      更新时间：2023-09-26

我有一个这样的表单:

 <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!");
        }
    });

}

将点击事件更改为:

$("#searchUserButton").bind("click", function (e) {
    e.preventDefault();
    searchData();
});
你的问题似乎是我在上面的评论中所假设的。

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

直接修改

<button type="submit" ...


<button type="button" ...

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

相关文章：