jQueryのAjax変更-フロントエンドQ&A-php.cn

jQueryのAjax変更

PHPz

リリース： 2023-05-09 10:25:37

オリジナル

622 人が閲覧しました

jQuery は、DOM 操作、イベント処理、アニメーション効果などの機能を簡単に実装するための一連の簡潔で使いやすいメソッドを開発者に提供する人気の JavaScript ライブラリです。その中でも、jQuery AJAX は最も重要な機能の 1 つであり、この記事では jQuery AJAX の使い方と AJAX での変更操作の実装方法を詳しく紹介します。

1. jQuery AJAX の使用方法

jQuery AJAX は、$.ajax() メソッドを使用して非同期リクエストを開始できます。基本的な構文は次のとおりです:

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

ログイン後にコピー

パラメータの説明:

url: 要求された URL を示します;
type: 要求メソッドを示します。 GET"、"POST" など;
data: 送信されたデータを示し、文字列、オブジェクト、または配列にすることができます;
dataType: 受信したデータのタイプを示します。 "text"、"html"、"JSON" など;
success: リクエストが成功した後に実行される関数を示し、関数内のパラメーターは返されたデータです。 error: リクエストが失敗したときに実行される関数と、関数内のパラメータを示します。パラメータはエラーメッセージです。

$.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 は変更操作を実装します

AJAX で変更操作を実装する場合は、次のことを行う必要があります。次の点に注意してください:

リクエストメソッドは「PUT」または「POST」である必要があります;

送信されるデータ形式は JSON 形式、つまり JSON である必要があります。 stringify() メソッドを使用してデータを String に変換する必要があります。
変更が成功した後、ユーザーが変更結果を確認できるように、ページを再ロードするか、ページコンテンツの一部を変更する必要があります。。

ステップ 1: HTML ページの作成

まず、変更前と変更後のデータを表示する HTML ページを作成する必要があります。このページでは、以下に示すように、テーブルを通じてデータを表示できます。

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

ログイン後にコピー

ステップ 2: jQuery AJAX リクエストを作成する

次に、jQuery AJAX を使用して非同期リクエストを開始する必要があります。このプロセス中に、いくつかのリクエストを構成し、対応するコールバック関数を作成する必要があります。

この例では、「PUT」リクエストメソッドを使用してデータを変更します。データは JSON 形式です。リクエストが成功したら、サーバーから返された変更されたデータを取得し、HTML ページを更新する必要があります。リクエストが失敗した場合は、対応するエラーメッセージを表示する必要があります。

具体的なコードは次のとおりです:

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

ログイン後にコピー

ステップ 3: サーバーの起動とテスト

最後に、AJAX リクエストプロセス中に、シミュレーションサーバーを起動して、実際の AJAX アスクをシミュレートします。具体的な実装については、Node.js、Express、MongoDB、その他のテクノロジーを参照してください。ここでは、Node.js を例として説明します。

まず、npm をインストールして初期化する必要があります:

npm init

ログイン後にコピー

次に、Express と body-parser をインストールします:

npm install express body-parser --save

ログイン後にコピー

最後に、サーバーコードを記述します:

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

ログイン後にコピー

変更が完了したら、サーバーを起動し、ブラウザで HTML ページにアクセスしてテストします。テスト中に、データオブジェクトの age 属性値を任意の数値に変更し、ボタンをクリックすると、サーバーは変更されたデータを返し、対応する変更結果も HTML ページに表示されます。

概要

この記事では、jQuery AJAX の使用方法と、AJAX で変更操作を実装する方法を紹介します。実際のアプリケーションでは、AJAX テクノロジーは Web サイトの対話性とユーザーエクスペリエンスを大幅に向上させることができます。この記事が AJAX の実践と応用に光を当て、読者が jQuery の基本的な知識と使用法をよりよく習得するのに役立つことを願っています。

以上がjQueryのAjax変更の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。