ベストアンサー

XMLHttpRequestを利用してPHPへ値を渡したい

2007/05/25 17:10

お手数とは思いますが、御導きの程、宜しくお願いします。 ◆プログラムソース削除対象になるとは思いますが文字数制限により、別途アップローダーをお借りして、其処にアップロード致しました。誠に申し訳なく思います。サイト：小さなアップローダー　様ＵＲＬ：http://smallup.dip.jp/uploader/ NAME：smallup0515.zip コメント：パソコン何でも質問箱回答者様向けファイル名：パソコン何でも質問箱.zip downloadパス：okokok 内容： test.html（フォームに値を入力する） test.php（XMLHttpRequestから値を受け取り書き込む） test.js（XMLHttpRequestを利用しPHPへ値を渡す） task.csv（書き込まれた値を保存する） xmlhttp.js(http通信用共通関数) 以上です。ウィルスチェック済みです。 ◆どうしたいかタイトル通りXMLHttpRequestを利用しPHPへ値を送信させたいと思っております。サイト等を参考に1週間程模索してみたのですが、力量不足でなかなか思い通りになりません。 PHPのプログラムでは値さえ取得できれば、処理を行うことができたので var_dump($_POST)でPOSTされているかを調べたところ空の状態でした。そこで、値を送信するAjax（JavaScript）側が問題ではないかと思い調べたところ、 open()関数の後にsetRequestHeader()関数を利用しないとブラウザにより値が送信されないことが分かりました。しかし、どうもうまく動かず、相変わらずvar_dump($_POST)には空の状態です。 test.jsからtest.phpへ値を渡すにはどのように変更する必要があるのでしょうか？お手数とは思いますが、ご教授ください。

merus
お礼率100% (12/12)

JavaScript
回答数4
ありがとう数5

みんなの回答 （4）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

arenani_sorenani
ベストアンサー率73% (58/79)

2007/05/28 14:31 回答No.4

私も再度試してみましたが 2点ほど。 IEでは気づきませんでしたが期限:<input type = "text" name = "time">の部分にidが抜けてましたすみません。期限:<input type="text" id="time" name="time" /> に変更してください。（IEは寛容なのでnameをidとして認識します）それともうひとつ httpObj.setRequestHeader("Content-Type","application/x-www-form-urlencoded");のところを良く確認してください。もしこの回答をコピーしたままだとテキストエディターなどへ転記した場合に ?www-form-urlencoded");? となっている場合があるようです。それと念のため、htmlやjsファイルは文字コードをSIFT-JISではなく UTF-8で保存してからサーバーに上げてくださいでは。

質問者

お礼 2007/05/28 15:17

いつも迅速な回答に感謝するばかりです。オブジェクト.setRequestHeader()の部分については昨日気づきその点は問題ありませんでした！＞それと念のため、htmlやjsファイルは文字コードをSIFT-JISではなく＞UTF-8で保存してからサーバーに上げてくださいこの点に関しましては、以前文字化けに悩まされ、エディターで保存する際に改めてUTF-8にすることを覚えました。期限:<input type="text" id="time" name="time" /> に変更したところ、上手く送信できました！！色々場違いな箇所を見ては試していましたが、技術不足を痛感するばかりです。本当に助かりました。頂いたコードを参考にさせて頂き、勉強に励みたいと思います。何度もお付き合いくださいまして、本当にありがとうございました。

ログインすると、全ての回答が全文表示されます。

その他の回答 (3)

arenani_sorenani
ベストアンサー率73% (58/79)

2007/05/27 14:44 回答No.3

連絡用にレスしておきます結果を教えて下さい。社会人一年目ですか、頑張ってください。多分ですがあなたのソースでは２度リクエストを送信しているように見えますしかも同じ変数を、２度めのオブジェクトで上書きしてます。その辺が原因かな・・ PHPの環境は手元にないのでASP.NETで確認しましたが私の書いたソースでは少なくても送信はできるハズ？です。

質問者

お礼 2007/05/28 11:57

初めに、補足にレスを含めた内容を書き込みしたこと、お詫び申し上げます。 PHPのプログラムは値を受け取り表示させるのみに書き換えしたもの test.php---------------- <?php //JavaScriptからPOSTされているか判断する var_dump($_POST); $time = $_POST['time']; //POSTされた中身を見る var_dump($time); print($time); ?> ---------------------- 共通関数とHTMLは頂いたソースをそのままインデントしただけのプログラムを用いています。動作環境は PHPを動作させるWEB-SERVER：xampp xamppで利用している機能：Apache,mySQL OS：VISTA business ブラウザ：Sleipnir(IE),Firefox(Netscape) あまり関係は無いと思いますが、参考になればと思い追記しました。どうしてよいのかわからず、周りにJavaScriptやAjax等の言語や技術を会得している方がいませんので、聞くに聞けず困り果てております。リクエストが２か所あることについては不思議に思っていませんでした。理由はPHPへ送信する為のリクエストと保存ファイルを読みだす為のリクエストは別々で、同じ原理で用途が違うのであればリクエストはいくつでも出せるものだと思っていました。（プログラムが可笑しいかもしれませんが）また、同じ変数名にしていたのはfunction名で切り分けされているので１)PHPへ飛ばす、２)ファイルを表示の１)の後に２)が呼ばれるので、初期化してくれるだろうと思い初期化された後、次のリクエストを実行するだろうと思ったからです。ご指摘通り、プログラムを書く上でまずいとは感じましたが…。自分のプログラムを変数名を変えてみて試してみましたが相変わらず空の状態でした。頂いたソースを実行していたのですが、補足に記述したとおりの結果になりました。

