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

为什么在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);

或：

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

您的最新评论：

虽然如果我在我的ajax调用中使用formData，那么它就无法工作。

这是因为formdata中的$(this)并不属于form，但是因为函数是在全局范围内定义的。

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

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

然后在函数中：

function submit_basic(event, form) {

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

    // ajax call

}

Answer 2

为您的按钮指定一个类型属性

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

Answer 3

你尝试用jQuery处理按钮点击事件..

cassandra.yaml

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

3 个答案: