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


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

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

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

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2009/03/24 17:48:25
  • 終了:2009/03/25 03:07:43

ベストアンサー

id:lunlumo No.1

lunlumo回答回数107ベストアンサー獲得回数142009/03/24 22:01:20

ポイント35pt

 こんな感じでしょうか。

<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

id:dingding

ありがとうございます!

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

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

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

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

2009/03/25 00:34:30

その他の回答(1件)

id:lunlumo No.1

lunlumo回答回数107ベストアンサー獲得回数142009/03/24 22:01:20ここでベストアンサー

ポイント35pt

 こんな感じでしょうか。

<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

id:dingding

ありがとうございます!

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

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

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

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

2009/03/25 00:34:30
id:lunlumo No.2

lunlumo回答回数107ベストアンサー獲得回数142009/03/25 01:18:47

ポイント35pt

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...

id:dingding

ありがとうございます!

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

2009/03/25 03:07:37

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません