How to query data with jQuery and display it on the page

During the front-end development process, we often face scenarios where we need to obtain and display data. Usually, we need to return data through the backend interface, and then render the data to the page through the front-end framework or native JS code.

Among them, jQuery is one of the commonly used frameworks in front-end development. It encapsulates many convenient operation methods and can greatly simplify front-end development work. This article will introduce how to use jQuery to query data and display it on the page.

1. jQuery query data

1. Ajax request

In the front-end, use Ajax to obtain data asynchronously from the background. Through jQuery, we can easily perform Ajax requests. For example:

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

In the above code, we execute a GET request to obtain the data with id 123 from the /api/data address. After successfully getting the data, we print the data on the console.

2. JSONP request

In cross-domain situations, we cannot directly use Ajax to request data. At this time, you can use JSONP (JSON with Padding) technology to obtain data. A JS file is introduced through the script tag. The content of the JS file is a call to a function, and the data is returned as the parameter of the function. For example:

$.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);
}

The above code points the url to the 'http://example.com/data' address and specifies the callback function through the callback parameter. At the same time, the dataType parameter is specified as 'jsonp', so that jQuery will convert the request to JSONP. Finally, when returning the result, we call the parseData function, passing the data as a parameter.

2. jQuery displays data

After obtaining the data, we need to render it to the page. Here, we introduce two common rendering methods.

1. innerHTML

innerHTML is an attribute provided by native JS that can get or set the HTML content of a certain element. We can use jQuery to get the element that needs to render data, and then use innerHTML to render the data into the element. For example:

Suppose there is a <div> element on the page. We use jQuery to get the element and render the data to the element.

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

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

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

2. Template engine

The template engine is a technology that combines data with templates to render the data onto the page. Common template engines include Mustache, Handlebars, etc. In addition to native JS, we can also use the $.tmpl method provided by jQuery to implement template rendering. For example:

Suppose there is an <ul> element on the page. We need to get an array from the background. The array contains several objects, and each object contains the id and name attributes. We can use the following code to render the data onto the page.

<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));

In the above code, we first define a <script> tag and specify it as a text/x-jquery-tmpl type template through the type attribute. ${} is used in the template to reference data attributes. The id and name here correspond to the id and name attributes in the data object. Finally, we render the data to the template through $("#itemTmpl").tmpl(data) and pass the result through $("#list").html() Rendered to the page.

Summary

This article introduces how to use jQuery to query data and display it on the page. Among them, background data can be obtained through Ajax and JSONP, and innerHTML and template engines can render data onto the page. Through these technologies, we can conduct front-end development more conveniently and improve work efficiency.

The above is the detailed content of How to query data with jQuery and display it on the page. For more information, please follow other related articles on the PHP Chinese website!