jquery ajaxフォームを送信してもページが更新されません

Web 開発では、フォームの送信は非常に一般的な操作であり、通常、フォームの送信はページを更新することで完了します。ただし、フォームの送信後にページを更新したくない場合はどうすればよいでしょうか?この記事では、jQuery と Ajax を使用して、ページを更新せずにフォーム送信を実装する方法を紹介します。

1. ページを更新してみませんか

従来のフォーム送信プロセスでは、ユーザーはページが更新されるまで辛抱強く待つ必要があり、ユーザー エクスペリエンスが非常に煩雑になります。ページが更新されると、ユーザーは以前に入力したフォームの内容を再入力する必要が生じる可能性があり、ユーザーは不満を感じてしまいます。また、ページ更新により一部のデータが失われる可能性もあり、ユーザーに無用な迷惑を与えることになります。

したがって、Ajax を介してページを更新せずにフォーム送信を実装すると、ユーザー エクスペリエンスが効果的に向上し、ユーザーの時間と労力を節約できます。

2. 実装手順

以下では、次の手順を使用して、ページを更新せずにフォーム送信を実装します。

1. フォーム送信イベントをリッスンする

まず、JavaScript を通じてフォームを送信できるように、フォーム上の送信イベントのリスナー関数をバインドする必要があります。 。同時に、false を返すことでブラウザのデフォルトのフォーム送信動作を防ぐ必要があります。コードは次のとおりです。

$('form').submit(function() { 
  // ajax 表单提交代码... 
  return false; 
}); 

2. Get form data

次に、jQuery の Serialize() メソッドを通じてフォーム データを取得する必要があります。このメソッドは、後続の Ajax リクエストで使用できるように、フォーム内のすべてのデータを文字列にシリアル化します。コードは次のとおりです。

var formData = $('form').serialize(); 

3. Ajax リクエストの送信

ここで、jQuery の ajax() メソッドを通じて非同期リクエストを送信し、フォームを更新せずにフォームを送信する必要があります。ページ。コードは次のとおりです。

$.ajax({ 
  type: 'POST', 
  url: 'submit.php', 
  data: formData, 
  success: function(result) { 
    // 处理返回的数据 
  } 
}); 

この ajax() メソッドでは、次のパラメータを定義します。

• type: リクエストのタイプ。この例では、POST メソッドを選択しました。
• url: リクエストされたターゲット URL。これは、フォームの送信後にデータを送信する PHP ファイルを表す submit.php です。
• data: サーバーに送信されたデータ。以前に取得したフォームデータ、formData を使用しました。
• success: リクエストが成功した後のコールバック関数。この関数では、サーバーから返されたデータをそれに応じて処理できます。

4. サーバーから返されたデータの処理

サーバーからデータが返されると、成功コールバック関数でそれを処理できます。たとえば、サーバーから返されたデータをページに表示したり、JavaScript を通じてページのステータスを変更したりできます。コードは次のとおりです。

success: function(result) { 
  // 处理返回的数据： 
  alert(result); 
  $('form')[0].reset(); 
} 

このコールバック関数では、サーバーから返されたデータに対して 2 つの操作を実行します。

• JavaScript のalert() メソッドを使用してプロンプト ボックスを表示します。 , コンテンツはサーバーから返されたデータです。
• ユーザーが新しいデータを入力できるように、フォームは jQuery のreset() メソッドを通じてリセットされます。

これまでのところ、上記の 4 つの手順により、ページを更新せずにフォーム送信を正常に実装できました。

3. 注意事項

Ajax を介したフォーム送信はユーザー エクスペリエンスを大幅に向上させますが、使用中に注意する必要がある点もいくつかあります。 # フォームの繰り返し送信を防止する

1. Ajax リクエストは非同期であるため、ユーザーが頻繁に送信ボタンをクリックすると、フォームが繰り返し送信される可能性があります。この問題を回避するには、Ajax リクエストの送信中にフォームの送信ボタンを無効にし、リクエストの完了後に有効にします。コードは次のとおりです。

$('form').submit(function() { 
  // 禁用按钮 
  $('input[type="submit"]', this).attr('disabled', 'disabled'); 

  // ajax 表单提交代码... 

  // 启用按钮 
  $('input[type="submit"]', this).removeAttr('disabled'); 
}); 

サーバーから返されたエラーの処理

2. Ajax リクエストで、サーバーが間違ったステータス コードを返した場合、これらのエラーを処理する必要があります。はやくて 。通常は、成功コールバック関数内のデータを通じてサーバーから返されたステータスを判断し、特定の状況に応じて後続の処理を実行できます。たとえば、サーバーから返されたステータス コードが 401 の場合、ユーザーがログインしていないことを意味する可能性があります。この場合、アクセスを続けるにはページ ジャンプを通じてユーザーをログインする必要があります。

success: function(result) { 
  if (result.status === 'success') { 
    alert('提交成功'); 
    $('form')[0].reset(); 
  } else if (result.status === 'failed') { 
    alert('提交失败'); 
  } else if (result.status === 'error') { 
    alert('发生了错误：' + result.message); 
  } 
} 

4. 概要

この記事では、jQuery と Ajax を使用して、ページを更新せずにフォーム送信を実現する方法を紹介します。フォーム送信イベントをリッスンし、フォーム データを取得し、Ajax リクエストを送信し、サーバーから返されたデータを処理することで、ページを更新せずにフォーム送信を実装でき、ユーザー エクスペリエンスが大幅に向上します。もちろん、フォームの繰り返し送信の防止やサーバーから返されたエラーの処理など、使用時に発生する可能性のある問題にも注意する必要があります。この記事が、ページを更新せずにフォーム送信を実装するのに役立つことを願っています。

以上がjquery ajaxフォームを送信してもページが更新されませんの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。