为什么页面在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不会发出警报，但会重新加载页面。这里有什么问题？谁能解释一下？提前致谢。

来源

2016-02-02 Wahid Masud

show this show_profile_sideMenu（）;函数 –

你有什么show_profile_sideMenu（）;功能。尝试调试此功能。 – bharatpatel

函数show_profile_sideMenu（）{ \t $（'＃sidemenu_details'）。addClass（'cbp-spmenu-open'）; \t $（'＃profile_basic'）。removeClass（'active in'）; \t $（'＃profile_details'）。addClass（'active in'）; } –

为什么页面重新加载后JQuery的AJAX调用？

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

您要退回去：

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

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

或添加类型的按钮：

<button type="button" ....>Create</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 

}

来源

2016-02-02 08:00:28 Jai

这是一个很好的观点，请您详细说明 –

在onclick作品中加入'return'！非常感谢。虽然如果我在我的ajax调用中使用formData，那么它不起作用。你能解释一下吗？ –

@WahidMasud，因为我看到你的代码注释中没有'form'，而是'window'，所以''（this）''由于它存在于全局范围内而且你调用函数的方式，因为你需要通过你的表格。 – Jai

给你的按钮类型属性

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

来源

2016-02-02 08:00:20 Mahesh

你能解释为什么要打印错误，当它已经是一个按钮元素 –

默认情况下它的行为与提交按钮和内部形式它负责页面刷新（表单提交）。 – Mahesh

您尝试手柄按钮单击事件使用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 
     }); 
    }); 
});

来源

2016-02-02 08:10:00 levent

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

回答

相关问题