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>

相关文章发现并阅读和审判

XMLHttpRequest won't work in IE 7/8 but works in other browsers
jQuery.ajax()
jQuery.ajaxSetup()
.append()
jquery .html() vs .append()
Can't append HTML code into one div by using jQuery
Add Html to Div with effect jQuery
Use append() to add text/html to an element with jQuery

还有很多......

RESULT

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

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

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

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

欢迎任何想法！

提前致谢！ =）

Answer 1

如果有机会，您需要阻止浏览器默认行为：

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

    event.preventDefault();

    ...

});

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

顺便说一句，您的HTML回复无效 - <table>应包含<tbody>元素包装任何<tr>。

Answer 2

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

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

jQuery .load()

PHP / AJAX：似乎无法在DIV中显示ajax结果，但在ALERT（）中工作

2 个答案: