Question

我有一个Node / Express / Mongo应用程序，我正在尝试进行AJAX调用，数据现在正在保存，但即使我在AJAX调用中使用preventDefault()，页面也在重新加载。为什么会这样？

var categoryButton = function(){
event.preventDefault();
$("#add_category_form").submit(function (event){
    event.preventDefault();

    $.ajax({                     //this gets the ID, you have to add a data-id="user._id" to the input you want to send the request from.
        url: $("add_category_form").attr("action"),
        type: "POST",
        dataType: json,
        done: function (result) {
            alert("successful");
            //console.log(result.categories);
        },
        fail: function (fail){
            console.log(fail);
        }
    });
});
};

这是HTML

<section id="event_categories_section"   style="display:none;" class="col-md-6">
                    <form  id="add_category_form" onsubmit="categoryButton" method="POST" action="/user/categories/<%=user._id%>">
                        <label for="input_category_name">Add a category for your Events</label>
                        <div class="input-group">
                            <div class="input-group-btn">
                                <input  type="submit" id="add_category_button" value="Add Category!" class="btn btn-primary dropdown-toggle"></input>
                            </div>
                            <input class="form-control" id="input_category_name" name="user[category]" placeholder="Category Name" required type="text" minlength="2" data-id="<%= user._id %>">
                        </div>
                    </form>
                    <hr>
                    <div class="col-md-6">
                        <h3>List of Categories</h3>
                        <section class="well" id="list_category_section">
                            <% user.categories.forEach(function(category){ %>
                            <p><%= category %></p>
                            <% }); %>
                        </section>

                    </div>
                </section>

Answer 1

更新您的代码并检查

 <section id="event_categories_section"   style="display:none;" class="col-md-6">
                    <form  id="add_category_form"  method="POST" action="/user/categories/<%=user._id%>">
                        <label for="input_category_name">Add a category for your Events</label>
                        <div class="input-group">
                            <div class="input-group-btn">
                                <input  type="submit" id="add_category_button" value="Add Category!" class="btn btn-primary dropdown-toggle"></input>
                            </div>
                            <input class="form-control" id="input_category_name" name="user[category]" placeholder="Category Name" required type="text" minlength="2" data-id="<%= user._id %>">
                        </div>
                    </form>
                    <hr>
                    <div class="col-md-6">
                        <h3>List of Categories</h3>
                        <section class="well" id="list_category_section">
                            <% user.categories.forEach(function(category){ %>
                            <p><%= category %></p>
                            <% }); %>
                        </section>

                    </div>
                </section>

Ajax部分： -

$(function() {
$("#add_category_form").submit(function (event){
    event.preventDefault();

    $.ajax({                     //this gets the ID, you have to add a data-id="user._id" to the input you want to send the request from.
        url: $("add_category_form").attr("action"),
        type: "POST",
        dataType: json,
        done: function (result) {
            alert("successful");
            //console.log(result.categories);
        },
        fail: function (fail){
            console.log(fail);
        }
    });
});
});

Answer 2

在return false功能

的末尾使用.submit()

在jQuery事件处理程序中返回false实际上与在传递的jQuery.Event对象上调用event.preventDefault和event.stopPropagation相同。

event.preventDefault()将阻止发生默认事件。

event.stopPropagation()可以防止事件冒泡。

Answer 3

从表单中删除 onsubmit 属性，并在文档准备就绪时调用 categoryButton（）函数，然后您的提交事件将与您的表单，一切都会正常运行。我刚刚修改了一下你的代码，请尝试并分享你的反馈。

   $(function() {
    categoryButton();
    })
var categoryButton = function(){
$("#add_category_form").submit(function (event){
    event.preventDefault();

    $.ajax({                     //this gets the ID, you have to add a data-id="user._id" to the input you want to send the request from.
        url: $("add_category_form").attr("action"),
        type: "POST",
        dataType: json,
        done: function (result) {
            alert("successful");
            //console.log(result.categories);
        },
        fail: function (fail){
            console.log(fail);
        }
    });
});
};

调用preventDefault（）时AJAX表单重新加载页面

3 个答案: