プロトタイプ-フォームrequest（）メソッド

このメソッドは、_Ajax.Request_を介してフォームをシリアル化し、フォームのアクション属性のURLに送信するための便利な方法です。 optionsパラメーターはAjax.Requestインスタンスに渡され、HTTPメソッドをオーバーライドし、追加のパラメーターを指定できます。

request（）に渡されるオプションは、基礎となるAjax.Requestオプションとインテリジェントにマージされます-

フォームにメソッド属性がある場合、その値はAjax.Requestメソッドオプションに使用されます。メソッドオプションがrequest（）に渡される場合、フォームのメソッド属性よりも優先されます。どちらも指定されていない場合、メソッドはデフォルトで「POST」になります。
parametersオプションで指定されたキーと値のペア（ハッシュまたはクエリ文字列として）は、シリアル化されたフォームパラメーターとマージされます（優先されます）。

構文

formElement.request([options]);

戻り値

新しいAjax.Requestを返します。

例1

次の例を考慮してください-

<html>
   <head>
      <title>Prototype examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>

      <script>
         function postIt() {
            var form = $('example');
            form.request();//done - it's posted
         }
      </script>
   </head>

   <body>
      <p>Click the button to see the result.</p>
      <br/>

      <form id = "example" action = "#" onsubmit = "return false">
         <fieldset>
            <legend>User info</legend>
            <div>
               <label for = "username">Username:</label>
               <input name = "username" id = "username" value = "Sulien" type = "text">
            </div>
            <div><label for = "age">Age:</label>
               <input name = "age" id = "age" value = "23" size = "3" type = "text">
            </div>
            <div>
               <label for = "hobbies">Your hobbies are:</label>
               <select name = "hobbies" id = "hobbies" multiple = "multiple">
                  <option>coding</option>
                  <option>swimming</option>
                  <option>hiking</option>
                  <option>drawing</option>
               </select>
            </div>
         </fieldset>
      </form>
      <br/>

      <input type = "button" value = "Post It" onclick = "postIt();"/>
   </body>
</html>

出力

例2

あなたのコールバック関数で何かをすることができる別の例があります-

<html>
   <head>
      <title>Prototype examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>

      <script>
         function postIt() {
            var form = $('example');
            form.request({
               onComplete: function() { alert('Form data saved!') }
            })
         }
      </script>
   </head>

   <body>
      <p>Click the button to see the result.</p>
      <br/>

      <form id = "example" action = "#" onsubmit = "return false">
         <fieldset>
            <legend>User info</legend>
            <div>
               <label for = "username">Username:</label>
               <input name = "username" id = "username" value = "Sulien" type = "text">
            </div>
            <div>
               <label for = "age">Age:</label>
               <input name = "age" id = "age" value = "23" size = "3" type = "text">
            </div>
            <div>
               <label for = "hobbies">Your hobbies are:</label>
               <select name = "hobbies" id = "hobbies" multiple = "multiple">
                  <option>coding</option>
                  <option>swimming</option>
                  <option>hiking</option>
                  <option>drawing</option>
               </select>
            </div>
         </fieldset>
      </form>
      <br/>

      <input type = "button" value = "Post It" onclick = "postIt();"/>
   </body>
</html>

出力

実施例３

オプションでメソッドとパラメーターを使用するだけで、HTTPメソッドをオーバーライドしてパラメーターを追加する方法を示すもう1つの例です。この例では、メソッドをGETに設定し、興味と趣味の2つの固定パラメーターを設定します。後者はすでにフォームに存在しますが、この値が優先されます。

<html>
   <head>
      <title>Prototype examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>

      <script>
         function postIt() {
            var form = $('example');
            form.request({
               method: 'get',

               parameters: {
                  interests:'JavaScript',
                  'hobbies[]':['programming', 'music']
               },
               onComplete: function() { alert('Form data saved!') }
            })
         }
      </script>
   </head>

   <body>
      <p>Click the button to see the result.</p>
      <br/>

      <form id = "example" action = "#" onsubmit = "return false">
         <fieldset>
            <legend>User info</legend>
            <div>
               <label for = "username">Username:</label>
               <input name = "username" id = "username" value = "Sulien" type = "text">
            </div>
            <div>
               <label for = "age">Age:</label>
               <input name = "age" id = "age" value = "23" size = "3" type = "text">
            </div>
            <div>
               <label for = "hobbies">Your hobbies are:</label>
               <select name = "hobbies[]" id = "hobbies" multiple = "multiple">
                  <option>coding</option>
                  <option>swimming</option>
                  <option>hiking</option>
                  <option>drawing</option>
               </select>
            </div>
         </fieldset>
      </form>
      <br/>

      <input type = "button" value = "Post It" onclick = "postIt();"/>
   </body>
</html>

出力

Prototype-form-request

プロトタイプ-フォームrequest（）メソッド

構文

戻り値

例1

出力

例2

出力

実施例３

出力

目次