javascript についてあまりわからないですが、javascript で以下のようなことをしたいですが、よくやり方がわかないので、わかっている方は教えていただきたいです。この部分には、DBからデータを取り出す処理が入っているとする form でsubmitをすると、id が sampleのところの処理を更新してくれるようなjavascript はどうやって実現しますか？よろしくお願いします。

Ajaxは途中まで、javascriptと同じの処理をします。例：こんな感じでいいと思います

指定されるdiv の部分の再読み込み処理について

解決済

質問者：ikutame
質問日時：2009/09/15 13:56
回答数：3件

javascript についてあまりわからないですが、javascript で以下のようなことをしたいですが、よくやり方がわかないので、わかっている方は教えていただきたいです。
<div id="sample">
この部分には、DBからデータを取り出す処理が入っているとする
</div>

form でsubmitをすると、id が sampleのところの処理を更新してくれる
ようなjavascript はどうやって実現しますか？
よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： yyr446
回答日時：2009/09/15 19:51

超適当に書いて見た。

適切に直してね
<script>
function Getdata() {
var xmlHttp = (window.ActiveXObject)?new ActiveXObject("Msxml2.XMLHTTP"):new XMLHttpRequest();
xmlHttp.open("POST","DB_Access.php",true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
var Querydata="prm1=val1&prm2=val2&prm3=val3"; //<=から取ればよい。
xmlHttp.send("Querydata");
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
document.getElementById("sample").innerHTML=xmlHttp.responseText;
}
};
}
</script>
<form action="#">
------
<input type="submit" onclick="Getdata();return false;">
</form>

- 0
- 件

通報する

No.2

回答者： taporu
回答日時：2009/09/15 15:00

Ajaxは途中まで、javascriptと同じの処理をします。

例：
<html>
<head>
<script type="text/javascript">

</script>
</head>
<body>
<input type="bottom" value="クリック" onclick="DBdata();">
<div id="sample"></div>
</body>
</html>

こんな感じでいいと思います

- 0
- 件

通報する

No.1

回答者： yyr446
回答日時：2009/09/15 14:23

これはAJAXというやつですね。

　javascriptで直接DBからデータを取り出すような事は普通は
しません。サーバーサイドのプログラムを使います。
　javascriptは、フォームに入力されたデータを、非同期通信リクエストでサーバーサイドのプログラムにGET又はPOSTして、レスポンスのDOM要素を<div>の要素にセットするという仕事をさせます。
　サーバーサイドのプログラムは、送信されたデータを基にDBアクセスして結果をXHTMLで出力します。

※AJAXを検索すれば具体的な方法が見つかります。

この回答への補足

返答してくれてありがとうございます。

実は、DBにアクセス処理も書いてありますが、ただ、formのSubmitをおしたら、どういうに<div> の部分を再度読み込みさせるのが、よくわからないですが、button押すというイベントから、どうやってdiv の
部分を起動するのを解決すれば、いいでしょうか？

ありがとうございます。

補足日時：2009/09/15 14:33

通報する