人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

AjaxでデータのPOSTをして、「ありがとうございました」を表示したい

Ajaxでフォームに入力したメッセージを送信して、フォームを消して「ありがとう」メッセージを出したいと思います。

フォームの項目は「メッセージ(message)」一項目のみです。

具体的にコードを書いてください。
※ポストに成功したかどうかは気にしなくてもいいです。

●質問者: dingding
●カテゴリ:インターネット ウェブ制作
✍キーワード:Ajax MESSAGE 「ありがとう」 うご コード
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● lunlumo
●35ポイント ベストアンサー

こんな感じでしょうか。

<html>
<head>
 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 <title>test</title>
 <script type="text/javascript">
 function createHttpRequest() {
 var request = null;
 try {
 request = new XMLHttpRequest();
 } catch(e) {
 try {
 request = new ActiveXObject("Msxml2.XMLHTTP");
 } catch (e) {
 try {
 request = new ActiveXObject("Microsoft.XMLHTTP");
 } catch (e) {
 }
 }
 }
 return request;
 }
 function post() {
 var request = createHttpRequest();
 request.open('post', '/path/to/server', true);
 request.onreadystatechange = function() {
 if (request.readyState == 4) {
 var result = document.getElementById('result');
 if (request.status != 200) { // 必要なら
 result.innerHTML = 'エラーが発生しました';
 } else {
 result.innerHTML = 'ありがとうございました';
 document.getElementById('form').style.display = 'none';
 }
 }
 };
 request.send('message='+encodeURIComponent(document.getElementById('message').value));
 }
 </script>
</head>
<body>
 <div id="result"></div>
 <form id="form">
 <textarea id="message"></textarea><br/>
 <input type="button" value="送信" onclick="post()"/>
 </form>
</body>
</html>

http://q.hatena.ne.jp

◎質問者からの返答

ありがとうございます!

ちなみに、前半のcreateHttpRequestでやっているのは、

ブラウザごとに使うクラス?を使い分けているのでしょうか?

catch (e)はエラーが起きたら…という意味でしょうか?

eが定義されていないように思えたのでどうなのかなと思いました。


2 ● lunlumo
●35ポイント

try {...} catch(e) {...}の意味はその通りで,eについては,eをプロパティーに持つオブジェクトが生成されてスコープの先頭に追加されるそうです。

http://igeta.cocolog-nifty.com/blog/2007/07/scope.html

http://web.archive.org/web/20061018193413/www.hawk.34sp.com/stdp...

◎質問者からの返答

ありがとうございます!

とてもためになりました。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