Framework7-forms-ajax-submit

Ajaxフォーム送信

説明

Framework7では、次の2つの方法を使用して、Ajaxを使用してデータを自動的に送信できます-

• ユーザーがフォームを送信するか、プログラムで_submit_イベントがフォームでトリガーされます。
• ユーザーがフォームフィールドまたはプログラムでトリガーされた_change_イベントを変更したとき。

送信時にフォームデータを送信する

Ajaxフォームを有効にし、[送信]をクリックしてフォームデータを自動的に送信するには、_ajax-submit_クラスをフォームに追加する必要があります。 ユーザーがフォームを送信した後、Ajaxは自動的に次のルールを使用してフォームデータを送信します-

• フォームデータは、フォームの_action_属性で指定されたファイルまたはURLに送信されます。
• 要求メソッドは、フォームの_method_属性で説明したものと同様です。 *コンテンツタイプは、フォームの_enctype_属性で説明したものと同じです。 デフォルトで言及されていない場合は、_application/x-www-form-urlencoded_です。

入力変更時にフォームデータを送信する

以下に示すように、_ajax-submit-onchange_クラスを使用して、ユーザーがフォームフィールドに変更を加えたときにフォームデータを送信できます。

<form action = "sendl" method = "GET" class = "ajax-submit-onchange">
   ...
</form>

ユーザーがフォームフィールドを変更すると、上記と同じルールでAjaxを使用してフォームデータが自動的に送信されます。

Ajax送信イベント

データを送信したファイル/URLから実際のXHR応答を取得するには、以下に示すように特別なイベントを使用できます-

S.No	Event & Description	target
1	submitted* このイベントは、Ajaxリクエストが成功した後にトリガーされます。 a	フォーム要素 <フォームクラス= "ajax-submit">
2	beforeSubmit このイベントは、Ajaxリクエストの直前にトリガーされます。 a	フォーム要素 <フォームクラス= "ajax-submit">
3	submitError このイベントは、Ajax要求エラーでトリガーされます。 a	フォーム要素 <form class = "ajax-submit">