Q&A
PHPのheader関数近辺も提示されたほうが良いと思います。
自社のレンタルサーバー内に設置されたMySQL内に格納されたデータを、客先HP上から取得してHTML上に表示する方法を検討しています。
複数の客先へ配布するもので、それぞれの環境が異なるため、jQueryでデータ取得する方法を考えています。
※クロスドメイン問題はxdomainajax.jsで解決しようとしています。
※xdomainajax.jsはそのままでは動かなかったので以下の書き換えをしています。
http://sidewalkcafe.hatenablog.com/entry/2017/06/29/211719
しかし、うまく取得できないためご助力頂けると大変助かります。
【ざっくりとした手順】
１．客先サーバのpage.htmlをブラウザで開く
・ajaxで自社サーバのdata.phpにアクセス（getでパラメータ送信）
↓
２．自社サーバのdata.phpにGet付きアクセス
・getのパラメータで絞り込んだデータ（1レコード）をMySQLから取得
・（返し方が分からないので）echo で表示
↓
３．返ってきたデータをpage.html内のタグに表示
・success:で所定のidが付いたタグ内に取得したデータを表示
【コードサンプル】
page.html内
html
1<html> 2<head> 3<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 4<script type="text/javascript" src="jquery.xdomainajax.js"></script> 5<script> 6$(function(){ 7 $.ajax({ 8 url: 'http://MYSERVER.jp/data.php', 9 type: 'GET', 10 data:{ 11 id:92 12 }, 13 success: function(data) { 14 var str = $(data.responseText); 15 $('#container').html(str); 16 } 17 }); 18}); 19</script> 20</head> 21<body> 22<div id="container"></div> 23<div id="pref_name"></div> 24<div id="data_name"></div> 25</body>
data.php内
php
1try{ 2 ※pdoでMySQLにクエリ投げる処理 3 ※id=92のレコード（1行）からカラムpref_nameとdata_nameの値を取得 4 5 //クエリで拾ったデータをecho 6 foreach ($data_row as $key => $value) { 7 echo "{"; 8 echo "pref_name:".$value['pref_name'].","; 9 echo "data_name:".$value['data_name']; 10 echo "}"; 11 } 12}
実行後のpage.htmlの<div id="container">内
html
1<div id="container"> 2<result> 3<html> 4 <head/> 5 <body> 6 {pref_name:aaa,data_name:bbb} 7 </body> 8</html> 9</result> 10</div> 11<div id="pref_name"></div> 12<div id="data_name"></div>
…上記のように、データは取得出来たのですが、<result>というタグの中に入ったHTMLデータ（しかもエスケープされた文字列）が返ってきてしまい、何故こうなるのかと頭を悩ませています。もう上記から{}内の文字列を配列に格納してしまおうかとも思いましたが多分本来の方法ではない気がして、よりスマートな取得・表示方法を知りたくて質問しました。
本当にやりたいこと
- 取得したaaaとbbbをそれぞれid="pref_name"とid="data_name"のIDがついたタグの中に表示させたい
出来ないこと
- jQueryにどう記述すればaaaとbbbだけを抜き取れるか
- PHPにどう記述すれば返ってくるデータにhtmlとかheadとかbodyとか不要なものがくっつかなくなるか
よろしくお願いいたします。
回答1件
0
jQueryにどう記述すればaaaとbbbだけを抜き取れるか
PHPを見た感じJSON形式で返したいように見受けられます。
受け取る側もJSONを指定しましょう。
javascript
1 dataType: "json"
を指定すると、配列の形式でdataが返ってきます。
例えば、複数レコードあるとしたらdata[0].pref_nameで、1番目のデータのpref_name、
と言った具合に返ってきた情報へのアクセスが可能となるはずです。
あとはforなりなんなりで配列dataをループして出力したい形に整形します。
例：
javascript
1html="<ul>"; 2for(i=0;i<data.length;i++){ 3 html+= "<li>"; 4 html+= "pref_name:"+data[i].pref_name; 5 html+= "|data_name:"+data[i].data_name; 6 html+= "</li>"; 7} 8html+="</ul>"; 9$('#container').html(html); 10
※あくまでサンプルです。ご自身のデータの状態にあわせて調整してください
※php時点でhtmlspecialchars()はかけておいた方が良いです
追記：
php側でforeachかけなくても、
PHP
1echo json_encode($data_row);
だけでいいかもしれませんね。
json_encode()は第2引数でオプションを色々と指定できるので用途にあわせて調整してください。
※この場合だとhtmlエスケープかけられないので事前にかけた配列を作って返すなど工夫が必要です
PHPにどう記述すれば返ってくるデータにhtmlとかheadとかbodyとか不要なものがくっつかなくなるか
さらに追記：
$.ajax() のsetting部分を見ますと、
datatypeについては指定されていない場合、デフォルト値をjQuery側が判別しているようなので
htmlと判別されて<html>～</html>がくっついてきたんでしょうね。
html()を利用されているのでエスケープはjQueryでの出力時よりも
phpからの返却時にエスケープされたのかなとは思います（未検証ですが）
json出力で決まっているのでしたら、header()でapplication/jsonを指定したほうが良いですね。
投稿2017/08/09 08:03
編集2017/08/09 08:25
総合スコア80850
とても丁寧なご回答、本当に有難うございます。
提示頂いたJSONでの取得を試してみました。
PHPの方はJSON形式で格納できたのですが、肝心のajaxの方は
JSONタイプを指定するとデータが取得できなくなってしまいました。
コンソールを見ると、「XMLHttpRequest cannot load http://MYSERVER.jp?data=92&_=1502377547730. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.」という記述でした。
クロスドメインなので駄目ですという感じですかね…
いろいろ試してみたのですがやはりJSONを指定すると取れなくて、
JSONPもサーバーが対応していないのか真っ白で返ってきてしまいました。
同じような結果が返ってきているブログも見つけましたので、
どうやらxdomainajax.jsの仕様かもしれないです。
http://d.hatena.ne.jp/satosystems/20140108/1389173683
<html><head></head><body>[{"pref_name":"aaa","data_name":"bbb"}]
といったデータは取得できているので、やはり当初のように、
いま取れているデータの状態を配列にするしかないかもしれません。
上記ブログでは「parseXML に通してしまえば良い」と書かれていました。
perseXMLが何者かわからないのですが、いちどこの方向で
進めてみようと思います。
あなたの回答
tips
プレビュー
