javascript - 调用preventDefault()时AJAX表单重新加载页面

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 section :-

$(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);
        }
    });
});
});