ポストバックなしで jQuery AJAX を使用してフォームを送信するにはどうすればよいですか?

jQuery AJAX を使用してフォームを送信する

フォームを操作する場合、AJAX を使用してフォーム データを PHP スクリプトに送信することが望ましい場合があります。従来のポストバックを実行するのではなく、これを達成する際の課題の 1 つは、すべてのフォーム入力を収集して送信することです。

幸いなことに、jQuery は、serialize() メソッドを使用して簡単な解決策を提供します。実装方法は次のとおりです。

1.フォームのデフォルトの送信を無効にします:

$('#formId').submit(function(event) {
  event.preventDefault();
});

2.フォーム データのシリアル化:

serialize() メソッドはフォームの要素をシリアル化し、AJAX リクエストで使用できるクエリ文字列を返します。

3. AJAX リクエストを作成します:

$.ajax({
  type: "POST",
  url: "targetScript.php",
  data: $('#formId').serialize(),
  success: function(data) {
    // Handle the response from the PHP script
  }
});

上記のコードで、formId をフォームの実際の ID に置き換え、targetScript.php をフォーム データを処理する PHP スクリプトの URL に置き換えます。

応答処理の例:

の success 関数内AJAX リクエストを使用すると、PHP スクリプトから返されるレスポンスを処理できます。たとえば、成功メッセージが期待されている場合は、次のコマンドを使用してメッセージを表示できます。

success: function(data) {
  alert("Your order has been submitted successfully.");
}

これらの手順に従うことで、すべてのフォーム入力を手動で収集することなく、jQuery AJAX を使用してフォーム データをシームレスに送信できます。

以上がポストバックなしで jQuery AJAX を使用してフォームを送信するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。