Jquery投稿フォーム Form.js公式プラグイン紹介_jquery

まず、Ajax と Ajax ファイルのアップロードをサポートする一般的に使用されるフォーム プラグインについて説明します。これらは強力で、基本的に日常的なアプリケーションに対応できます。
1. 最新の JQuery フレームワーク ソフトウェア パッケージをダウンロードします
jquery.js 圧縮パッケージ
jquery.js 非圧縮パッケージ
2. フォーム プラグイン
form.js をダウンロードします

3. Form プラグインの簡単な紹介
ステップ 1: フォームを追加します
コード:

コードをコピーします コードは次のとおりです。

名前:
コメント:

ステップ 2: jquery.js および form.js ファイルを含めます
コード:

コードをコピー コードは次のとおりです。

> ;


// DOM がロードされるのを待ちます
$(document).ready(function() {
// 'myForm' をバインドし、単純なコールバックを提供しますfunction
$('#myForm').ajaxForm (function() {
alert("コメントありがとうございます!");
}); /script>


3. Form プラグインの詳細な使用例と応用例
http://www.malsup.com/jquery/form/

＝＝＝＝＝＝＝＝＝＝＝ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
このプラグインの作者は、form.js を紹介するときに次のように述べています。 🎜>引用:
AJAX を使用してフォームを送信するのは、これほど簡単なことはありません!
Ajax を使用してフォームを送信する場合、これほど簡単なことはないということです。はは——、水が飛ぶかどうかは使ってみればわかります。

フォーム プラグイン API

英語原文: http://www.malsup.com/jquery/form/#api
フォーム プラグイン API は、以下を行うためのいくつかのメソッドを提供します。フォーム データの管理とフォームの送信を簡単に行うことができます。
ajaxForm
必要なイベント リスナーをすべて追加して、AJAX 送信用のフォームを準備します。 ajaxForm はフォームを送信できません。ドキュメントの Ready 関数で、ajaxForm を使用してフォームの AJAX 送信を準備します。 ajaxForm は 0 または 1 個のパラメータを受け入れます。この 1 つのパラメータは、コールバック関数または Options オブジェクトのいずれかになります。
チェイン可能: はい。
例:
コード:




コードをコピー

コードは次のとおりです: $( '#myFormId').ajaxForm(); ajaxSubmit

フォームは AJAX によってすぐに送信されます。ほとんどの場合、フォームを送信するユーザーに応答するために ajaxSubmit が呼び出されます。 ajaxSubmit は 0 または 1 個のパラメータを受け入れます。この 1 つのパラメータは、コールバック関数または Options オブジェクトのいずれかになります。
チェイン可能: はい。
例:

コード:




コードをコピー

コードは次のとおりです: // フォーム送信イベント ハンドラーをバインドします $('#myFormId').submit(function() {

// フォームを送信

$(this).ajaxSubmit();
/ / 通常のブラウザがフォームの送信を実行してページ ナビゲーションを生成するのを防ぐため (ページの更新を防止しますか?) return false
return false>});
formSerialize


フォームをシリアル化します。 (またはシリアル化して) クエリ文字列に変換します。このメソッドは、name1=value1&name2=value2 の形式で文字列を返します。
Chainable: いいえ、このメソッドは文字列を返します。
例:
コード:

コードをコピー

コードは次のとおりです: var queryString = $('#myFormId').formSerialize(); // $.get、$.post、$.ajax などを使用してデータを送信できるようになりました $.post(' myscript.php', queryString );

fieldSerialize

フォームのフィールド要素をクエリ文字列にシリアル化 (またはシリアル化) します。これは、一部のフォーム フィールドのみをシリアル化 (またはシリアル化) する必要がある場合に便利です。このメソッドは、name1=value1&name2=value2 の形式で文字列を返します。
Chainable: いいえ、このメソッドは文字列を返します。
例:
コード:
var queryString = $('#myFormId .specialFields').fieldSerialize();
fieldValue
挿入された配列と一致するフォーム要素の値を返します。バージョン 0.91 以降、このメソッドは常にデータを配列として返します。要素値が無効である可能性があると判断された場合、配列は空になります。それ以外の場合、配列には 1 つ以上の要素値が含まれます。
Chainable: いいえ、このメソッドは配列を返します。
例:
コード:

コードをコピー コードは次のとおりです:

// パスワードの入力値を取得します
var value = $('#myFormId :password').fieldValue();
alert('パスワードは ' value[0]);
resetForm

