jQueryを使用してフォーム送信を設定する方法

最近の Web サイトでは、フォームは最も重要な要素の 1 つです。ユーザーがデータを送信できるようになり、Web サイトとユーザー間のコミュニケーションがよりスムーズになります。人気の JavaScript ライブラリである jQuery は、フォーム操作を簡単に制御できる豊富な API を提供します。この記事では、jQueryを使用したフォーム送信の設定方法を説明します。

jQuery によるフォーム要素の選択

まず、フォーム要素を選択する必要があります。 jQuery には、セレクター、DOM 要素など、フォーム要素を選択するための複数のメソッドが用意されています。使用例をいくつか示します。

1. フォーム要素の選択

jQuery セレクターを使用してフォーム要素を選択できます。たとえば、ID が「myForm」のフォーム要素を選択するには、次の構文を使用できます。

var myForm = $("form#myForm");

ここでの「$」は、一致するすべての要素を含む jQuery オブジェクトを返す jQuery 関数の省略形です。 。このオブジェクトを使用してフォームを制御できます。

2. フォーム入力要素の選択

同様に、jQuery セレクターを使用して、テキスト ボックス、ドロップダウン ボックス、チェック ボックスなどのフォーム内の入力要素を選択することもできます。 、など。いくつかの使用例を次に示します。

// 选择名称为它“name”的输入元素
var inputByName = $("input[name='name']");

// 选择类型为文本的输入元素
var inputByType = $("input[type='text']");

// 选择类型为复选框的输入元素
var checkbox = $("input[type='checkbox']");

jQuery フォーム送信の設定

form 要素を選択したら、jQuery を使用してフォーム送信を設定できます。 jQuery では、フォームを送信する方法が 2 つあります。

1. submit() 関数を使用する

フォームの submit() 関数を使用して、形状。以下にいくつかの使用例を示します。

// 当触发一个button按钮时提交表单
$("button").click(function(){
  $("form").submit();
});

// 当网页加载时提交表单
$(document).ready(function(){
  $("form").submit();
});

2. ajax() 関数の使用

ajax() 関数を使用してフォームを送信することもできます。このアプローチにより、フォームを非同期に送信し、ページを更新せずに Web ページを更新することができます。以下にいくつかの使用例を示します。

$("form").submit(function(event){
  // 阻止表单默认提交行为
  event.preventDefault();

  // 构造一个包含表单数据的对象
  var formData = $(this).serialize();

  // 发送表单数据到服务器
  $.ajax({
    url: "http://example.com/submit.php", //服务器地址
    type: "POST", //提交方式
    data: formData //表单数据
  })
   .done(function(data){
      // 成功提交处理
      console.log("Success: " + data);
   })
   .fail(function(jqXHR, textStatus, errorThrown){
      // 处理请求失败
      console.log("Error: " + textStatus + ", " + errorThrown);
   });
});

ブラウザのデフォルトの送信動作を防ぐには、フォームを送信する前に、preventDefault() 関数を呼び出す必要があることに注意してください。

結論

この記事では、jQuery を使用してフォーム要素を選択し、submit() 関数と ajax() 関数を使用してフォームを送信する方法を学びました。フォームの送信は簡単そうに見えますが、実際には多くの詳細が含まれます。したがって、フォーム送信スキルをよりよく習得するには、実際の開発でさらに練習して試す必要があります。

以上がjQueryを使用してフォーム送信を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。