Prototype-form-request
提供：Dev Guides
プロトタイプ-フォーム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>