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

我的目录如下：

根目录：Create.php
根/资源/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 不会发出警报，但会重新加载页面。这里有什么问题吗？谁能解释一下吗？提前致谢。

为什么 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>

按钮元素需要该类型，因为它的默认行为是提交表单。

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

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

or:

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

对于您的最新评论：

虽然如果我在 ajax 调用中使用 formData 那么它就不起作用。

这是因为$(this)表单中的数据不属于form但 window 作为函数是在全局范围内定义的。

您可以做的是，在函数的参数中传递表单，例如：

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

然后在函数中：

function submit_basic(event, form) {

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

    // ajax call

}