调用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部分：-

$(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

在.submit()函数的末尾使用return false

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

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

event.stopPropagation()将阻止事件冒泡。

Answer 3

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

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