PHP / AJAX：似乎無法將Ajax結果顯示到DIV中，但可以在ALERT（）中使用

Question

我目前正在通過一個真實的網站項目來學習PHP，並且想使用Ajax調用來更改網站的各個部分。

代碼樣本

myproject.js

$(document).ready(function() {
    $("#inventory").click(function() {
        $.ajaxSetup({
            url: "sectionhandler.php?section='inventory'",
            type: "get",
            dataType: "html"
        });
        $.ajax().done(function(html) { 
            alert(html); // This works!
            $("#section").html(html); // This doesn't work.
            $("#section").append(html); // This neither.
        });
    });
});

inventory.html

<table><tr><td>Hello world with AJAX!</td></tr></table>

sectionhandler.php

<?php echo file_get_contents( 'inventory.html' ); ?>

menu.html

<a id="inventory" href="">Inventory</a>

的index.php

<div id="menu" class="content"><?php echo file_get_contents( 'menu.html' ); ?></div>
<div id="section" class="content"></div>

找到和閱讀並嘗試過的相關文章

1. XMLHttpRequest在IE 7/8中將不起作用，但在其他瀏覽器中將起作用
2. jQuery.ajax（）
3. jQuery.ajaxSetup（）
4. 。附加（）
5. jQuery .html（）與.append（）
6. 無法使用jQuery將HTML代碼附加到一個div中
7. 將HTML添加到具有效果jQuery的Div中
8. 使用append（）使用jQuery將text / html添加到元素

還有很多...

結果

當我單擊menu.html包含的並通過index.php顯示的Inventory鏈接時，jQuery代碼執行得很好。 我從服務器獲取結果，同時在alert()顯示來自inventory.html .html的正確內容。

但是，當我將innerHTML設置為<div id="section" class="content"></div> ，我似乎無法獲得預期的結果。 頁面的背景似乎在閃爍，盡管不應該按照Ajax定義進行閃爍，並且XMLHttpRequest.responseText的內容從未顯示。

當我雙擊Inventory鏈接時，使它更接近起作用，以便在頁面背景中的第一個“刷新”之后，它顯示了本節的內容。

我已經嘗試了多種使用經典Javascript並在<a>標記上帶有onclick元素的方法，並且嘗試了document.getElementById("section") ，盡管獲得了正確的元素，但我無法在頁面上顯示我的內容。

任何想法都歡迎！

提前致謝 ！ =）

Answer 1

很有可能，您需要防止瀏覽器的默認行為：

$("#inventory").click(function(event) {

    event.preventDefault();

    ...

});

請注意， event參數已添加到點擊處理程序中。

順便說一句，您的HTML響應無效- <table>應該包含包裝任何<tr>的<tbody>元素。

Answer 2

按照要求。 更簡單的解決方案

$("#section").load("sectionhandler.php?section=inventory");

jQuery .load（）