PHP/AJAX：似乎无法将 ajax 结果显示到 DIV，但在 ALERT() 中有效

Question

我目前正在通过一个真实的网站项目学习 PHP，并希望使用 Ajax 调用来更改网站的各个部分。

代码示例

我的项目.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 won't work in IE 7/8 but works in other browsers
2. jQuery.ajax()
3. jQuery.ajaxSetup()
4. .append()
5. jquery .html() vs .append()
6. Can't append HTML code into one div by using jQuery
7. Add Html to Div with effect jQuery
8. Use append() to add text/html to an element with jQuery

还有更多...

结果

当我单击包含在menu.html 中并通过index.php 显示的库存链接时，jQuery 代码执行得很好。我从服务器获取结果，同时在alert() 中显示来自inventory.html 的正确内容。

但是，当我将innerHTML 设置为<div id="section" class="content"></div> 时，我似乎无法获得预期的结果。页面的背景似乎在闪烁，尽管按照 Ajax 定义不应该如此，并且我的 XMLHttpRequest.responseText 的内容永远不会显示。

当我双击 Inventory 链接时，我越接近让它工作，所以在页面背景的第一次“闪烁”之后，它显示了我部分的内容。

我尝试了多种方法，在我的<a> 标记上使用带有onclick 元素的经典Javascript，我尝试使用document.getElementById("section")，虽然获得了正确的元素，但我无法在页面上显示我的内容。

欢迎提出任何想法！

提前致谢！ =)

Answer 1

您需要防止浏览器默认行为：

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

    event.preventDefault();

    ...

});

注意event 添加到点击处理程序的参数。

顺便说一句，你的 HTML 响应是无效的 - <table> 应该包含一个 <tbody> 元素包装任何 <tr>s。

Answer 2

根据要求。更简单的解决方案

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

jQuery .load()