ajax でのデータ受け渡しに関して

質問

ajax でのデータ受け渡しに関して

わかりにくい内容で申し訳ありません。

現在、ＰＨＰで作成されているプログラムの中に、ajaxを組み込みたいと考えています。

処理の動きとしては、あるプルダウンが選択された場合、すぐさまその値をもとにしてＤＢへ
検索しに行くというものです。

通常、ＰＨＰだけの処理の場合、POST等を用いて、ボタンが押されたら違うphpファイルへ値を
送る事が可能かと思われます。

その処理をajax で選択されたらすぐに検索、表示というような動きをしたいと考えて
います。

但し、同じソース、画面上の中でなら、以下のような記述で表示させる事は可能かと
思われますが、HTMLで分割した画面で、上段で選択されたプルダウンの値をもとにして、検索
された結果を下段に表示させたいと考えています。

そもそも、ajaxでは同じ画面上での受け渡ししかできず、上記のように分割されたものでは
不可能なのでしょうか。。。

初歩的な内容で申し訳ありませんが、教えて頂きたいと思います。

《記述内容》

※ 現状では以下のようなサンプル記述をもとに、自画面（同一）上では表示が可能となっています。

<script>
function createXMLHttpRequest(){
if( window.XMLHttpRequest ){
return new XMLHttpRequest();
}else if( window.ActiveXObject ){
try{
return new ActiveXObject( "Msxml2.XMLHTTP" );
}catch(e){
return new ActiveXObject( "Microsoft.XMLHTTP" );
}
}
return null;
}
function getDataPost( serverURL, objID ,obj){
var ajax = createXMLHttpRequest();
ajax.open( "POST", serverURL );
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajax.onreadystatechange=function(){
if(( ajax.readyState == 4 ) && ( ajax.status == 200 )){
if(objID!=""){
var obj = document.getElementById( objID );
obj.innerHTML = ajax.responseText;
}
}
}
ajax.send( obj.name+"="+obj.value );
}
</script>

<select name="fuga" onchange="getDataPost('hogehoge.php','hoge',this)">
<option value="">---</option>
<option value="1">1</option>
<option value="2">2</option>
</select>

<div id="hoge"></div>

よろしくお願いします。

回答No.6

think49 · ベストアンサー

POST で渡す方法として、Ajaxを教えてもらったのではないのでしょうか？
質問がループしているようで、現状がよく分かりません…。

下記URLで似たような質問があります。参考になるかもしれません。

プルダウンの切り替えに関して | OKWave
http://okwave.jp/qa/q6065270.html

# 前質問は締め切ったようですね。お礼なしなので、回答者への通知メールは来ませんでしたが。

お礼

ありがとうございました。

回答No.5

yyr446

AからBへ渡す為にはどのようにしたら良いか教えて下さい。

==>グローバルスコープの変数なら普通に渡せるはずですけど...
(ただし、わたし先のロードが完了してる必要がありますが)

<frameset rows="50%,*" frameborder="no" border="0" framespcing="0">
<frame src="./framesetx1.htm" id="top" name="top" scrolling="yes">
<frame src="./framesetx2.htm" id="bottom" name="bottom" scrolling="yes">
</frameset>
で、
framesetx2.htmのjavascriptで、
var hoge="fuga";
という変数があったとして、

framesetx1.htmのjavascriptで、
　parent.bottom.hoge="Changed!";
とした後で、
framesetx2.htmのjavascriptで
alert(hoge);
すると、"Changed!"になります。

補足

ご回答ありがとうございます。

何度も申し訳ありません。。。。

上段Aから下段BへPOSTとして渡す場合はどのような記述なのでしょうか。。。

初歩的な事で大変申し訳ありませんが、教えて下さい。

よろしくお願いします。

回答No.4

yyr446

No.1,2です。失礼しました。確かに
×document.getElement（ｓ）ById( objID );
と、ビール二杯で酔っ払ってました。．．．．

同じ人の、既出の質問の続きだったんですね。

補足

申し訳ありません。　

もう少しだけ教えて下さい。

フレーム内(上A、下B)のAのプルダウンの選択により、Bの内容を書き換えたいと
考えています。

AからBへ渡す為にはどのようにしたら良いか教えて下さい。

勉強不足で申し訳ありませんが、教えて頂ければ幸いです。

よろしくお願いします。

回答No.3

fujillin

そのまま
window.parent.b.document.getElementById(～)　で取得可能なはずです。
#1様はタイポで　getElement(s)ById　としたみたいで、それで取得できなかっただけではないでしょうか？

前の質問
　http://okwave.jp/qa/q6051755.html
を締め切ってから次の質問をするのがルールでは？
サンプルで提示されているコードも＃3様の回答のままの転用ですが、どのようなhogehoge.phpで実行されたのでしょうか？
また、前のやり取りの内容が次の回答者に分かるように（充分に補足情報になり得る）、参照しておくのが礼儀では？（転用された方への礼儀も含めて）

補足

大変申し訳ありません。

ルールに従って記載するように致します。

ご指摘ありがとうございました。

回答No.2

yyr446

見当外れでなければ、訂正

フレームウィンドウのドキュメントに対して、getElementsById
はだめですね。HTMLDocumentエレメントになるみたい。

そこでこんなふうにしたら出来た。
　 var target;
　 try{
　 target=parent.b.document.querySelector("#"+ objID);
　 }
　 catch(e){
　 var divs=parent.b.document.getElementsByTagName(objID);
　 for(var i=0;i<divs.length;i++)
　 if(divs[i].id=="target") target=divs[i];
　 }
　 target.innerHTML= ajax.responseText;

※parent.b.documentは、parent.frames[1].documentみたいに指定する事も可

回答No.1

yyr446

HTMLで分割した画面って親ページのframeset内の別frameにそれぞれ、
別のHTMLを配置しているという事でしょうか。

それでも、親ページから見れば、同じHTML内ですから、

var obj = document.getElementById( objID );

の部分を、ちょっと変えるだけで、出来るはずです。
各フレームに名前がつけてあるなら。

<frameset>
<frame name="a" id="a" src="..">
<frame name="b" id="b" src="..">
</frmae>

aのフレーム内のjavascriptでｂのフレーム内の要素の取得は、

parent.b.document.getElementsById( objID )

みたいに出来そう