jquery ajax request to get data formatting

In front-end development, it is often necessary to obtain data from the back-end through AJAX requests. At this time, if the data format returned from the backend is not the desired format, data formatting needs to be performed. This article will introduce how to use jQuery AJAX request to obtain data and format the obtained data.

1. jQuery AJAX request to obtain data

When we need to obtain data from the backend, we can use jQuery's AJAX method. The following is a basic AJAX request:

$.ajax({
  type: "GET",
  url: "/api/data",
  success: function(data) {
    console.log(data);
  },
  error: function(error) {
    console.log(error);
  }
});

Among them, type is the request type, which can be GET, POST, etc.; url is the request address; success is the callback function after the request is successful, and the data parameter is from The data returned by the client; error is the callback function after the request fails.

2. Formatting of the obtained data

The data obtained from the backend may not be in the desired format and needs to be formatted. Several common data formatting methods will be introduced below.

1. JSON formatting

JSON is a lightweight data exchange format that is ideal for passing data between front and back ends. Most backend interfaces will return data in JSON format, so we need to parse and format the returned JSON data.

The data obtained using jQuery's AJAX method has been serialized into JSON format, so we only need to use jQuery's parseJSON method to parse the data:

$.ajax({
  type: "GET",
  url: "/api/data",
  success: function(data) {
    var jsonData = $.parseJSON(data);
    console.log(jsonData);
  },
  error: function(error) {
    console.log(error);
  }
});

2. XML format Transformation

In some scenarios, the backend may return data in XML format, and we need to parse and format the XML data.

You can use JavaScript’s own DOMParser to parse XML data. The following is a simple example:

$.ajax({
  type: "GET",
  url: "/api/data",
  success: function(data) {
    var parser = new DOMParser();
    var xmlDoc = parser.parseFromString(data,"text/xml");
    console.log(xmlDoc);
  },
  error: function(error) {
    console.log(error);
  }
});

3. HTML formatting

Sometimes, we may need to obtain some data in HTML format from the backend, and at this time the data needs to be processed format.

You can render the obtained HTML data into an HTML page, and then use jQuery's find method to filter and format the data. The following is an example:

$.ajax({
  type: "GET",
  url: "/api/data",
  success: function(data) {
    $('body').html(data);
    var htmlData = $('div#data').html();
    console.log(htmlData);
  },
  error: function(error) {
    console.log(error);
  }
});

Among them, assuming that there is a div element with the ID of data in the HTML data returned by the backend, we can use jQuery's find method to find the element and obtain the data in it.

4. Other formatting methods

In addition to the above methods, there are some other formatting methods, such as CSV, TXT and other formats. We can choose the appropriate formatting method to process the acquired data according to the specific situation.

3. Summary

This article introduces how to use jQuery's AJAX method to obtain data and format the obtained data. When the data we obtain from the backend is not in the format we want, we can use the above methods to parse and format the data to make it more suitable for front-end display and processing.

The above is the detailed content of jquery ajax request to get data formatting. For more information, please follow other related articles on the PHP Chinese website!