pengubahsuaian ajax jquery

jQuery ialah perpustakaan JavaScript popular yang menyediakan pembangun dengan satu siri kaedah ringkas dan mudah digunakan untuk melaksanakan fungsi dengan mudah seperti operasi DOM, pengendalian acara, kesan animasi, dll. Antaranya, jQuery AJAX ialah salah satu ciri terpentingnya Artikel ini akan memperkenalkan secara terperinci cara menggunakan jQuery AJAX dan cara melaksanakan operasi pengubahsuaian dalam AJAX.

1. Cara menggunakan jQuery AJAX

jQuery AJAX boleh menggunakan kaedah $.ajax() untuk memulakan permintaan tak segerak. Sintaks asas adalah seperti berikut:

$.ajax({
  url: 请求 URL,
  type: 请求方式，
  data: 发送的数据，
  dataType: 接收数据的类型，
  success: 请求成功时执行的函数，
  error: 请求失败时执行的函数
});

Perihalan parameter:

• url: menunjukkan URL yang diminta
• jenis: menunjukkan kaedah permintaan, yang boleh menjadi " GET", "POST", dsb.;
• data: mewakili data yang dihantar, yang boleh menjadi rentetan, objek atau tatasusunan;
• dataType: mewakili jenis data yang diterima, yang boleh menjadi "teks", "html" , "JSON", dsb.;
• kejayaan: menunjukkan fungsi yang dilaksanakan selepas permintaan berjaya, dan parameter dalam fungsi adalah data yang dikembalikan; >ralat: menunjukkan fungsi yang dilaksanakan apabila permintaan gagal, dalam fungsi Parameter adalah mesej ralat.
• Sebagai contoh, kod berikut memulakan permintaan GET:

$.ajax({
  url: "example.com/api/data",
  type: "GET",
  dataType: "JSON",
  success: function(data) {
    console.log(data);
  },
  error: function(xhr, status, errorThrown) {
    console.log("Error: " + errorThrown);
  }
});

2 jQuery AJAX melaksanakan operasi pengubahsuaian

Anda perlu memberi perhatian kepada perkara berikut apabila. melaksanakan operasi pengubahsuaian dalam AJAX :

Kaedah permintaan hendaklah "PUT" atau "POST"

1. Format data yang dihantar hendaklah dalam format JSON, iaitu JSON. kaedah stringify() perlu digunakan untuk menukar data kepada String; .
2. Di bawah, kami akan menunjukkan langkah demi langkah cara melaksanakan operasi pengubahsuaian dalam AJAX.
3. Langkah 1: Buat halaman HTML

Mula-mula, kita perlu mencipta halaman HTML untuk memaparkan data pra-ubah suai dan pasca-ubah suai. Dalam halaman, kita boleh membentangkan data melalui jadual, seperti yang ditunjukkan di bawah:

<p>修改前数据：</p>
<table id="before">
  <thead>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>20</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>22</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

<p>修改后数据：</p>
<table id="after">
  <thead>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </thead>
  <tbody></tbody>
</table>

Langkah 2: Tulis permintaan jQuery AJAX

Seterusnya, kita perlu menggunakan jQuery AJAX untuk memulakan permintaan tak segerak. Semasa proses ini, kita perlu mengkonfigurasi beberapa permintaan dan menulis fungsi panggil balik yang sepadan.

Dalam contoh ini, kami menggunakan kaedah permintaan "PUT" untuk mengubah suai data dan data dalam format JSON. Apabila permintaan berjaya, kami perlu mendapatkan data yang diubah suai dikembalikan oleh pelayan dan mengemas kini halaman HTML. Apabila permintaan gagal, kami perlu memberikan mesej ralat yang sepadan.

Kod khusus adalah seperti berikut:

// 创建数据对象
var data = {
  name: "张三",
  age: 25,
  sex: "男"
};

// 发起请求
$.ajax({
  url: "example.com/api/user",
  type: "PUT",
  data: JSON.stringify(data),
  dataType: "JSON",
  success: function(res) {
    // 更新 HTML 页面
    var html = '';
    $.each(res, function(key, value) {
      html += '<tr>';
      html += '<td>' + value.name + '</td>';
      html += '<td>' + value.age + '</td>';
      html += '<td>' + value.sex + '</td>';
      html += '</tr>';
    });
    $('#after tbody').html(html);
  },
  error: function(xhr, status, errorThrown) {
    // 提示错误信息
    alert("修改失败：" + errorThrown);
  }
});

Langkah 3: Mulakan pelayan dan uji

Akhir sekali, semasa proses permintaan AJAX, kita perlu memulakan pelayan simulasi untuk simulasikan permintaan AJAX sebenar. Untuk pelaksanaan khusus, sila rujuk Node.js, Express, MongoDB dan teknologi lain. Di sini kita mengambil Node.js sebagai contoh untuk menggambarkan.

Mula-mula, kita perlu memasang dan memulakan npm:

npm init

Kemudian, pasang Express dan body-parser:

npm install express body-parser --save

Akhir sekali, tulis kod pelayan:

var express = require('express');
var bodyParser = require('body-parser');

var app = express();

app.use(bodyParser.json({ limit: '10mb' }));
app.use(bodyParser.urlencoded({ extended: true, limit: '10mb' }));

// 跨域处理
app.use(function(req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With');
  res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
  if (req.method == 'OPTIONS') {
    res.send(200);
  } else {
    next();
  }
});

// 处理 PUT 请求
app.put('/api/user', function(req, res) {
  var data = req.body;
  console.log('修改前数据：', data);
  data.age = 26;
  console.log('修改后数据：', data);
  res.json([data]);
});

// 启动服务器
var server = app.listen(3000, function () {
  console.log('Server running at http://localhost:3000');
});

Selepas pengubahsuaian selesai, mulakan pelayan dan akses halaman HTML dalam penyemak imbas untuk menguji. Semasa ujian, kami boleh mengubah suai nilai atribut umur dalam objek data kepada sebarang nombor, dan kemudian klik butang Pelayan akan mengembalikan data yang diubah suai, dan hasil pengubahsuaian yang sepadan juga akan dipaparkan pada halaman HTML.

Ringkasan

Artikel ini memperkenalkan penggunaan jQuery AJAX dan cara melaksanakan operasi pengubahsuaian dalam AJAX. Dalam aplikasi praktikal, teknologi AJAX boleh meningkatkan interaktiviti dan pengalaman pengguna tapak web dengan sangat baik. Saya harap artikel ini dapat memberi sedikit penerangan tentang amalan dan aplikasi AJAX, dan juga membantu pembaca menguasai pengetahuan asas dan penggunaan jQuery dengan lebih baik.

Atas ialah kandungan terperinci pengubahsuaian ajax jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!