back
XMLHttpRequest Level 2(XHR2)による次世代Ajax通信 (4/5)
■フォームデータの送信
ちょっと変わったところで、「フォームの送信」を行わせてみましょう。最近では、サーバーとのやり取りはすべてAjaxを利用する形になりつつあります。フォームの送信も、Ajaxを使ってページ遷移なしに処理できるようにしたほうがスマートですね。
フォームの送信は、送信用のデータとして「FormData」というオブジェクトを作成します。これは、文字通りフォームの情報を管理するためのものです。このオブジェクトを作成し、そこにフォームに用意する値を追加していきます。
・オブジェクトの作成
・フォームデータの追加
こうして必要なだけデータを追加したら、XHR2でsendする際に引数としてFormDataオブジェクトを渡してやればいいのです。
実際の利用例を下にあげておきましょう。ここではid, name, passwordといった項目を作成して送信しています。ページを見ればわかることですが、ページ自体にはフォームはありません。FormDataさえあれば、フォーム送信をXHR2で行えるのです。
実際にフォームを送信する場合は、appendでフォーム内の各値を追加する必要はありません。<form>タグのDOMオブジェクトを取得し、それを引数に指定してnew FormDataすればOKです。例えば、
（※ちなみに、このFormDataは、XHR2専用ではなく、従来のXHRでも使うことができます）
フォームの送信は、送信用のデータとして「FormData」というオブジェクトを作成します。これは、文字通りフォームの情報を管理するためのものです。このオブジェクトを作成し、そこにフォームに用意する値を追加していきます。
・オブジェクトの作成
変数 = new FormData();
・フォームデータの追加
《FormData》.append( 名前 , 値 );
こうして必要なだけデータを追加したら、XHR2でsendする際に引数としてFormDataオブジェクトを渡してやればいいのです。
実際の利用例を下にあげておきましょう。ここではid, name, passwordといった項目を作成して送信しています。ページを見ればわかることですが、ページ自体にはフォームはありません。FormDataさえあれば、フォーム送信をXHR2で行えるのです。
実際にフォームを送信する場合は、appendでフォーム内の各値を追加する必要はありません。<form>タグのDOMオブジェクトを取得し、それを引数に指定してnew FormDataすればOKです。例えば、
new FormData(document.querySelector("#form1"));――こんな具合ですね。注意したいのは、フォーム内に用意する入力関係のタグは、必ずname属性を指定しておく、ということです。忘れるとうまく値が取り出せません。（※ちなみに、このFormDataは、XHR2専用ではなく、従来のXHRでも使うことができます）
(by. SYODA-Tuyano.)
※リストが表示されない場合
AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>タイトル</title>
<style>
h1 { font-size: 18pt; background: #AAAAEE; padding: 5px;}
</style>
<script type="text/javascript">
function doAction(e){
var formData = new FormData();
formData.append('id', 123);
formData.append('name', "tuyano");
formData.append('password', "hoge");
var xhr = new XMLHttpRequest();
xhr.open('POST', '/helo.php', true);
xhr.responseType = 'text';
xhr.onload = function(e) {
if (this.status == 200) {
document.querySelector("#msg").innerHTML =
this.response;
}
};
xhr.send(formData);
}
</script>
</head>
<body>
<header>
<h1>XHR2 Sample</h1>
</header>
<article>
<p id="msg"></p>
<button onclick="doAction();">Click</button>
</article>
</body>
</html>
| << 前へ | 次へ >> |