jQuery로 데이터를 쿼리하고 페이지에 표시하는 방법

프런트엔드 개발 과정에서 우리는 데이터를 얻고 표시해야 하는 시나리오에 자주 직면합니다. 일반적으로 백엔드 인터페이스를 통해 데이터를 반환한 다음 프런트엔드 프레임워크 또는 기본 JS 코드를 통해 데이터를 페이지에 렌더링해야 합니다.

그 중 jQuery는 프런트엔드 개발에서 일반적으로 사용되는 프레임워크 중 하나입니다. 이는 다양한 편리한 작업 방법을 캡슐화하고 프런트엔드 개발 작업을 크게 단순화할 수 있습니다. 이 기사에서는 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);
    }
})

위 코드에서는 /api/data 주소에서 ID가 123인 데이터를 가져오기 위해 GET 요청을 수행합니다. 데이터를 성공적으로 가져온 후 콘솔에 데이터를 인쇄합니다. /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获取该元素，并将数据渲染至该元素上。<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和name属性。我们可以使用以下代码将数据渲染至页面上。

<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和name对应了数据对象中的id和name属性。最后，我们通过$("#itemTmpl").tmpl(data)将数据渲染至模板上，并将结果通过$("#list").html()

JSONP 요청

크로스 도메인 상황에서는 Ajax를 직접 사용하여 데이터를 요청할 수 없습니다. 이때 JSONP(JSON with Padding) 기술을 사용하여 데이터를 얻을 수 있습니다. JS 파일은 script 태그를 통해 소개되며, JS 파일의 내용은 함수 호출이며, 데이터는 함수의 매개변수로 반환됩니다. 예:

rrreee🎜위 코드는 URL을 'http://example.com/data' 주소로 가리키고 콜백 매개변수를 통해 콜백 함수를 지정합니다. 동시에 dataType 매개변수는 'jsonp'로 지정되므로 jQuery는 요청을 JSONP로 변환합니다. 마지막으로 결과를 반환할 때 parsData 함수를 호출하여 데이터를 매개변수로 전달합니다. 🎜🎜2. jQuery는 데이터를 표시합니다🎜🎜데이터를 얻은 후 페이지에 렌더링해야 합니다. 여기에서는 두 가지 일반적인 렌더링 방법을 소개합니다. 🎜🎜🎜innerHTML🎜🎜🎜innerHTML은 네이티브 JS에서 제공하는 속성으로, 특정 요소의 HTML 콘텐츠를 가져오거나 설정할 수 있습니다. jQuery를 사용하여 데이터를 렌더링해야 하는 요소를 가져온 다음 innerHTML을 사용하여 데이터를 요소에 렌더링할 수 있습니다. 예: 🎜🎜페이지에 <div> 요소가 있다고 가정합니다. jQuery를 사용하여 요소를 가져오고 요소에 데이터를 렌더링합니다. 🎜rrreeerrree<ol start="2">🎜템플릿 엔진🎜🎜🎜템플릿 엔진은 데이터를 템플릿과 결합하여 데이터를 페이지에 렌더링하는 기술입니다. 일반적인 템플릿 엔진에는 Mustache, Handlebars 등이 포함됩니다. 네이티브 JS 외에도 jQuery에서 제공하는 <code>$.tmpl 메서드를 사용하여 템플릿 렌더링을 구현할 수도 있습니다. 예: 🎜🎜페이지에 <ul></ul> 요소가 있다고 가정합니다. 배경에서 배열을 가져와야 합니다. 배열에는 여러 개체가 포함되어 있으며 각 개체에는 id 및 name 속성이 포함되어 있습니다. 다음 코드를 사용하여 데이터를 페이지에 렌더링할 수 있습니다. 🎜rrreeerrreee🎜위 코드에서는 먼저 <script></script> 태그를 정의하고 type 속성을 통해 text/x-jquery-tmpl 유형 템플릿으로 지정합니다. 데이터 속성을 참조하려면 템플릿에서 ${}를 사용하세요. 여기서 id와 name은 데이터 객체의 id와 name 속성에 해당합니다. 마지막으로 $("#itemTmpl").tmpl(data)를 통해 템플릿에 데이터를 렌더링하고 $("#list").html()을 통해 결과를 전달합니다. 코드>페이지로 렌더링합니다. 🎜🎜요약🎜🎜이 글에서는 jQuery를 사용하여 데이터를 쿼리하고 페이지에 표시하는 방법을 소개합니다. 그 중 배경 데이터는 Ajax와 JSONP를 통해 얻을 수 있고, innerHTML과 템플릿 엔진은 데이터를 페이지에 렌더링할 수 있다. 이러한 기술을 통해 우리는 프론트엔드 개발을 보다 편리하게 수행하고 업무 효율성을 향상시킬 수 있습니다. 🎜