1

所以基本上我正在尝试构建我自己版本的GitHub 树滑块。相关的 Javascript/JQuery 代码是：

// handles clicking a link to move through the tree
$('#slider a').click(function() {
    history.pushState({ path: this.path }, '', this.href) // change the URL in the browser using HTML5 history module
    $.get(this.href, function(data) {
        $('#slider').slideTo(data) // handle the page transition, preventing full page reloads
    })
    return false
})

// binds hitting the back button in the browser to prevent full page reloads
$(window).bind('popstate', function() {
    $('#slider').slideTo(location.pathname)
}

好的，希望这是可以理解的。现在这是我对这里发生的事情的解释，然后是我的问题/问题：

在树中导航时 GET 请求的回调函数是 slideTo 方法，并且 HTML 字符串作为参数传入该函数。我假设 slideTo 是在脚本其他地方或自定义库中定义的函数，因为我在 JQuery 文档中找不到它。因此，出于我的目的，我正在尝试构建我自己的这个函数版本。但是传递给这个函数的参数“data”只是从 GET 请求返回的 HTML 字符串。但是，这不仅仅是我可以附加到文档中的 div 的 HTML 片段，因为如果我执行相同的 GET 请求（例如，通过在 Web 浏览器中输入 url），我希望看到整个网页并且不只是一块。

因此，在我定义的这个回调函数中，我需要将“数据”参数解析为 DOM，以便提取相关节点，然后执行动画转换。但是，这对我来说没有意义。这通常看起来是个坏主意。客户端必须解析整个 HTML 字符串才能访问 DOM 的一部分是没有意义的。GitHub 声称这种方法比重新加载整页更快。但是，如果我的解释是正确的，客户端仍然必须解析完整的 HTML 字符串，无论是通过单击（并运行回调函数）浏览树还是通过在浏览器中键入新 URL 等进行全页面加载。所以我要么将返回的 HTML 字符串解析为 DOM，要么只获取 HTML 文档的一部分。

有没有办法简单地将获取的文档加载到 Javascript 或 JQuery DOM 对象中，以便我可以轻松地操作它？甚至更好的是，有没有办法只获取具有任意 id 的元素而不做一些疯狂的服务器端事情（我已经尝试过，但最终代码太意大利面条并且难以维护）？

我也已经尝试过简单地将 data 参数解析为 JQuery 对象，但这涉及一个迂回的解决方案，它似乎只工作了一半，使用 javascript 方法去除不需要的东西的 HTML，比如 doctype 声明和 head 标签：

var d = document.createElement('html');
d.innerHTML = data;
body = div.getElementsByTagName("body")[0].innerHTML;

var newDOM = $(body);
// finally I have a JQuery DOM context that I can use,
// but for some reason it doesn't always seem to work quite right

你会如何处理这个问题？当我自己编写这段代码并尝试让它自己工作时，我觉得无论我做什么，我都在做一些非常低效和骇人听闻的事情。

有没有办法通过 GET 请求轻松返回 JQuery DOM 对象？或者更好的是，只返回通过 GET 请求获取的文档的一部分？

4

2 回答 2

2

把它包起来；jQuery 会解析它。

$(data) // in your callback
于 2013-02-20T21:29:12.383 回答
1

想象一下，您想解析<p>普通 HTML 网页中的标签。你可能会使用类似的东西：

var p = $('<p>');

正确的？因此，您必须使用相同的方法来解析整个 HTML 文档，然后浏览 DOM 树以获取所需的特定元素。因此，您只需要说：

$.get(this.href, function(data) {
    var html = $(data);

    // (...) Navigating through the DOM tree

    $('#slider').slideTo( HTMLportion );
});

注意，它也适用于 XML 文档，所以如果你需要通过 AJAX 从服务器下载一个 XML 文档，解析内部信息并显示在客户端，方法完全一样，好吗？

我希望它可以帮助你:)

PS：永远不要忘记在每个 JavaScript 语句的末尾加上分号。可能，如果您不放置它们，引擎会工作，但最好是安全并始终编写它们！

于 2013-02-20T21:47:06.947 回答