jquery Ajax-Änderung

jQuery ist eine beliebte JavaScript-Bibliothek, die Entwicklern eine Reihe prägnanter und benutzerfreundlicher Methoden zur einfachen Implementierung von Funktionen wie DOM-Operationen, Ereignisbehandlung, Animationseffekten usw. bietet. Unter diesen ist jQuery AJAX eine der wichtigsten Funktionen. In diesem Artikel wird detailliert beschrieben, wie Sie jQuery AJAX verwenden und wie Sie Änderungsvorgänge in AJAX implementieren.

1. So verwenden Sie jQuery AJAX

jQuery AJAX kann die Methode $.ajax() verwenden, um asynchrone Anforderungen zu initiieren. Die grundlegende Syntax lautet wie folgt:

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

Parameterbeschreibung:

• url: Stellt die URL der Anfrage dar;
• type: Stellt die Anfragemethode dar, die „GET“, „POST“ usw. sein kann; Daten: Stellt die gesendeten Daten dar. Es kann sich um eine Zeichenfolge, ein Objekt oder ein Array handeln.
• Datentyp: Gibt den Typ der empfangenen Daten an, der „Text“, „HTML“, „JSON“ usw. sein kann. Gibt die Funktion an, die nach erfolgreicher Anforderung ausgeführt wird, und die Parameter in der Funktion sind die zurückgegebenen Daten.
• Fehler: Zeigt die Funktion an, die ausgeführt wird, wenn die Anforderung fehlschlägt, und die Parameter in der Funktion sind Fehlerinformationen.
Zum Beispiel initiiert der folgende Code eine GET-Anfrage:

• $.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 implementiert Änderungsoperationen

Bei der Implementierung von Änderungsoperationen in AJAX müssen Sie auf die folgenden Punkte achten:

Die Anforderungsmethode sollte sein „PUT“ oder „POST“ „;

Das gesendete Datenformat sollte im JSON-Format vorliegen, d. h. die Methode JSON.stringify() muss verwendet werden, um die Daten in eine Zeichenfolge umzuwandeln;

1. Nach erfolgreicher Änderung , sollte die Seite neu geladen oder ein Teil des Seiteninhalts geändert werden, damit Benutzer die geänderten Ergebnisse sehen können.
Im Folgenden zeigen wir Ihnen Schritt für Schritt, wie Sie Änderungsvorgänge in AJAX implementieren.
Schritt 1: Erstellen Sie eine HTML-Seite

Zuerst müssen wir eine HTML-Seite erstellen, um die vor- und nachgeänderten Daten anzuzeigen. Auf der Seite können wir Daten durch Tabellen darstellen, wie unten gezeigt:

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

Schritt 2: jQuery-AJAX-Anfrage schreiben

Als nächstes müssen wir jQuery-AJAX verwenden, um eine asynchrone Anfrage zu initiieren. Während dieses Prozesses müssen wir einige Anfragen konfigurieren und entsprechende Rückruffunktionen schreiben.

In diesem Beispiel verwenden wir die Anforderungsmethode „PUT“, um die Daten zu ändern, und die Daten liegen im JSON-Format vor. Wenn die Anfrage erfolgreich ist, müssen wir die geänderten Daten vom Server zurückgeben und die HTML-Seite aktualisieren. Wenn eine Anfrage fehlschlägt, müssen wir eine entsprechende Fehlermeldung ausgeben.

Der spezifische Code lautet wie folgt:

// 创建数据对象
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);
  }
});

Schritt 3: Server starten und testen

Abschließend müssen wir während des AJAX-Anfrageprozesses einen Simulationsserver starten, um die tatsächliche AJAX-Anfrage zu simulieren. Informationen zur spezifischen Implementierung finden Sie in Node.js, Express, MongoDB und anderen Technologien. Hier nehmen wir zur Veranschaulichung Node.js als Beispiel.

Zuerst müssen wir npm installieren und initialisieren:

npm init

Dann Express und Body-Parser installieren:

npm install express body-parser --save

Schreiben Sie abschließend den Servercode:

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

Nach Abschluss der Änderung starten Sie den Server und greifen auf den HTML-Code zu Seite im Browser, Sie sind bereit zum Testen. Während des Tests können wir den Altersattributwert im Datenobjekt auf eine beliebige Zahl ändern und dann auf die Schaltfläche klicken. Der Server gibt die geänderten Daten zurück und die entsprechenden Änderungsergebnisse werden auch auf der HTML-Seite angezeigt.

Zusammenfassung

In diesem Artikel wird die Verwendung von jQuery AJAX und die Implementierung von Änderungsvorgängen in AJAX vorgestellt. In praktischen Anwendungen kann die AJAX-Technologie die Interaktivität und das Benutzererlebnis der Website erheblich verbessern. Ich hoffe, dass dieser Artikel etwas Licht in die Praxis und Anwendung von AJAX bringen und den Lesern auch dabei helfen kann, die Grundkenntnisse und die Verwendung von jQuery besser zu beherrschen.

Das obige ist der detaillierte Inhalt vonjquery Ajax-Änderung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!