jQuery 地址 + $.ajax 不显示内容答案

【问题标题】：jQuery Address + $.ajax not displaying contentjQuery 地址 + $.ajax 不显示内容
【发布时间】：2011-12-07 20:31:29
【问题描述】：

我正在尝试在我的项目中实现 jQuery 地址插件。

我正在关注 Crawling 实现的 Asual 示例（即 hashbangs）。

我的javascript：

<script type="text/javascript">
    $.address.init(function(event) {
        // Initializes plugin support for links
        $('a:not([href^=http])').address();

        var handler = function(data) {
            $('.content').html($('#content', data).html()).parent().show();
            $.address.title(/>([^<]*)<\/title/.exec(data)[1]);
        };

        // Loads the page content and inserts it into the content area
        $.ajax({
            url: '/index.php?ACT=87&action=shows&_escaped_fragment_=' + encodeURIComponent(event.value),
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                handler(XMLHttpRequest.responseText);
            },
            success: function(data, textStatus, XMLHttpRequest) {
                handler(data);
            },
            contentType: 'text/html'
        });
    });
</script>

$.ajax() 调用正在请求我创建的虚拟 html 页面：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
    <head><title>testing</title>
    </head>
    <body>
    <div id="content">test</div>
    </body>
</html>

我正在发送此 HTML 页面，内容类型为 text/html。

请求执行成功，处理程序匿名函数正在获取整个页面数据，但$('.content).html() 命令不起作用。当我执行alert($('#content', data).html()); 时，我得到null，但没有任何反应。没有错误，但也没有内容。

此时我已经不知所措了……有什么建议吗？

编辑：澄清一下，问题不在于请求本身，也不在于 URL，也不是浏览器安全问题。我根本无法从页面上的请求中选择和显示数据。

更糟糕的是，如果我只是将 $.ajax() 网址替换为我知道不存在的页面（即 404 页面）的网址，它会很好地解析并显示我的 404 消息。

【问题讨论】：

标签： jquery ajax deep-linking jquery-address

【解决方案1】：

我认为可能是您使用了选择器上下文。

$('#content', data)

这不起作用，因为data 不是 jQuery 对象，它只是 HTML。

我能想到的三个选项：

//not sure if you can just wrap data within the selector so putting it in a variable
var myhtml = $(data);
$('#content', myhtml)

2) 让您的虚拟 html 页面仅是那个#content div。如果您只是通过 ajax 获取，则不需要完整的页面。

3) 尝试重构您的代码以使用jQuery.load 函数，该函数允许您指定一个选择器，以便从加载的文件中获取特定的内容 $('#result').load('ajax/test.html #container');

【讨论】：

【解决方案2】：

你的 ajax 没问题。

我无法获得与 JSFiddle 一起使用的任何其他答案，但这是可行的。我怀疑这是最好的解决方法：

var handler = function(data) {
    // Create jQuery object with received data
    var $content = $('<div></div>').html(data); 

    // Get the html that you wanted   
    var theHtml = $('#content', $content).html();

    // Place content into page proper
    $('.content').html(theHtml).parent().show();

    // Rest of function...
}

如果你是那些受虐狂类型中的一种，这一切都在一条线上：

$('.content').html($('#content', $('<div></div>').html(data)).html()).parent().show();

【讨论】：

【解决方案3】：

搞定了。我将 $.ajax() 调用替换为以下内容：

$('.content').load('/index.php?ACT=87&action=shows&_escaped_fragment_=' + encodeURIComponent(event.value) +' #content');

仍然很想知道是否有人能告诉我我在使用 $.ajax() 时做错了什么。

【讨论】：