Javascript

【Javascript】YUIフォームのエンコーディング処理

Javascript関連情報

更新日：2007年10月16日

YUIフォームのエンコーディング処理

高橋登史朗

YUIでは、送信時に手軽にURLエンコード文字列を作成するメソッドとしてYAHOO.util. Connect.setFormが用意されています。

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 ;"); #エスケープして出力

  }

マネしたくなるアイデア住宅

住まいには、人の個性がよく現れるもの。同じ空間をどのように使うかで、雰囲気も、快適さも大きく変わってくる。ここでは、「建築家と家を建てる」ガイドの川畑博哉氏が厳選した10軒を紹介し、建築家それぞれのこだわりのポイントを紹介しよう。建築のプロたちが考え出した、マネしたくなるアイデアが満載！さぁ、いますぐチェック！