質問者

補足 2007/05/28 10:23

エール、有難う御座います！昨日教えて頂いたソースを実行してみたところ、IEベースのブラウザ（スレイプニル）ではPHPまでは到達しているみたいですが、PHPのソースにvar_dump($_POST)してみますと array(0) { }の様に空を示されました。また、focus()が問題なのかは定かではありませんが、Firefoxでは未入力チェックの時点でチェックがされず、PHPまで到達できていないのかinnerHTML部に何も表示されませんでした。もちろんarray(0) { }の様な表示もされていませんでした。 2時間程度調べてみたのですが、なかなか打開策がなく、良いお返事を書くことができず申し訳なく思います。技術不足な私ではありますが、頭が一点集中気味で他の打開策を講じられる程知識も無く、ご迷惑だとは思いますがもうしばらくお力添えを頂けないでしょうか

ログインすると、全ての回答が全文表示されます。

arenani_sorenani
ベストアンサー率73% (58/79)

2007/05/26 19:26 回答No.2

かなりお困りのようなので・・・以下のソースで送信を確認してください。 phpの方は省きますがtest用に単純に受け取ったデータを返すように書き換えてください返答はDIVのinnerHTMLになりますので<HTML><BODY>とかは要らないですよ・・・外部js　xmlhttp.js　（＊注　手を加えてます） ----------------------------------------------------------- // HTTP通信用、共通関数 function createXMLHttpRequest(Func,arg1){ var XMLhttpObject = null; try{ XMLhttpObject = new XMLHttpRequest(); }catch(e){ try{ XMLhttpObject = new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try{ XMLhttpObject = new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){ return null; } } } if (XMLhttpObject) { XMLhttpObject.onreadystatechange = function(){ if ((httpObj.readyState == 4) && (httpObj.status == 200)){ eval(Func+"("+arg1+")"); } } } return XMLhttpObject; } // document.getElementById function $(tagId,parantObj){ if(parantObj){ return parantObj.document.getElementById(tagId); }else{ return window.document.getElementById(tagId); } } -------------------------------------------------------------- test.html ------------------------------------------------------------- <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html;charset=UTF-8"> <TITLE>登録画面</TITLE> <script type="text/javascript" src="xmlhttp.js"></script> <script type="text/javascript">  </script> </HEAD> <BODY> <form onSubmit="return inputCheck();"> 期限:<input type = "text" name = "time"> <input type = "submit" value = "登録"> </form> <hr> <div id="result"></div> </BODY> </HTML> ---------------------------------------------------------------

質問者

お礼 2007/05/27 11:58

ソース修正、ソースの指摘などアドバイス有難う御座います。現在、自宅用のPCで閲覧させて頂いたのですが、自宅のPCでは alphaなどが動作しない程、貧弱なPCで確認を行えなかったので月曜日に実際の確認をさせて頂きます。ソースを拝見させて頂きましたが、 >DIVのinnerHTMLになりますので<HTML><BODY>とかは要らないですよ・・・申し訳なく思います。確認していくなかで、自ソースにそのまま記述したままになってたようです。彼是どのように考えて作ったのか、どのように確認していたのかを理解してもらえるかな？と思い、そのままにしていました。指摘に感謝するとともに、次の段階での質問にも役立てたく思います！共通関数の方は、怪しいですが分かりかけてきました！ test.js部分の入力チェックのところをfocusに変える方法は submitをクリックされると、エラー処理の場合でも処理が流れてしまうのを防ぐためなのかな？と解釈させてもらい、勉強になりました。自分のプログラムではfunctionを多様して1つ1つの処理を自分に分かりやすくしていたのですが、無駄も多いなと熟熟思いました。大掛かりな処理をしていく上で、ある程度纏める努力もできるよう頑張っていきたいと思います。確認しでき次第、改めてお礼申し上げます。

ログインすると、全ての回答が全文表示されます。

taketan_mydns_jp
ベストアンサー率58% (450/773)

2007/05/25 18:52 回答No.1

具体的なソースが無いので概要だけ。質問者さんの指摘通り、POSTで送信するにはsetRequestHeader()でPOSTヘッダが必要です。charsetがUTF-8の場合は下のような感じです。charsetは省略可能ですね。 xmlObj.setRequestHeader("content-type", "application/x-www-form-urlencoded;charset=UTF-8"); 参考URL http://web.paulownia.jp/script/ajax/xmlhttp3.html http://itpro.nikkeibp.co.jp/article/COLUMN/20060607/240192/ 頑張って下さい。

質問者