YAHOO.util.Connect.setForm

YAHOO.util.Connect.setForm("form名")でFormのname属性値を渡すと、asyncRequestでAjax送信時に URLエンコードしたURLクエリを作成してくれます。prototype.jsのForm.serialize("form名")と同様の機能です。

一般的に、HTMLのフォームをサーバーへ送信する時には、 ブラウザが自動的にFORMの子要素内のnameとvalueの値のペアをURIエンコードして送信してくれます。 (参照 HTML 4.01/17.13.3,RFC 1738,RFC 2396,RFC 3986等)

しかし、Ajaxで送信する場合には、自動ではエンコードしてくれませんので、文字化けが起きたり、サーバー側で うまく受信できなかったりということが起きる原因となったりします。

そこでたとえば、
<form  type="text" name="testForm" id="testForm">
<input  type="text" name="syurui" value="りんご">
</form>
というtestFormという名前のFormがあった時に、YUIでは、 次のようにasyncRequestメソッドの前で oj.setForm("testForm") しておくと、
  YAHOO.util.Connect.setForm("testForm");
  YAHOO.util.Connect.asyncRequest(method,url,callback);
Formの子要素のすべての値が&名前=値というフォーマットで連結され、次のような文字列にエンコードされて送信されます。
&name=%E3%82%8A%E3%82%93%E3%81%94
YUIでは、送信時に手軽にURLエンコード文字列を作成するメソッドとしてYAHOO.util.Connect.setFormを用意しているわけです。

もっとも、これは、JavaScriptのencodeURI("りんご")、あるいは、encodeURIComponent("りんご")と書いたのと同じ(ただし、前者は「;/?:@&=+$,」を除きます)ですので、 この処理を手作業でコードへ書き込むこともできますが、各ライブラリの提供するこの.setFormのような機能を利用する方が簡単です。

では、とりあえずサンプルを動かしてみましょう。
サンプル



このサンプルのGETボタンで送信した時には次のようなURLが生成送信されます。
echo-usecgi2.cgi?name1=%E3%81%A8%E3%81%97%E3%82%8D%E3%81%86&ken=%E5%8C%97%E6%B5%B7%E9%81%93
またサンプルのPOSTボタンで送信した時には次のようなpostBodyデータが生成送信されます。
name1=%E3%81%A8%E3%81%97%E3%82%8D%E3%81%86&ken=%E5%8C%97%E6%B5%B7%E9%81%93


*このブラウザから送信時のURIエンコード処理は、以前の記事での サーバー送出時のURLエンコード処理とは異なりますがエンコードパターンは 同じです。

このサンプルのソースコードは次ページです。

 

ソース

前ページのソースは次の通りです。 asyncRequestメソッドの前にsetFormメソッドを実行しています。
<script type="text/javascript" 
src="../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript"
src="../build/connection/connection-min.js"></script>

<script type="text/javascript">
<!--
YAHOO.namespace('myTest');
YAHOO.myTest.send = function(msgDiv,method,url,form) {

var div = document.getElementById(msgDiv);
this.onOK = function(oj){
div.innerHTML="";
div.innerHTML= oj.responseText;
}
var callback ={
success: this.onOK
}
YAHOO.util.Connect.setForm(form);
var cObj = YAHOO.util.Connect.asyncRequest(method,url,callback);
}
//-->
</script>
<style type="text/css">
<!--
#testDiv {
border:dotted 1px #222222;
width:70%;
padding:8px;
font-size:12px;
background-color:#dddddd;
}

-->
</style>
<body>

<div id="testDiv">サーバーへ送信されたパラメータが
ここに表示されます</div>

<form name = "testForm" >
<input type = "button"
name ="sbmG" id="sbmG"
value ="GET送信"
onclick="YAHOO.myTest.send(
'testDiv','GET','./echo-usecgi2.cgi','testForm'
)">
<input type = "button"
name ="sbmP" id="sbmP"
value ="POST送信"
onclick="YAHOO.myTest.send(
'testDiv','POST','./echo-usecgi2.cgi','testForm'
)"><br>
名前
<input type="text" name="name1" id="name1"
value="としろう"><br>
都道府県
<select name="ken" id="ken">
<option value="北海道">北海道</option>
<option value="青森">青森</option>
<option value="秋田">秋田</option>
</select><br>
</form>



参考までに、送信したパラメータをレスポンスしているサーバー側のソース(Perl)は次のものです。
#!/usr/bin/perl

use CGI;

my $query = CGI->new;

my @params=$query->param(); #全パラメータ取得

print $query->header(-charset=>'utf-8');

foreach my $param (@params){
my $data =$query->param($param);
print $query->escapeHTML("$param -- $data ;"); #エスケープして出力

}




※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。