ajaxでデータを変更するJavaScript

Web 開発では、バックエンド サーバー上のデータとの同期を保つために、ページ上のデータを変更する必要があることがよくあります。このとき、Ajax テクノロジーが役に立ちます。

Ajax (非同期 JavaScript および XML) は、ページ全体を再読み込みせずに部分的なコンテンツを更新できるテクノロジーです。非同期通信によりサーバーにデータを送信し、ページを更新することで部分更新の効果を実現します。 JavaScript、XML、CSS、その他のテクノロジーを使用して、最新の Web 開発に多くの利便性を提供します。

Ajax テクノロジで最も一般的に使用されるのは XmlHttpRequest オブジェクトで、これを通じてサーバーにリクエストを送信してデータを取得できます。同時に、JavaScript には、jQuery、AngularJS、React など、Ajax リクエストを簡単に実行できるライブラリが多数あります。

Ajax テクノロジーを使用してページ内のデータを変更する方法を見てみましょう。

1. フロントエンド コード

名前、年齢、性別などの学生情報を表示するリスト ページがあるとします。次に、各学生の情報に「編集」ボタンを追加する必要があります。このボタンをクリックすると、学生の情報を変更するためのモーダル ボックスがポップアップ表示されます。

まず、ページに「編集」ボタンを追加する必要があります。次のコードを HTML に追加します:

<button class="edit-btn" data-id="1">编辑</button>

ここで、data-id 属性は学生の ID を表し、後続の Ajax リクエストで使用できます。

次に、ボタンにクリック イベントを追加する JavaScript コードを記述する必要があります。ユーザーがクリックすると、モーダル ボックスが開き、サーバーから生徒の情報を取得します。 JavaScript に次のコードを追加します。

// 为按钮添加点击事件
$(".edit-btn").click(function() {
  // 获取学生的 ID
  var id = $(this).data("id");
  
  // 发送 Ajax 请求，获取学生的信息
  $.ajax({
    url: "/students/" + id,  // 请求的地址
    type: "GET",             // 请求的方法
    success: function(data) {  // 请求成功后的回调函数
      // 将学生的信息填充到模态框中
      $("#name").val(data.name);
      $("#age").val(data.age);
      $("#gender").val(data.gender);
      
      // 显示模态框
      $("#modal").show();
    },
    error: function() {
      alert("获取数据失败，请重试！");
    }
  });
});

上記のコードでは、まず $(this).data("id")# を通じて [編集] ボタンの data- を取得します。 ## id 属性。学生の ID です。次に、jQuery の $.ajax() メソッドを使用して GET リクエストを送信し、生徒の情報を取得します。成功コールバック関数で、モーダル ボックスに生徒の情報を入力し、モーダル ボックスを表示します。

バックエンド コード

バックエンド コードでは、Ajax リクエストを処理し、クエリされたデータをフロントエンドに返す必要があります。

バックエンド フレームワークとして Node.js Express を使用すると、Ajax リクエストは Express で簡単に処理できます。まず、学生情報をクエリするための GET ルートを追加する必要があります。 Express に次のコードを追加します。

app.get("/students/:id", function(req, res) {
  // 获取学生的 ID
  var id = req.params.id;
  
  // 在数据库中查询学生的信息
  db.query("SELECT * FROM students WHERE id = ?", [id], function(err, result) {
    if (err) {
      console.log("查询数据失败：", err);
      res.status(500).send("查询数据失败");
    } else if (result.length === 0) {
      res.status(404).send("学生不存在");
    } else {
      // 返回学生的信息
      res.json(result[0]);
    }
  });
});

上記のコードでは、まず

req.params.id を通じて学生の ID を取得します。次に、データベース クエリ ステートメントを使用して、データベース内の生徒の情報をクエリします。クエリが失敗した場合は、サーバー エラーを示す 500 ステータス コードが返されます。学生が存在しない場合は、学生が存在しないことを示す 404 ステータス コードが返されます。それ以外の場合は、クエリされた学生情報が返されます。 JSON オブジェクトとしてフロントエンドに送信されます。

フロントエンド コード

ユーザーが生徒の情報を変更した後、変更をサーバーに保存する必要があります。 JavaScript に次のコードを追加します。

$("#save-btn").click(function() {
  // 获取学生的 ID
  var id = $(".edit-btn").data("id");
  
  // 获取修改后的学生信息
  var name = $("#name").val();
  var age = $("#age").val();
  var gender = $("#gender").val();
  
  // 发送 Ajax 请求，保存修改后的学生信息
  $.ajax({
    url: "/students/" + id,  // 请求的地址
    type: "PUT",             // 请求的方法
    data: {                  // 请求的数据
      name: name,
      age: age,
      gender: gender
    },
    success: function() {    // 请求成功后的回调函数
      alert("修改成功！");
    },
    error: function() {
      alert("保存数据失败，请重试！");
    }
  });
});

上記のコードでは、まず

$(".edit-btn").data("id")## を通じて現在の生徒の ID を取得します。 ＃。次に、ユーザーの変更された学生情報を取得し、jQuery の $.ajax() メソッドを使用して PUT リクエストを送信し、変更された情報をバックエンドに渡します。 バックエンド コードでは、変更された学生情報を保存するための PUT ルートを追加する必要があります。 Express に次のコードを追加します。

app.put("/students/:id", function(req, res) {
  // 获取学生的 ID
  var id = req.params.id;
  
  // 获取修改后的学生信息
  var name = req.body.name;
  var age = req.body.age;
  var gender = req.body.gender;
  
  // 在数据库中更新学生的信息
  db.query("UPDATE students SET name = ?, age = ?, gender = ? WHERE id = ?", [name, age, gender, id], function(err) {
    if (err) {
      console.log("保存数据失败：", err);
      res.status(500).send("保存数据失败");
    } else {
      res.send("保存数据成功");
    }
  });
});

上記のコードでは、まず

req.params.id

を通じて学生の ID を取得し、次に req.body# を通じて取得します。 ## 学生情報を変更しました。次に、データベース更新ステートメントを使用して生徒の情報を更新し、成功または失敗のメッセージをフロントエンドに返します。 概要:

上記のコード実装により、フロントエンドで部分更新を実現できるだけでなく、バ​​ックエンドで保存操作を実装することもできます。同時に、プロジェクトのニーズに応じて削除や削除などの操作を追加できるため、フロントエンドページがよりインタラクティブになり、ユーザーの操作がより直感的になります。

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