onChange に関して

質問

onChange　に関して

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

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

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

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

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

同じソースの中でなら、例えば選択された値を別のテキストに表示するというような事はした
事はありますが、そもそもJavascript でPUT　処理のような事は可能なのでしょうか？？？

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

よろしくお願いします。

回答No.7

think49 · ベストアンサー

XMLHttpRequest(Ajax) の解説を下記URLにまとめました。

XMLHttpRequest()
http://vird2002.s8.xrea.com/test/XMLHttpRequest.html

yurix_1さんは継続質問されているようなので、リンクを貼っておきます。

ajax でのデータ受け渡しに関して | OKWave
http://okwave.jp/qa/q6058023.html

# fujillinさん のおかげで気が付きました。感謝！

回答No.6

think49

#2, 5 です。
#5 を一部訂正します。

訂正前:　・new DOMParser() で [object Document] を生成する。(Firefox独自拡張)
訂正後:　・new DOMParser() で [object Document] を生成可能なパーサを返す。(Firefox独自拡張)

回答No.5

think49

#2 です。

XMLHttpRequest() でHTML文書を得る場合は、responseText で文字列リテラルを受け取ってください。

XMLHttpRequest
http://www.w3.org/TR/XMLHttpRequest/#the-responsetext-attribute
XMLHttpRequest - MDC
https://developer.mozilla.org/ja/XMLHttpRequest

文字列リテラルをDOMノードに変換する方法は、いくつかあります。

・HTMLDocument.innerHTML でノードを流し込む。(HTML5標準)
・document.implementation.createHTMLDocument() で [object HTMLDocument] を生成する。(HTML5標準)
・document.implementation.createDocument() で [object Document] を生成する。(DOM L3 Core標準)
・document.implementation.createLSParser() で [object Document] を生成する。(DOM L3 Load and Save標準)
・new DOMParser() で [object Document] を生成する。(Firefox独自拡張)
・new ActiveXObject("htmlfile") で [object HTMLDocument] を生成する。(IE専用)

※ Firefox, Opera は [object Document] を [object XMLDocument] に置き換えてください。

下記URLにサンプルをまとめました。

createHTMLDocument(), createDocument()
http://vird2002.s8.xrea.com/test/document.implementation.createHTMLDocument.html

new DOMParser(), new ActiveXObject("htmlfile") はシンプルで不具合がなく、使いやすい印象を持ちました。
しかし、HTML文書を [object Document] (XML文書のオブジェクト) として出力するのは好ましくないので、createHTMLDocument() と組み合わせる必要はあると思います。

createLSParser() はまだ使いこなせていません。
唯一対応しているはずの Opera v10.60 で動作しないのはコードの書き方に問題があるだけかも…。

回答No.4

yambejp

＞受け取り側の表示はどのように記述すればよいか？

<div id="hoge"></div>
に表示したい内容をhtml形式で吐き出せばいいですよね？

回答No.3

yambejp

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

think49

> そもそもJavascript でPUT　処理のような事は可能なのでしょうか？
「POSTメソッド」「PUTメソッド」のどちらを希望しているのでしょう？

とりあえず、XMLHttpRequest() で実装可能です。

XMLHttpRequest の利用 - MDC
https://developer.mozilla.org/ja/Using_XMLHttpRequest

同期処理なら、HTMLFormElement.submit() でもいいと思います。

form.submit - MDC
https://developer.mozilla.org/ja/DOM/form.submit

補足

>「POSTメソッド」「PUTメソッド」のどちらを希望しているのでしょう？

申し訳ありません。　ＰＯＳＴメソッドを希望しています。

ＸＭＬを利用しなければ実現は難しいでしょうか。。。　可能であれば、javascript あるいは
ajax あたりで開発をしたいと考えているのですが。。。。

初歩的な質問で申し訳ありません。

教えて下さい。

回答No.1

fujillin

ajax　あたりをキーに検索すれば吉。