jquery ajax meminta untuk mendapatkan pemformatan data

Dalam pembangunan bahagian hadapan, selalunya diperlukan untuk mendapatkan data dari bahagian belakang melalui permintaan AJAX. Pada masa ini, jika format data yang dikembalikan daripada bahagian belakang bukanlah format yang diingini, pemformatan data perlu dilakukan. Artikel ini akan memperkenalkan cara menggunakan permintaan jQuery AJAX untuk mendapatkan data dan memformat data yang diperoleh.

1. jQuery AJAX meminta untuk mendapatkan data

Apabila kita perlu mendapatkan data dari bahagian belakang, kita boleh menggunakan kaedah AJAX jQuery. Berikut adalah permintaan asas AJAX:

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

Antaranya, taip adalah jenis permintaan, yang boleh GET, POST, dll.; , dan parameter data ialah ralat Data yang dikembalikan oleh klien ialah fungsi panggil balik selepas permintaan gagal.

2. Memformat data yang diperoleh

Data yang diperoleh dari bahagian belakang mungkin tidak dalam format yang diingini dan perlu diformatkan. Beberapa kaedah pemformatan data biasa akan diperkenalkan di bawah.

1. Pemformatan JSON

JSON ialah format pertukaran data ringan yang sesuai untuk menghantar data antara hujung depan dan belakang. Kebanyakan antara muka bahagian belakang akan mengembalikan data dalam format JSON, jadi kami perlu menghuraikan dan memformat data JSON yang dikembalikan.

Data yang diperoleh menggunakan kaedah AJAX jQuery telah disirikan ke dalam format JSON, jadi kami hanya perlu menggunakan kaedah parseJSON jQuery untuk menghuraikan data:

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

2. Format XML

Dalam sesetengah senario, bahagian belakang mungkin mengembalikan data dalam format XML, dan kami perlu menghuraikan dan memformat data XML.

Anda boleh menggunakan DOMParser JavaScript sendiri untuk menghuraikan data XML. Berikut ialah contoh mudah:

$.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. Pemformatan HTML

Kadangkala, kita mungkin perlu mendapatkan beberapa data berformat HTML dari bahagian belakang, yang mana data itu perlu diproses format.

Anda boleh menjadikan data HTML yang diperolehi ke dalam halaman HTML, dan kemudian menggunakan kaedah cari jQuery untuk menapis dan memformat data. Berikut ialah contoh:

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

Antaranya, dengan mengandaikan bahawa terdapat elemen div dengan ID data dalam data HTML yang dikembalikan oleh bahagian belakang, kita boleh menggunakan kaedah find jQuery untuk mencari elemen dan mendapatkan data di dalamnya.

4. Kaedah pemformatan lain

Selain kaedah di atas, terdapat beberapa kaedah pemformatan lain, seperti CSV, TXT dan format lain. Kita boleh memilih kaedah pemformatan yang sesuai untuk memproses data yang diperoleh mengikut situasi tertentu.

3. Ringkasan

Artikel ini memperkenalkan cara menggunakan kaedah AJAX jQuery untuk mendapatkan data dan memformat data yang diperolehi. Apabila data yang kami peroleh daripada bahagian belakang tidak dalam format yang kami mahu, kami boleh menggunakan kaedah di atas untuk menghuraikan dan memformat data untuk menjadikannya lebih sesuai untuk paparan dan pemprosesan bahagian hadapan.

Atas ialah kandungan terperinci jquery ajax meminta untuk mendapatkan pemformatan data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!