ajax でのデータ受け渡しに関して
わかりにくい内容で申し訳ありません。
現在、PHPで作成されているプログラムの中に、ajaxを組み込みたいと考えています。
処理の動きとしては、あるプルダウンが選択された場合、すぐさまその値をもとにしてDBへ
検索しに行くというものです。
通常、PHPだけの処理の場合、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ベストアンサー
- 回答日時:
POST で渡す方法として、Ajaxを教えてもらったのではないのでしょうか?
質問がループしているようで、現状がよく分かりません…。
下記URLで似たような質問があります。参考になるかもしれません。
プルダウンの切り替えに関して | OKWave
http://okwave.jp/qa/q6065270.html
# 前質問は締め切ったようですね。お礼なしなので、回答者への通知メールは来ませんでしたが。
No.5
- 回答日時:
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
- 回答日時:
No.1,2です。
失礼しました。確かに×document.getElement(s)ById( objID );
と、ビール二杯で酔っ払ってました。....
同じ人の、既出の質問の続きだったんですね。
この回答への補足
申し訳ありません。
もう少しだけ教えて下さい。
フレーム内(上A、下B)のAのプルダウンの選択により、Bの内容を書き換えたいと
考えています。
AからBへ渡す為にはどのようにしたら良いか教えて下さい。
勉強不足で申し訳ありませんが、教えて頂ければ幸いです。
よろしくお願いします。
No.3
- 回答日時:
そのまま
window.parent.b.document.getElementById(~) で取得可能なはずです。
#1様はタイポで getElement(s)ById としたみたいで、それで取得できなかっただけではないでしょうか?
前の質問
http://oshiete.goo.ne.jp/qa/6051755.html
を締め切ってから次の質問をするのがルールでは?
サンプルで提示されているコードも#3様の回答のままの転用ですが、どのようなhogehoge.phpで実行されたのでしょうか?
また、前のやり取りの内容が次の回答者に分かるように(充分に補足情報になり得る)、参照しておくのが礼儀では?(転用された方への礼儀も含めて)
No.2
- 回答日時:
見当外れでなければ、訂正
フレームウィンドウのドキュメントに対して、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
- 回答日時:
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でbのフレーム内の要素の取得は、
parent.b.document.getElementsById( objID )
みたいに出来そう
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
- JavaScript console.logがどうしても2つ機能しないのでアドバイスをくださいお願いします 2 2022/07/07 22:13
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
入力フォームの値をQRコードで...
-
jQueryを使いformでsubmitした...
-
Pythonを無料(安価)で学ぶ方...
-
ワードでA3横の画面にして、文...
-
バッチファイル 特定ウインドウ...
-
電子ピアノの音を録音したいの...
-
非同期通信で掲示板を作る際の...
-
データ受け渡しについて
-
以下のURL入れますか?皆さんは↓
-
c言語でペイントミノ
-
画像のドットの部分が抜けてい...
-
Chinapost こよパズルどう動か...
-
非同期通信を使うタイミングが...
-
Pythonのtkinterについて
-
RPA(PowerAutomate)の実装について
-
課題なのですがどなたかコード...
-
自作の地図をグーグルマップの...
-
Pythonのjupiter Labを使ってます
-
Pythonのプログラム初心者の問題
-
1w=1j.s
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
cakePHP+Ajax アップロード状...
-
ajax後、php,mysqlも一部再読み...
-
URLの中に&があると&に変...
-
Ajaxでsessionにいれた値が引き...
-
【JavaScript】confirmのボタン...
-
DirectXとOpenGLはどちらが動作...
-
非同期通信を使うタイミングが...
-
HTMLでDBからデータを表形式で...
-
リンクを押すとEXEファイルを実...
-
saved from url=(0013)abou
-
ASP.NET(VB)VBソースからJavas...
-
Javadcriptでwebサーバー側にあ...
-
カーソルの動きに合わせてDBか...
-
Ajaxでpostした内容のresponse...
-
jQueryのAjaxで通信の途中結果...
-
[JavaScript] preven...
-
php ob_flushが全く動作しない
-
webシステムでchrome
-
sleepの負荷
-
JQuery サーバー上にアップする...
おすすめ情報