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

My directory is as follows:

我的目录如下:

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

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

In my create.php file I have a form that looks like this:

在我的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>

My ajaxLibrary.js looks like this:

我的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;
}

If I run this code ajax works and alerts the message but then the page reloads. If I use the preventDefault() function then the ajax doesn't even run. If I uncomment the first line that uses FormData object then ajax doesn't alert but it reloads the page. What is wrong here? Can anyone explain? Thanks in advance.

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

3 个解决方案

#1

Why page reloads after JQuery ajax call?

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

It is because you have a return statement at your function and you are not returning in the onclick handler.

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

You have to return it:

你必须退货:

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

Because you have a return statement from your function which returns false so you have to return it in the onclick handler.

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

or add a type to your button:

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

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

The type is required to the button element because it's default behavior is to submit the form.

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

But still i feel inline event handlers are not good, instead go unobtrusive and use submit event to submit the form to the specified action:

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

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

or:

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

For your latest comment:

您的最新评论:

although if I use formData in my ajax call then it doesn't work.

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

It is because $(this) in the formdata doesn't belong to form but window as the function is defined in the global scope.

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

What you can do is, pass the form in the function's arguments like:

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

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

then in the function:

然后在功能:

function submit_basic(event, form) {

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

    // ajax call

}

#2

give your button a type attribute

给你的按钮一个类型属性

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

#3

you try handle button click event with jQuery..

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

$(function() {
    $("#showLeft_details").click(function(e) {
        e.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
        });
    });
});

#1