Ajax.Requestでのフォームデータ送信サンプル(postBodyへの設定)

prototype.js Ajax

Ajax.Requestでのフォームデータ送信サンプルを載せておきます。ポイントはForm.serializeメソッドです。これがフォーム内容をpostBodyプロパティに適合した文字列に変換してくれます。

[test.htm]UTF-8で記述
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script language="javascript" src="./prototype.js" charset="utf-8"></script>
<script language="javascript">
function test(fm){
  new Ajax.Request('test.jsp', {
    method : 'post',
    postBody : Form.serialize(fm),//Form.serializeメソッドを使う
    onComplete : function(req){
      $('test').innerHTML = req.responseText;
    }
  });
}
</script>
</head>
<body>
<form>
<input type="text" name="TEXT" value="テキストボックス"/>
<textarea name="TEXTAREA">テキストエリア</textarea>
<input type="checkbox" name="CHECKBOX" value="CHECKED!" checked/>
<input type="radio" name="RADIO" value="RADIO1" checked/>
<input type="radio" name="RADIO" value="RADIO2"/>
<select name="SELECT">
  <option value="OPTION1">オプション１</option>
  <option value="OPTION2" selected>オプション２</option>
  <option value="OPTION3">オプション３</option>
  <option value="OPTION4">オプション４</option>
</select>
<select size="3" name="SELECTSIZE" multiple>
  <option value="OPTION1" selected>オプション１</option>
  <option value="OPTION2">オプション２</option>
  <option value="OPTION3" selected>オプション３</option>
  <option value="OPTION4">オプション４</option>
</select>
<button onclick="test(this.form);">TEST</button>
</form>
<div id="test"></div>
</body>
</html>

[test.jsp]UTF-8で記述
<%@ page contentType="text/plain;charset=utf-8" %>
<%@ page import="java.util.*, java.io.*" %>
<%!
//2バイト文字Unicode変換
public String strEncode(String strVal)
  throws UnsupportedEncodingException{
  if(strVal == null){
    return ( null);
  }else{
    return (new String(strVal.getBytes("ISO-8859-1"), "UTF-8"));
  }
}
%>
<%
//キャッシュ無効化
Calendar today = new GregorianCalendar();
response.setDateHeader("Last-Modified", today.getTime().getTime());
response.setDateHeader("Expires", 0);
response.setHeader("Pragma","no-cache");
response.setHeader("Cache-Control","no-cache");

//受信フォーム内容すべてをテーブルに書き出す
Map parameterMap = request.getParameterMap();
out.print("<table border><tr><th>key</th><th>value</th></tr>");
if(parameterMap != null){ 
  for ( Iterator i = parameterMap.keySet().iterator(); i.hasNext();) {
    String key = (String)i.next();
    String[] values = (String[])parameterMap.get(key);
    String str = "";
    if(values != null){ 
      for(int j = 0; j < values.length; j++){ 
        str += strEncode(values[j]) + ",";
      } 
    } 
    out.print("<tr><td>" + key + "</td><td>" + str + "</td></tr>");
  }
}
out.print("</table>");
%>