选择从jQuery ajax响应字符串返回的元素的秘密

>本文通过利用JQuery的选择引擎通过AJAX调用从静态页面提取特定的HTML片段来演示如何在Web应用程序中有效重复使用内容。 当处理服务器端数据准备不可行的旧系统或静态内容时，此技术特别有用。

>

密钥概念：

> jQuery的选择引擎具有灵活性，可使用DOM元素和内存中标记字符串。 当使用AJAX获取静态HTML页面时，返回了整个页面的标记（包括Doctype和root HTML元素）。 为了使其使用jQuery选择，它需要包裹在单个根元素（例如a<div>）中。 然后，jQuery<code>find()方法允许精确提取所需的HTML片段。

方案：

想象一个具有“电影”页面上列表电影的应用程序（图1）。 但是，主页只需要显示这些电影的一个子集，例如，只有动作片（图2）。

实现：

>“电影”页面（列表1）逻辑上

元素中的电影类别，每个电影类别都有唯一的ID。

<section></section>

列表1：电影页面（Movie.html）

> >主页（列表2）使用jQuery通过ajax获取

。 响应包裹在一个

<code class="language-html"><h1>Movies</h1>

<section id="action-container">
  <h2>Action</h2>
  <ul>
    <li>Die Hard</li>
    <li>The Matrix</li>
    <li>Raiders of the Lost Ark</li>
  </ul>
</section>

<section id="drama-container">
  <h2>Drama</h2>
  <ul>
    <li>A Few Good Men</li>
    <li>The Shawshank Redemption</li>
    <li>Legends of the Fall</li>
  </ul>
</section></code>

中，

方法提取“动作”电影部分。movies.html <div> <code>find()列表2：主页（index.html）

> 简单的样式表（列表3）提供了基本的样式。>

<code class="language-javascript">$(function() {
  $.get('movies.html', function(response) {
    var source = $('<div>' + response + '</div>');
    $('#movies').html(source.find('#action-container').html());
  });
});</code>

>列表3：样式表（styles.css）

>

结论：

<code class="language-css">body, html {
  padding: 4px;
  margin: 0px;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
}</code>

这种方法虽然利基市场在没有服务器端修改的情况下选择性地呈现内容时就证明了有价值的。 钥匙是将AJAX响应包裹在单个根元素中，并使用jQuery's

进行目标内容提取。 >常见问题：

find()

（保留了原始的常见问题部分，但要清晰和简洁。）

jQuery ajax响应字符串：

这些是服务器返回的数据（通常是HTML），后者是在AJAX请求之后返回的。 jQuery's处理响应的请求和处理。

从ajax响应中选择元素：

使用使用$(responseString)从响应中创建一个jQuery对象，然后使用.find()之类的方法选择该对象中的元素。>

完整的HTML页面响应：对发布请求的完整HTML页面响应通常表示服务器端错误。检查状态代码（成功为200）和响应文本以进行调试。>

用jQuery检索HTML部分：

>

方法有效地加载了HTML文档的特定部分。 在URL中的空间（例如，）中使用选择器。.load()> $(‘#result’).load(‘ajax/test.html #container’)

>将jQuery对象转换为字符串：

方法将代表HTML元素的jQuery对象转换为包含其HTML内容的字符串。 .html()