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（）