为什么页面在JQuery ajax调用后重新加载？

Question

我的目录如下:

Root:Create.php
Root/resource/js:ajaxLibrary.js

在我的create.php文件中,我有一个如下所示的表单:

<form id="form_profile_new" enctype="multipart/form-data">
    <!--some input fields-->  
    <button id="showLeft_details" onclick="submit_basic()" value="Create" style="float:right;">Create</button> <!--create-->  
</form>  
<script src="resource/js/ajaxLibrary.js"></script>

我的ajaxLibrary.js看起来像这样:

function submit_basic(event) {

    //var formData = new FormData($(this)[0]);
    //event.preventDefault();
    $.ajax({
        url: 'resource/php/submit_basic.php',
        type: 'POST',
        data: 'hello',
        async: false,
        success: function(response) {
            alert("Profile Successfully Created!");
            show_profile_sideMenu();
        },
        cache: false,
        contentType: false,
        processData: false
    });
    return false;
}

如果我运行此代码,ajax工作并警告消息,然后页面重新加载.如果我使用preventDefault()函数,那么ajax甚至不会运行.如果我取消注释使用FormData对象的第一行,则ajax不会发出警报但会重新加载页面.这有什么不对？谁能解释一下？提前致谢.

Answer 1

给你的按钮一个 type 属性

<button id="showLeft_details" type="button" onclick="submit_basic()" value="Create" style="float:right;">Create</button> <!--create-->  

Answer 2

为什么页面在JQuery ajax调用后重新加载？

这是因为你的函数有一个return语句,并且你没有在onclick处理程序中返回.

你必须退货:

onclick="return submit_basic()"  
// results like onclick="return false;". "false" is the return value;

因为你的函数返回一个return语句,false所以你必须在onclick处理程序中返回它.

或者在按钮上添加一个类型:

<button type="button" ....>Create</button>

button元素是必需的,因为它的默认行为是提交表单.

但我仍觉得内联事件处理程序不好,而是不引人注意并使用submit事件将表单提交到指定的操作:

$('#form_profile_new').submit(submit_basic);

要么:

$('#form_profile_new').submit(function(){
   return submit_basic();
});

您的最新评论:

虽然如果我在我的ajax调用中使用formData,那么它不起作用.

这是因为$(this)formdata不属于form窗口,因为函数是在全局范围内定义的.

你可以做的是,在函数的参数中传递表单,如:

 onclick="return submit_basic(event, 'form_profile_new')"  

然后在功能:

function submit_basic(event, form) {

    var formData = new FormData($('#'+form)[0]);

    // ajax call

}