選擇從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()