- カウンター
- 大ベテラン
- 会議室デビュー日: 2004/02/19
- 投稿数: 123
|
投稿日時: 2006-10-31 10:07
http://www.atmarkit.co.jp/fdotnet/special/ajax/ajax_02.html
上記ページを参考にajaxを試してみました。
結果ページからjavascriptを呼び出して、データ検索ページを起動
そこで、データ検索をした結果を返すものを作りました。
ですが、検索結果をResponse.Writeで返すと、
受信したjavascriptのxmlHttp.responseTextの中身が検索結果＋HTMLになっています。
検索結果のみを結果ページに表示したい場合はどのようにすればよいのでしょうか？
| コード: |
|
■■■javascript■■■
function SyohinSearch(){
// XMLHttpRequestオブジェクトの生成
try {
// IEの場合
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
// Firefoxなどそのほかのブラウザの場合
xmlHttp = new XMLHttpRequest();
}
// XMLHttpRequestオブジェクトの状態が変更されたタイミング
// で行うべき処理を定義
xmlHttp.onreadystatechange = function() {
// データ受信に成功した場合、
// 受信データをテキストボックス「結果」に反映
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
var data = xmlHttp.responseText;
document.getElementById("結果").value = data;
}
}
}
// HTTP GETメソッドでpostnum_server_vb.aspxにデータを送信
xmlHttp.open("GET", "DataSeach.aspx?prm="+ document.Form1.prm1.value, true);
xmlHttp.send(null);
}
■■■検索ページ■■■
Response.Write(検索結果)
|
[ メッセージ編集済み 編集者: カウンター 編集日時 2006-10-31 10:47 ]
|
|---|
- かるあ
- ぬし
- 会議室デビュー日: 2003/11/16
- 投稿数: 1190
- お住まい・勤務地: センガワ→ムサシノ
|
投稿日時: 2006-10-31 10:20
html タグが出力されてしまうのは DataSeach.aspx に html タグが書いてあるからじゃないですか？
いらないなら書かなければ出力されないと思います。
あとは Response.Write() 後に Response.End() してしまうとか。
すでにご存知かも知れませんが、
ASP.NET には Atlas という AJAX の実装系があるので、こちらも調べてみると良いかも知れません。
|
|---|
- カウンター
- 大ベテラン
- 会議室デビュー日: 2004/02/19
- 投稿数: 123
|
投稿日時: 2006-10-31 10:52
かるあさん、ありがとうございます。
Response.End()を追加することで、 html は除かれました。
ただ、結果をテキストボックスではなく、ラベルに表示しようとすると
なにも表示されません。
document.getElementById("結果ラベル").innertext = data
上記の記述で以前は表示できていたような気がするのですが
記述が間違っているのでしょうか？
|
|---|
- かるあ
- ぬし
- 会議室デビュー日: 2003/11/16
- 投稿数: 1190
- お住まい・勤務地: センガワ→ムサシノ
|
投稿日時: 2006-10-31 11:22
| 引用: |
|
カウンターさんの書き込み (2006-10-31 10:52) より:
document.getElementById("結果ラベル").innertext = data
|
とりあえず、書き忘れ（間違え）かもしれませんが、
| コード: |
|
document.getElementById("結果ラベル").innerText = data;
|
alert(data); したらどうなります？
|
|---|
- カウンター
- 大ベテラン
- 会議室デビュー日: 2004/02/19
- 投稿数: 123
|
投稿日時: 2006-10-31 11:36
| コード: |
|
document.getElementById("結果ラベル").innerText = data;
|
上記でも、値がセットされません。
| コード: |
|
document.getElementById("結果ラベル").innerHTML = data;
|
上記だと値がセットされるのですが、フォント色を青にしたいところが黒になってしまいます。
dataにフォントタグ文字列を結合して、innerHTMLに渡せば青ででるのかな？
やってみます。
ちなみに、alert(data);には、ちゃんと結果文字列が入っています。
|
|---|
- かるあ
- ぬし
- 会議室デビュー日: 2003/11/16
- 投稿数: 1190
- お住まい・勤務地: センガワ→ムサシノ
|
投稿日時: 2006-10-31 11:58
| 引用: |
|
カウンターさんの書き込み (2006-10-31 11:36) より:
| コード: |
|
document.getElementById("結果ラベル").innerText = data;
|
|
最初に聞けばよかった。。。"結果ラベル"って何ですか？
SPAN か何かなら問題ないはずなんだけれど。。。
とりあえずこれは出来た
| コード: |
|
<span id="aaa"></span>
<input type="button" onclick="var l = document.getElementById('aaa'); l.innerText = 'abc'; l.style.color = 'blue';" />
|
_________________
かるあ のメモ と スニペット
|
|---|
- カウンター
- 大ベテラン
- 会議室デビュー日: 2004/02/19
- 投稿数: 123
|
投稿日時: 2006-10-31 14:37
すいません、"結果ラベル"って、SPANです。
| コード: |
|
document.getElementById("結果ラベル").innerText = data;
|
上記の場合、IE6では"結果ラベル"にdataの中身が表示されますが、FireFoxでは表示されません。
| コード: |
|
document.getElementById("結果ラベル").innerText = data;
document.getElementById("結果ラベル").textContent = document.getElementById("結果ラベル").innerText;
document.getElementById("結果ラベル").style.color = 'blue';
|
上記のようにすると、FireFoxでも表示されますが、文字色が指定済みの青ではなく黒になります。
HTMLを見てみると
| コード: |
|
<span id="lblSYOMEIKR"><font color="Blue"></font></span>
|
上記のようになっており、SPANにブラウザに表示されている文字列は書き込まれていません。
IE6だと、どうかなとおもったのですが、HTML上ではFireFoxと同じでした。
とりあえず、IFでもFireFoxでも動くので、以下の記述にしておきます。
| コード: |
|
document.getElementById("結果ラベル").innerText = data;
document.getElementById("結果ラベル").textContent = document.getElementById("結果ラベル").innerText;
|
どうも、ありがとうございました！！
|
|---|
- かるあ
- ぬし
- 会議室デビュー日: 2003/11/16
- 投稿数: 1190
- お住まい・勤務地: センガワ→ムサシノ
|
投稿日時: 2006-10-31 23:39
| 引用: |
|
カウンターさんの書き込み (2006-10-31 14:37) より:
上記の場合、IE6では"結果ラベル"にdataの中身が表示されますが、FireFoxでは表示されません。
|
FireFox でしたか。。。
| 引用: |
|
とりあえず、IFでもFireFoxでも動くので、以下の記述にしておきます。
| コード: |
|
document.getElementById("結果ラベル").innerText = data;
document.getElementById("結果ラベル").textContent = document.getElementById("結果ラベル").innerText;
|
|
FireFox では innerText が undefined になります。
なのでどうして両方のプロパティに値をセットしているかコードとして書いたほうが理解しやすい気がします。
| コード: |
|
var label = document.getElementById("結果ラベル");
if (label.innerText != undefined) {
label.innerText = data;
} else {
label.textContent = data;
}
|
# label.innerText != undefined はブラウザを判定した方がいいかも。。。
_________________
かるあ のメモ と スニペット
|
|---|
