javascript - Jquery 重新加载整个页面而不仅仅是表单提交

Question

我正在开发一个测验应用程序。我需要创建一个面板来添加问题。现在这是我正在使用的 AJAX 代码。我对以下代码片段有两个问题。 (i) 调用 ajax 函数后页面会完全重新加载。 (ii) 奇怪的是，有时数据会被提交，有时则不会。

我不知道我在哪里犯了错误。请帮忙。谢谢:)

    function ajaxinsert() {
    var questionVal = $("#question").val();
    var option1 = $("#optiona").val();
    var option2 = $("#optionb").val();
    var option3 = $("#optionc").val();
    var option4 = $("#optiond").val();
    //alert(questionVal+option1+option2+option3);
    $.ajax({
        url: 'admin/insertQuestion',
        type: 'POST',
        cache: false,
        data: {
            question: questionVal,
            optiona: option1,
            optionb: option2,
            optionc: option3,
            optiond: option4
        },
        dataType: 'json',
        success: function (reply) {
            console.log(reply);
        },
        error: function (xhr, desc, err) {
            console.log(xhr);
            console.log("Desc :: " + desc + "\nError :: " + err);
        }
    });
}
$("#insert-button").on('submit', function (e) {
    e.preventDefault();
    ajaxinsert();
});

Answer 1

您应该绑定(bind)到表单本身的 submit 事件，而不是提交按钮上的事件。