So fragen Sie Daten mit jQuery ab und zeigen sie auf der Seite an

Im Prozess der Front-End-Entwicklung sehen wir uns häufig mit Szenarien konfrontiert, in denen wir Daten abrufen und anzeigen müssen. Normalerweise müssen wir Daten über die Backend-Schnittstelle zurückgeben und sie dann über das Front-End-Framework oder nativen JS-Code auf der Seite rendern.

Unter diesen ist jQuery eines der am häufigsten verwendeten Frameworks in der Front-End-Entwicklung. Es kapselt viele praktische Betriebsmethoden und kann die Front-End-Entwicklungsarbeit erheblich vereinfachen. In diesem Artikel wird erläutert, wie Sie mit jQuery Daten abfragen und auf der Seite anzeigen.

1. jQuery-Abfragedaten

1. Ajax-Anfrage

Im Frontend kann Ajax asynchron verwendet werden aus dem Hintergrund Daten abrufen. Über jQuery können wir problemlos Ajax-Anfragen ausführen. Zum Beispiel:

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

Im obigen Code führen wir eine GET-Anfrage durch, um die Daten mit der ID 123 von der Adresse /api/data abzurufen. Nachdem wir die Daten erfolgreich abgerufen haben, drucken wir die Daten auf der Konsole aus. /api/data地址获取id为123的数据。在成功获取数据后，我们将数据打印在控制台上。

2. JSONP请求

在跨域情况下，我们无法直接使用Ajax请求数据。此时，可以使用JSONP（JSON with Padding）技术来获取数据。通过script标签引入一个JS文件，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'地址，并通过callback参数指定了回调函数。同时，dataType参数指定为'jsonp'，使得jQuery会将请求转为JSONP方式。最后，在返回结果时，我们调用了parseData函数，将数据作为参数传入。

二、jQuery显示数据

获取到数据之后，我们需要将其渲染至页面上。这里，我们介绍两种常见的渲染方式。

1. innerHTML

innerHTML是原生JS提供的一个属性，能够获取或设置某个元素的HTML内容。我们可以通过jQuery获取到需要渲染数据的元素，然后使用innerHTML将数据渲染至该元素内。例如：

假设页面上有一个<div>元素，我们使用jQuery获取该元素，并将数据渲染至该元素上。

<div id="content"></div>

var data = "<p>这是一段数据</p>";

$("#content").html(data);

2. 模板引擎

模板引擎是一种将数据与模板合并的技术，能够将数据渲染至页面上。常见的模板引擎包括Mustache、Handlebars等。除了原生JS外，我们也可以使用jQuery提供的$.tmpl方法来实现模板渲染。例如：

假设页面上有一个<ul>元素，我们需要从后台获取一个数组，数组中包含若干个对象，每个对象包含id和name属性。我们可以使用以下代码将数据渲染至页面上。

<ul id="list">
</ul>

<script id="itemTmpl" type="text/x-jquery-tmpl">
    <li>
        <span class="id">${id}</span>
        <span class="name">${name}</span>
    </li>
</script>

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

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

在上面的代码中，我们先定义了一个<script>标签，通过type属性指定其为text/x-jquery-tmpl类型的模板。模板中使用${}来引用数据属性，这里的id和name对应了数据对象中的id和name属性。最后，我们通过$("#itemTmpl").tmpl(data)将数据渲染至模板上，并将结果通过$("#list").html()

JSONP-Anfrage

In domänenübergreifenden Situationen können wir Ajax nicht direkt zum Anfordern von Daten verwenden. Derzeit können Sie die JSONP-Technologie (JSON with Padding) verwenden, um Daten abzurufen. Eine JS-Datei wird über das Skript-Tag eingeführt. Der Inhalt der JS-Datei ist ein Aufruf einer Funktion, und die Daten werden als Parameter der Funktion zurückgegeben. Zum Beispiel:

rrreee#🎜🎜#Der obige Code verweist die URL auf die Adresse „http://example.com/data“ und gibt die Rückruffunktion über den Rückrufparameter an. Gleichzeitig wird der dataType-Parameter als „jsonp“ angegeben, sodass jQuery die Anfrage in JSONP konvertiert. Wenn wir schließlich die Ergebnisse zurückgeben, rufen wir die Funktion parseData auf und übergeben die Daten als Parameter. #🎜🎜##🎜🎜# 2. jQuery zeigt Daten an #🎜🎜##🎜🎜#Nachdem wir die Daten erhalten haben, müssen wir sie auf der Seite rendern. Hier stellen wir zwei gängige Rendering-Methoden vor. #🎜🎜##🎜🎜##🎜🎜#innerHTML#🎜🎜##🎜🎜##🎜🎜#innerHTML ist ein von nativem JS bereitgestelltes Attribut, das den HTML-Inhalt eines bestimmten Elements abrufen oder festlegen kann. Wir können jQuery verwenden, um das Element abzurufen, das Daten rendern muss, und dann innerHTML verwenden, um die Daten in das Element zu rendern. Beispiel: #🎜🎜##🎜🎜# Angenommen, es gibt ein <div>-Element auf der Seite. Wir verwenden jQuery, um das Element abzurufen und die Daten in das Element zu rendern. #🎜🎜#rrreeerrree
#🎜🎜#Vorlagen-Engine#🎜🎜##🎜🎜##🎜🎜#Die Vorlagen-Engine ist eine Technologie, die Daten mit Vorlagen zusammenführt, um Daten auf der übergeordneten Seite darzustellen. Zu den gängigen Template-Engines gehören Moustache, Handlers usw. Zusätzlich zu nativem JS können wir auch die von jQuery bereitgestellte Methode $.tmpl verwenden, um das Rendern von Vorlagen zu implementieren. Beispiel: #🎜🎜##🎜🎜# Angenommen, es gibt ein <ul>-Element auf der Seite, wir müssen ein Array aus dem Hintergrund abrufen, das Array enthält mehrere Objekte, jedes Objekt enthält ID- und Namenseigenschaft. Wir können den folgenden Code verwenden, um die Daten auf der Seite darzustellen. #🎜🎜#rrreeerrreee#🎜🎜#Im obigen Code definieren wir zunächst ein <script>-Tag und geben es über das Typattribut als Typvorlage „text/x-jquery-tmpl“ an. Verwenden Sie ${} in der Vorlage, um auf Datenattribute zu verweisen. Die ID und der Name entsprechen hier den ID- und Namensattributen im Datenobjekt. Schließlich rendern wir die Daten über $("#itemTmpl").tmpl(data) in die Vorlage und übergeben das Ergebnis über $("#list").html() Code>Auf der Seite rendern. #🎜🎜##🎜🎜#Zusammenfassung#🎜🎜##🎜🎜#In diesem Artikel wird erläutert, wie Sie mit jQuery Daten abfragen und auf der Seite anzeigen. Unter anderem können Hintergrunddaten über Ajax und JSONP abgerufen werden, und innerHTML- und Template-Engines können Daten auf der Seite rendern. Durch diese Technologien können wir die Front-End-Entwicklung bequemer durchführen und die Arbeitseffizienz verbessern. #🎜🎜#

Das obige ist der detaillierte Inhalt vonSo fragen Sie Daten mit jQuery ab und zeigen sie auf der Seite an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!