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

解決済

質問者：merus
質問日時：2007/05/25 17:10
回答数：4件

お手数とは思いますが、御導きの程、宜しくお願いします。

◆プログラムソース
削除対象になるとは思いますが文字数制限により、
別途アップローダーをお借りして、其処にアップロード致しました。
誠に申し訳なく思います。
サイト：小さなアップローダー　様
ＵＲＬ：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へ値を渡すにはどのように変更する必要があるのでしょうか？
お手数とは思いますが、ご教授ください。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.4ベストアンサー

回答者： arenani_sorenani
回答日時：2007/05/28 14:31

私も再度試してみましたが

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で保存してからサーバーに上げてください

では。

- 0
- 件

通報する

この回答へのお礼

いつも迅速な回答に感謝するばかりです。

オブジェクト.setRequestHeader()の部分については昨日気づき
その点は問題ありませんでした！

＞それと念のため、htmlやjsファイルは文字コードをSIFT-JISではなく
＞UTF-8で保存してからサーバーに上げてください
この点に関しましては、以前文字化けに悩まされ、エディターで
保存する際に改めてUTF-8にすることを覚えました。

期限:<input type="text" id="time" name="time" />
に変更したところ、上手く送信できました！！

色々場違いな箇所を見ては試していましたが、技術不足を痛感する
ばかりです。
本当に助かりました。
頂いたコードを参考にさせて頂き、勉強に励みたいと思います。

何度もお付き合いくださいまして、本当にありがとうございました。

通報する

お礼日時：2007/05/28 15:17

No.3

回答者： arenani_sorenani
回答日時：2007/05/27 14:44

連絡用にレスしておきます

結果を教えて下さい。

社会人一年目ですか、頑張ってください。

多分ですが
あなたのソースでは２度リクエストを送信しているように見えます
しかも同じ変数を、２度めのオブジェクトで上書きしてます。
その辺が原因かな・・
PHPの環境は手元にないのでASP.NETで確認しましたが
私の書いたソースでは少なくても送信はできるハズ？です。

この回答への補足

エール、有難う御座います！
昨日教えて頂いたソースを実行してみたところ、IEベースのブラウザ（スレイプニル）
ではPHPまでは到達しているみたいですが、PHPのソースにvar_dump($_POST)してみますと
array(0) { }の様に空を示されました。
また、focus()が問題なのかは定かではありませんが、Firefoxでは未入力チェックの時点で
チェックがされず、PHPまで到達できていないのかinnerHTML部に何も表示されませんでした。
もちろんarray(0) { }の様な表示もされていませんでした。

2時間程度調べてみたのですが、なかなか打開策がなく、良いお返事を書くことができず
申し訳なく思います。
技術不足な私ではありますが、頭が一点集中気味で他の打開策を講じられる程
知識も無く、ご迷惑だとは思いますがもうしばらくお力添えを頂けないでしょうか

補足日時：2007/05/28 10:23

通報する

- 0
- 件

通報する

この回答へのお礼

初めに、補足にレスを含めた内容を書き込みしたこと、お詫び申し
上げます。

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 11:57

No.2

回答者： arenani_sorenani
回答日時：2007/05/26 19:26

かなりお困りのようなので・・・

以下のソースで送信を確認してください。
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>
---------------------------------------------------------------

- 0
- 件

通報する

この回答へのお礼

ソース修正、ソースの指摘などアドバイス有難う御座います。

現在、自宅用のPCで閲覧させて頂いたのですが、自宅のPCでは
alphaなどが動作しない程、貧弱なPCで確認を行えなかったので
月曜日に実際の確認をさせて頂きます。

ソースを拝見させて頂きましたが、
>DIVのinnerHTMLになりますので<HTML><BODY>とかは要らないですよ・・・

申し訳なく思います。
確認していくなかで、自ソースにそのまま記述したままになってたようです。
彼是どのように考えて作ったのか、どのように確認していたのかを
理解してもらえるかな？と思い、そのままにしていました。

指摘に感謝するとともに、次の段階での質問にも役立てたく思います！
共通関数の方は、怪しいですが分かりかけてきました！

test.js部分の入力チェックのところをfocusに変える方法は
submitをクリックされると、エラー処理の場合でも処理が流れて
しまうのを防ぐためなのかな？と解釈させてもらい、勉強になりました。

自分のプログラムではfunctionを多様して1つ1つの処理を自分に分かりやすく
していたのですが、無駄も多いなと熟熟思いました。
大掛かりな処理をしていく上で、ある程度纏める努力もできるよう
頑張っていきたいと思います。

確認しでき次第、改めてお礼申し上げます。

通報する

お礼日時：2007/05/27 11:58

No.1

回答者： taketan_mydns_jp
回答日時：2007/05/25 18:52

具体的なソースが無いので概要だけ。

質問者さんの指摘通り、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/20060 …

頑張って下さい。