フォーム要素の元の DOM メソッドを呼び出して、フォームを初期状態に戻します。
チェイン可能: はい。
例:
コード:
$('#myFormId').resetForm();
clearForm
フォーム要素をクリアします。このメソッドは、すべてのテキスト入力フィールド、パスワード入力フィールド、テキストエリア フィールドをクリアし、すべての選択要素の選択をクリアし、すべてのラジオ ボタンと複数選択 (チェックボックス) ボタンを非選択状態にリセットします。
チェイン可能: はい。
コード:
$('#myFormId').clearForm();
clearFields
フィールド要素をクリアします。一部のフォーム要素をクリアする必要がある場合にのみ使用すると便利です。
チェイン可能: はい。
コード:
$('#myFormId .specialFields').clearFields();
Options オブジェクト
ajaxForm と ajaxSubmit は両方とも、 Options オブジェクトを使用して提供できる多数のオプション パラメーターをサポートしています。 Options は単なる JavaScript オブジェクトであり、次の属性と値のコレクションが含まれます:
target
は、サーバーの応答によって更新されるページ内の要素を示します。要素の値は、j​​Query セレクター文字列、jQuery オブジェクト、または DOM 要素として指定できます。
デフォルト値: null。
url
フォームデータを送信するための URL を指定します。
デフォルト値: フォームの action 属性値
type
フォーム データの送信方法を指定します: "GET" または "POST"。
デフォルト値: フォームのメソッド属性値 (見つからない場合のデフォルトは「GET」)。
beforeSubmit
フォームが送信される前に呼び出されるコールバック関数。 「beforeSubmit」コールバック関数は、送信前ロジックを実行したり、フォーム データを検証したりするためのフックとして提供されます。 「beforeSubmit」コールバック関数が false を返した場合、フォームは送信されません。 「beforeSubmit」コールバック関数は、配列形式のフォーム データ、jQuery フォーム オブジェクト、および ajaxForm/ajaxSubmit で渡される Options オブジェクトの 3 つの呼び出しパラメータを取ります。フォーム配列は次の方法でデータを受け取ります:
コード:
[ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]
デフォルト値 :null
success
フォームが正常に送信された後に呼び出されるコールバック関数。 「成功」コールバック関数が提供されている場合、サーバーから応答が返されたときにこの関数が呼び出されます。次に、dataType オプションの値によって、responseText の値が返されるか、responseXML の値が返されるかが決まります。
デフォルト値: null
dataType
返されることが期待されるデータ型。 null、「xml」、「script」、または「json」のいずれか。 dataType は、サーバーの応答を処理する方法を指定するメソッドを提供します。これは jQuery.httpData メソッドに直接反映されます。次の値がサポートされています:
'xml': dataType == 'xml' の場合、サーバーの応答は XML として扱われます。同時に、「成功」コールバックメソッドが指定されている場合は、responseXML 値が返されます。
'json': dataType == 'json' の場合、サーバー応答が評価され、「success」コールバック メソッド (指定されている場合) に渡されます。
'script': dataType == 'script' の場合、サーバー応答はプレーンテキストとして評価されます。
(注釈: 上記のいくつかの箇所は明確ではなかったので、元の意味を表現したいと考えて言い換える必要がありました。)
デフォルト値: null (サーバーは responseText 値を返します)
セマンティック
データを厳密な意味順序で送信する必要があるかどうかを示すブール フラグ (低速)。type="image" の入力要素を除き、通常の形式のシリアル化は意味順序で実行されることに注意してください。セマンティック オプションは にのみ設定する必要があります。サーバーに厳密なセマンティック要件があり、フォームに type="image" の入力要素が含まれている場合は true。
データを厳密なセマンティック順序で送信する必要があるかどうかを示す (遅い?)。注: 一般に、type="image" の入力要素を除き、フォームは意味的な順序でシリアル化 (またはシリアル化) されます。サーバーに厳密なセマンティック要件があり、フォームに type="image" の入力要素が含まれている場合は、セマンティックを true に設定する必要があります。 (翻訳注: この段落は理解できないため、翻訳が明確ではないかもしれませんが、修正してください。)
デフォルト値: false
resetForm
フォームが正常に送信された場合にリセットするかどうかを示すブール型フラグ。
デフォルト値: null
clearForm
フォームが正常に送信された場合にフォームデータをクリアするかどうかを示すブール型フラグ。
デフォルト値: null
インスタンス:
コード:
[/code]
// オプションオブジェクトを準備します
var options = {
target: '#divToUpdate',
url: 'comment.php',
success: function() {
alert('コメントありがとうございます!')
} }; // ajaxForm にオプションを渡します
$('#myForm').ajaxForm(options);
[/code]
注: Options オブジェクトは、jQuery の $.ajax メソッドに値を渡すために使用することもできます。 $.ajax でサポートされているオプションに精通している場合は、それらを使用して、Options オブジェクトを ajaxForm および ajaxSubmit に渡すことができます。