jquery ajax請求取得資料格式化-前端問答-PHP中文網

jquery ajax請求取得資料格式化

PHPz

發布： 2023-05-18 14:34:10

原創

791 人瀏覽過

在前端開發中，經常需要透過 AJAX 請求從後端取得資料。此時，如果從後端傳回的資料格式不是想要的格式，則需要進行資料格式化。本文將介紹如何使用 jQuery AJAX 請求取得數據，並對所取得的數據進行格式化。

一、jQuery AJAX 請求取得資料

當我們需要從後端取得資料時，可以使用 jQuery 的 AJAX 方法。下面是一個基本的AJAX 請求：

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

登入後複製

其中，type 是請求類型，可以是GET、POST 等；url 是請求位址；success 是請求成功後的回呼函數，其中的data 參數就是從後端傳回的資料；error 是請求失敗後的回呼函數。

二、取得的資料格式化

從後端取得的資料可能不是想要的格式，需要進行格式化。以下將介紹幾種常見的資料格式化方法。

JSON 格式化

JSON 是一種輕量級的資料交換格式，非常適合在前後端之間傳遞資料。大多數後端介面都會傳回 JSON 格式的數據，因此，我們需要對傳回的 JSON 資料進行解析和格式化。

使用jQuery 的AJAX 方法取得的資料已被序列化為JSON 格式，因此我們只需要使用jQuery 的parseJSON 方法對資料進行解析即可：

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

登入後複製

XML 格式化

在某些場景下，後端可能會傳回XML 格式的數據，我們需要對XML 資料進行解析和格式化。

可以使用 JavaScript 自帶的 DOMParser 來解析 XML 資料。以下是一個簡單的範例：

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

登入後複製

HTML 格式化

#有時，我們可能需要從後端取得一些HTML 格式的數據，此時需要對資料進行格式化。

可以將所取得的 HTML 資料渲染到 HTML 頁面中，然後使用 jQuery 的 find 方法對資料進行篩選和格式化。以下是一個例子：

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

登入後複製

其中，假設後端傳回的 HTML 資料中有一個 ID 為 data 的 div 元素，我們可以使用 jQuery 的 find 方法來找到該元素，並取得其中的資料。