爲什麼頁面在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調用之後重新加載？

回答

相關問題