jQueryでデータをクエリしてページに表示する方法

フロントエンド開発プロセスでは、データを取得して表示する必要があるシナリオに直面することがよくあります。通常、バックエンド インターフェイスを通じてデータを返し、そのデータをフロントエンド フレームワークまたはネイティブ JS コードを通じてページにレンダリングする必要があります。

その中でも、jQuery はフロントエンド開発でよく使われるフレームワークの 1 つで、便利な操作メソッドが数多くカプセル化されており、フロントエンド開発作業を大幅に簡素化できます。この記事では、jQuery を使用してデータをクエリし、ページに表示する方法を紹介します。

1. jQuery クエリ データ

1. Ajax リクエスト

フロントエンドでは、Ajax を使用してバックグラウンドから非同期にデータを取得します。 jQuery を介して、Ajax リクエストを簡単に実行できます。例:

$.ajax({
    url: "/api/data",
    method: "GET",
    data: {
        id: 123
    },
    success: function(res) {
        console.log(res);
    },
    error: function(err) {
        console.error(err);
    }
})

上記のコードでは、GET リクエストを実行して、/api/data アドレスから ID 123 のデータを取得します。データの取得に成功したら、コンソールにデータを出力します。

2. JSONP request

クロスドメインの状況では、Ajax を直接使用してデータをリクエストすることはできません。現時点では、JSONP (JSON with Padding) テクノロジーを使用してデータを取得できます。 JS ファイルは script タグを通じて導入され、JS ファイルの内容は関数の呼び出しであり、データは関数のパラメーターとして返されます。例:

$.ajax({
    url: "http://example.com/data?callback=parseData",
    dataType: "jsonp",
    success: function(res) {
        console.log(res);
    },
    error: function(err) {
        console.error(err);
    }
})

function parseData(data) {
    console.log(data);
}

上記のコードは、URL が「http://example.com/data」アドレスを指し、コールバック パラメーターを通じてコールバック関数を指定します。同時に、dataType パラメーターが「jsonp」として指定されているため、jQuery はリクエストを JSONP に変換します。最後に、結果を返すときに、parseData 関数を呼び出し、データをパラメーターとして渡します。

2. jQuery によるデータの表示

データを取得した後、それをページにレンダリングする必要があります。ここでは、2 つの一般的なレンダリング方法を紹介します。

1. innerHTML

innerHTML は、特定の要素の HTML コンテンツを取得または設定できるネイティブ JS によって提供される属性です。 jQuery を使用してデータをレンダリングする必要がある要素を取得し、innerHTML を使用してデータを要素にレンダリングできます。例:

ページに <div> 要素があるとします。jQuery を使用して要素を取得し、データを要素にレンダリングします。 <pre class="brush:php;toolbar:false">&lt;div&gt;&lt;/div&gt;</pre> <pre class="brush:php;toolbar:false">var data = &quot;&lt;p&gt;这是一段数据&lt;/p&gt;&quot;; $(&quot;#content&quot;).html(data);</pre> <ol start="2"><li>テンプレート エンジン</li></ol> <p>テンプレート エンジンは、データをテンプレートと組み合わせてページ上にデータをレンダリングするテクノロジーです。一般的なテンプレート エンジンには、Mustache、Handlebars などが含まれます。ネイティブ JS に加えて、jQuery によって提供される <code>$.tmpl メソッドを使用してテンプレートのレンダリングを実装することもできます。例:

ページに <ul></ul> 要素があるとします。背景から配列を取得する必要があります。配列には複数のオブジェクトが含まれており、各オブジェクトには ID が含まれていますそして属性に名前を付けます。次のコードを使用して、データをページにレンダリングできます。

<script> <li> <span class="id">${id} <span class="name">${name} </script>

var data = [
    { id: 1, name: "数据1" },
    { id: 2, name: "数据2" },
    { id: 3, name: "数据3" }
];

$("#list").html($("#itemTmpl").tmpl(data));

上記のコードでは、まず <script></script> タグを定義し、type 属性を通じてそれを text/x-jquery-tmpl タイプ テンプレートとして指定します。 ${} は、データ属性を参照するためにテンプレートで使用されます。ここでの id と名前は、データ オブジェクトの id 属性と name 属性に対応します。最後に、$("#itemTmpl").tmpl(data) を通じてデータをテンプレートにレンダリングし、結果を $("#list").html() を通じて渡します。ページにレンダリングされました。

概要

この記事では、jQuery を使用してデータをクエリし、ページに表示する方法を紹介します。このうち、バックグラウンド データは Ajax と JSONP を通じて取得でき、innerHTML エンジンとテンプレート エンジンによってページ上にデータをレンダリングできます。これらの技術により、フロントエンド開発をより便利に行い、作業効率を向上させることができます。