自分用JavaScriptメモ・Ajax編

　要prototype.js。
　フォームの内容をPOSTでAjax通信したいとき。こんなのを作ってみた。

<script type="text/javascript">
<!--
function x(val) {
  if(confirm('send?')){
    var send_input = document.createElement('input');
    send_input.type = 'hidden';
    send_input.name = val;
    $("thisForm").appendChild(send_input);
    new Ajax.Updater('my_result', '送信先URL', {method: 'post', postBody: form.serialize("thisForm")});
  }
}
-->
</script>
<form id="thisForm">
  <input type="text" name="test" />
  <input type="button" value="テスト" onClick="x('abc')">
  <input type="button" value="test" onClick="x('xyz')">
</form>
<div id="my_result"></div>

　こんな風にしておくと、ボタン毎に操作を切り替えることが出来る。勿論、その先は送り先の言語に依存するけど。ミソは、formタグ内でactionやmethodを指定する必要がないことか。そして、submitもいらない。色々試してみたら、どうもtype="button"ではsubmit時にデータを送信しないっぽい。なので、この関数が呼び出されたら、Ajaxの通信を始める前にフィールドを生成するようにしてみた。
　一番参考になったのはここかも→http://issues.apache.org/struts/browse/WW-1167