modification jquery ajax-Questions et réponses frontales-php.cn

modification jquery ajax

PHPz

Libérer： 2023-05-09 10:25:37

original

622 Les gens l'ont consulté

jQuery est une bibliothèque JavaScript populaire qui fournit aux développeurs une série de méthodes concises et faciles à utiliser pour implémenter facilement des fonctions telles que les opérations DOM, la gestion des événements, les effets d'animation, etc. Parmi eux, jQuery AJAX est l'une de ses fonctionnalités les plus importantes. Cet article présentera en détail comment utiliser jQuery AJAX et comment implémenter des opérations de modification dans AJAX.

1. Comment utiliser jQuery AJAX

jQuery AJAX peut utiliser la méthode $.ajax() pour lancer des requêtes asynchrones. La syntaxe de base est la suivante :

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

Copier après la connexion

Description du paramètre :

url : représente l'URL de la requête ;
type : représente la méthode de requête, qui peut être "GET", "POST", etc. ; data : Représente les données envoyées, Il peut s'agir d'une chaîne, d'un objet ou d'un tableau ;
dataType : indique le type de données reçues, qui peut être "texte", "html", "JSON", etc.; indique la fonction exécutée après la réussite de la requête et les paramètres de la fonction sont les données renvoyées ;
erreur : indique la fonction exécutée lorsque la requête échoue et les paramètres de la fonction sont des informations d'erreur ;

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

Copier après la connexion

Vous devez faire attention aux points suivants lors de l'implémentation des opérations de modification dans AJAX :

La méthode de requête doit être "PUT" ou "POST" " ;

Le format des données envoyées doit être au format JSON, c'est-à-dire que la méthode JSON.stringify() doit être utilisée pour convertir les données en chaîne ;

Une fois la modification réussie , la page doit être rechargée ou une partie du contenu de la page doit être modifiée afin que les utilisateurs puissent voir les résultats modifiés.

Tout d'abord, nous devons créer une page HTML pour afficher les données pré-modifiées et post-modifiées. Dans la page, nous pouvons présenter les données sous forme de tableaux, comme indiqué ci-dessous :

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

Copier après la connexion

Étape 2 : Écrire une requête jQuery AJAX

Ensuite, nous devons utiliser jQuery AJAX pour lancer une requête asynchrone. Au cours de ce processus, nous devons configurer certaines requêtes et écrire les fonctions de rappel correspondantes.

Dans cet exemple, nous utilisons la méthode de requête "PUT" pour modifier les données, et les données sont au format JSON. Lorsque la requête aboutit, nous devons récupérer les données modifiées renvoyées par le serveur et mettre à jour la page HTML. Lorsqu'une requête échoue, nous devons donner un message d'erreur correspondant.

Le code spécifique est le suivant :

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

Copier après la connexion

Étape 3 : Démarrez le serveur et testez

Enfin, pendant le processus de requête AJAX, nous devons démarrer un serveur de simulation pour simuler la requête AJAX réelle. Pour une implémentation spécifique, veuillez vous référer à Node.js, Express, MongoDB et autres technologies. Nous prenons ici Node.js comme exemple pour illustrer.

Tout d'abord, nous devons installer et initialiser npm :

npm init

Copier après la connexion

Ensuite, installez Express et body-parser :

npm install express body-parser --save

Copier après la connexion

Enfin, écrivez le code du serveur :

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

Copier après la connexion

Une fois la modification terminée, démarrez le serveur et accédez au HTML page dans le navigateur, vous êtes prêt à tester. Pendant le test, nous pouvons modifier la valeur de l'attribut age dans l'objet de données en n'importe quel nombre, puis cliquer sur le bouton. Le serveur renverra les données modifiées et les résultats de modification correspondants seront également affichés sur la page HTML.

Résumé

Cet article présente comment utiliser jQuery AJAX et comment implémenter des opérations de modification dans AJAX. Dans les applications pratiques, la technologie AJAX peut améliorer considérablement l’interactivité et l’expérience utilisateur du site Web. J'espère que cet article pourra faire la lumière sur la pratique et l'application d'AJAX, et également aider les lecteurs à mieux maîtriser les connaissances de base et l'utilisation de jQuery.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!