jQuery的阿賈克斯沒有工作，形式與職位刷新頁面

我有以下的HTML代碼：（也被通過AJAX加載到一個div）jQuery的阿賈克斯沒有工作，形式與職位刷新頁面

（切出不相關的部分）

<form id='addContactForm' method='post' action='/contact/create/'> 
    <div> 
     <input type="image" name="submit" id="addContactSubmit" src="/images/add-small.png" style="width: auto; vertical-align: bottom;"> 
    </div> 
</form> 

<script> 
    $('#addContactSubmit').click(function() { 
     alert('got here'); 
     $.ajax({ 
      type: 'POST', 
      url: '/contact/create/', 
      data: $("#addContactForm").serialize(), 
      success: function (data, status, xhttp) { 
       if (data) { 
        alert('Got Data'); 
       } else { 
        alert('No Data'); 
       } 
      }, 
      dataType: html 
     }); 
     return false; 
    }); 
</script>

所以現在當我點擊<image>時，它實際上發佈了表單並刷新了頁面。我讀了另一篇文章，指出問題在於jquery沒有加載，一旦加載，解決了問題。然而，在這種情況下，我收到警報，告訴我jquery正在加載（因爲點擊事件觸發正常），但看起來$.ajax部分未被執行（或者存在問題）。如果我刪除$.ajax部分，則會收到警報，並且該頁面不會提交併重新加載。

本來我說，這種形式的HTML被通過主頁上的一個Ajax調用加載，我想知道如果有事情做與阿賈克斯失敗後。注意：我還從來沒有得到過警告（「GOT數據」）或（「無數據」），只有警報「來到這裏」

任何INSITE將是巨大的。由於

另外要注意的，我得到的螢火沒有錯誤。

來源

2011-09-18 Aaron Murray

這是一個提交輸入，它會自動回發的形式以及運行AJAX腳本。

嘗試......

<script> 
    $('#addContactSubmit').click(function (e) { 
     e.preventDefault(); 
     alert('got here'); 
     $.ajax({ 
      type: 'POST', 
      url: '/contact/create/', 
      data: $("#addContactForm").serialize(), 
      success: function (data, status, xhttp) { 
       if (data) { 
        alert('Got Data'); 
       } else { 
        alert('No Data'); 
       } 
      }, 
      dataType: html 
     }); 
     return false; 
    }); 
</script>

所有我所做的就是單擊事件傳遞給你的jQuery函數，然後調用e.preventDefault（）停止默認DOM click事件的執行，在這種情況下，對於提交按鈕是回發。

希望這是有道理的，你有它非常正確的！

來源

2011-09-18 05:02:39 timothyclifford

這正是我所需要的！完善。儘管使用上面的代碼，但我遇到了一個小問題。 Firebug正在顯示：「html未定義」[Break On This Error]（超出範圍18）。現在，如果我刪除'dataType：html'這行似乎工作正常，但這是最好的解決方案？ –

你試過用引號嗎？所以「html」。我相當確定沒有引號，JavaScript會認爲它是一個變量，在這種情況下，它不存在，這就是爲什麼你會得到Firebug錯誤。在創建請求時，您可能會安全地保留該參數，jQuery會執行一些內部工作，並且通常足夠智能以確定要發送的數據格式。有一個閱讀在這裏：http://api.jquery.com/jQuery.ajax/ datatype大約在頁面的一半 – timothyclifford

是的，就是這樣，現在工作很好。謝謝！ –

jQuery的阿賈克斯沒有工作，形式與職位刷新頁面

回答

相關問題