jEasyUI は非同期送信フォームを作成します

jEasyUI 非同期送信フォーム：効率的なデータインタラクションを簡単に実現

この記事では、jEasyUI フレームワークを使用して非同期送信フォームを作成する方法について説明します。AJAX 技術を通じてサーバーと非同期でデータ交換を行うことで、ユーザーエクスペリエンスを向上させることができます。

jEasyUI フォーム基礎

jEasyUI は、Web ページにインタラクティブな UI コンポーネントを簡単に追加できる、軽量で使いやすい jQuery ベースの UI フレームワークです。そのフォームコンポーネントを使用すると、ユーザーフレンドリーなフォームを効率的に作成できます。

基本的なフォーム構造の作成

jEasyUI フォームは、標準の HTML フォーム要素を使用して作成できます。


<form id="myForm" method="post">
  <label for="name">名前:</label>
  <input type="text" id="name" name="name" />
  <br />
  <label for="email">メールアドレス:</label>
  <input type="email" id="email" name="email" />
  <br />
  <button type="submit">送信</button>
</form>

jEasyUI スタイルと JavaScript ファイルのインポート

jEasyUI を使用するには、必要なスタイルシートと JavaScript ファイルを HTML ページにインポートする必要があります。


<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

非同期送信フォームの設定

jEasyUI フォームを非同期で送信するには、`ajaxSubmit` オプションを使用します。

`ajaxSubmit` オプション

`ajaxSubmit` オプションは、フォームを非同期で送信するかどうかを指定するブール値です。このオプションを `true` に設定すると、フォームは AJAX を使用して送信されます。

送信先 URL とリクエストメソッド

フォームデータを送信する URL と、使用するリクエストメソッド (GET または POST) を指定する必要があります。

`success` コールバック関数

サーバーからの応答を処理するために、`success` コールバック関数を設定できます。


<script>
$(function() {
  $('#myForm').form({
    ajaxSubmit: true,
    url: 'submit.php',
    type: 'POST',
    success: function(data) {
      // サーバーからの応答を処理
      alert(data);
    }
  });
});
</script>

フォーム検証

jEasyUI は、フォーム検証のための組み込みの検証ルールを提供しています。

組み込みの検証ルール

jEasyUI は、必須フィールド、メールアドレス、数値などの一般的な検証ルールを提供しています。

ルール	説明
required	フィールドは必須です。
email	有効なメールアドレスを入力する必要があります。
number	数値を入力する必要があります。

カスタム検証ルールの定義

独自の検証ルールを定義することもできます。


$.extend($.fn.validatebox.defaults.rules, {
  myRule: {
    validator: function(value, param) {
      // カスタム検証ロジック
      return true;
    },
    message: 'カスタム検証エラーメッセージ'
  }
});

送信前のフォーム検証

フォームを送信する前に、`validate` メソッドを使用してフォームを検証できます。


if ($('#myForm').form('validate')) {
  // フォームは有効です。送信します。
  $('#myForm').submit();
} else {
  // フォームは無効です。
}

实例演示

簡単なユーザー登録フォームを作成し、フォームの非同期送信と検証を実装する例を以下に示します。


<form id="registrationForm" method="post">
  <label for="username">ユーザー名:</label>
  <input type="text" id="username" name="username" class="easyui-validatebox" required="true" />
  <br />
  <label for="password">パスワード:</label>
  <input type="password" id="password" name="password" class="easyui-validatebox" required="true" />
  <br />
  <label for="email">メールアドレス:</label>
  <input type="email" id="email" name="email" class="easyui-validatebox" validType="email" />
  <br />
  <button type="submit">登録</button>
</form>

<script>
$(function() {
  $('#registrationForm').form({
    ajaxSubmit: true,
    url: 'register.php',
    type: 'POST',
    success: function(data) {
      // サーバーからの応答を処理
      alert(data);
    }
  });
});
</script>

まとめ

jEasyUI フレームワークを使用すると、非同期送信フォームを簡単に作成し、ユーザーエクスペリエンスを向上させることができます。`ajaxSubmit` オプション、組み込みの検証ルール、およびカスタム検証ルールを使用すると、堅牢でユーザーフレンドリーなフォームを作成できます。

jEasyUI 非同期送信フォームの利点

ページをリロードせずにデータを送信できるため、ユーザーエクスペリエンスが向上します。
サーバーとのデータ交換を非同期で行うことができるため、パフォーマンスが向上します。
フォーム検証とエラー処理が簡素化されます。

適用シーン

ユーザー登録フォーム
ログインフォーム
お問い合わせフォーム
データ入力フォーム