AJAXとjQueryを使ってPOSTメソッドでフォームを送信

で前回の記事私はシンプルを使用して、ASPまたはPHPでメールを送信するAJAXでフォームを送信する方法を説明しましたのJavaScriptライブラリ AJAX chickpeatocook.comへのガイドの例だけでなく、他の多くの項目の設定に使用される。

問題のライブラリは、非常に高速かつ軽量な、それはデータを送信するためのGETメソッドを使用しますが、単純な理由でPOSTメソッドを使用したときに、フォームを送信する場合：クエリ文字列を（URLに渡されるパラメータGETメソッドを介して）、POSTメソッドはこの制限に苦しむしない間に、スペースを含む255文字の制限があります。

非常に快適な図書館の返却するためにjQueryの AJAX機能で動作させることは非常に快適で持っている、。

サーバーサイドスクリプトは、単に送信画面のデータを印刷するのに対し、PHPのASPを介してそれらを取得することで、AJAXでPOSTでデータを送信する単純な例を見てみましょう：リーダーに必要に応じてそれらを管理するタスク。

最初に私たちのウェブページのライブラリjquery.jsのヘッダを思い出す。

 



全トラックsrc="jquery.js"> </ SCRIPT>

 

我々は、HTMLフォームを構築します。

 <form name="modulo">



    



 <P>名</ P>



    



 <P> <input type="text" name="nome" id="nome=> </ P>



    



 <P>姓</ P>



    



 <P> <input type="text" name="cognome" id="cognome"> </ P>



    



 <input type="button" id="bottone" value="Invia dati">







 </フォーム>









 <div id="risultato"> </ DIV>

二つのフィールド、ボタン、操作の結果で画面印刷層を含む、単純なフォーム。

私たちは今のJavascriptコードを分析してみましょう：

 <script type="text/javascript">







 $（ドキュメント）。レディ（関数（）{



  



 $は（"＃ボタン"）。（関数（）{をクリック



    



 VAR名= $（"＃名前"）VAL（）;



    



 VAR名= $（"＃名前"）VAL（）;



    



 $。アヤックス（{



      



タイプ："POST"、



      



 URL："dati.ext"



      





      



 dataTypeは："HTML"、



      



成功：関数（MSG）



      



 {



        



 。$（"＃result"）をHTML（MSG）;



      



 }、



      



エラー：関数（）



      



 {



        



アラートが（"コールが失敗した、もう一度やり直してください...");



      



 }



    



 }）;



  



 }）;







 }）;







 </ SCRIPT>

我々は、Ajaxのメソッドを介して、伝送特性、回復：メソッド（POST）、サーバ側のURLがデータを（*）処理すると、戻り値はHTML形式になるように指定し、最後にビデオにプリント確認メッセージまたは呼び出しでのエラー。

jQueryはまた、POSTメソッドでAj​​ax呼び出しを処理するための興味深いショートカットを持っていることに注意してください：

 <script type="text/javascript">







 $（ドキュメント）。レディ（関数（）{



  



 $は（"＃ボタン"）。（関数（）{をクリック



    



 VAR名= $（"＃名前"）VAL（）;



    



 VAR名= $（"＃名前"）VAL（）;



    



 $ポスト（"dati.ext"、{名前：名、姓：姓}。。、機能（MSG）{$（"＃result"）をHTML（msgに);});

我々が合格したpost（）メソッドでは、順番に、要求を受信して処理するサーバーサイドスクリプトのURLは、データはフォームと出力を印刷するコールバック関数から取得。

• <<
• 1
• 2
• >>