質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.31%

JQueryを用いたクロスドメインでのデータ取得

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 2,186

kaz99k

score 11

自社のレンタルサーバー内に設置されたMySQL内に格納されたデータを、客先HP上から取得してHTML上に表示する方法を検討しています。

複数の客先へ配布するもので、それぞれの環境が異なるため、jQueryでデータ取得する方法を考えています。
※クロスドメイン問題はxdomainajax.jsで解決しようとしています。
※xdomainajax.jsはそのままでは動かなかったので以下の書き換えをしています。
http://sidewalkcafe.hatenablog.com/entry/2017/06/29/211719

しかし、うまく取得できないためご助力頂けると大変助かります。

【ざっくりとした手順】
1.客先サーバのpage.htmlをブラウザで開く
・ajaxで自社サーバのdata.phpにアクセス(getでパラメータ送信)

2.自社サーバのdata.phpにGet付きアクセス
・getのパラメータで絞り込んだデータ(1レコード)をMySQLから取得
・(返し方が分からないので)echo で表示

3.返ってきたデータをpage.html内のタグに表示
・success:で所定のidが付いたタグ内に取得したデータを表示

【コードサンプル】
page.html内

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.xdomainajax.js"></script>
<script>
$(function(){
  $.ajax({
    url: 'http://MYSERVER.jp/data.php',
    type: 'GET',
    data:{
      id:92
    },
    success: function(data) {
      var str = $(data.responseText);
      $('#container').html(str);
    }
  });
});
</script>
</head>
<body>
<div id="container"></div>
<div id="pref_name"></div>
<div id="data_name"></div>
</body>

data.php内

try{
  ※pdoでMySQLにクエリ投げる処理
  ※id=92のレコード(1行)からカラムpref_nameとdata_nameの値を取得

 //クエリで拾ったデータをecho
    foreach ($data_row as $key => $value) {
     echo "{";
     echo  "pref_name:".$value['pref_name'].",";
     echo  "data_name:".$value['data_name'];
     echo "}";
    }
}


実行後のpage.htmlの<div id="container">内

<div id="container">
<result>
&lt;html&gt;
  &lt;head/&gt;
  &lt;body&gt;
     {pref_name:aaa,data_name:bbb}
  &lt;/body&gt;
&lt;/html&gt;
</result>
</div>
<div id="pref_name"></div>
<div id="data_name"></div>

…上記のように、データは取得出来たのですが、<result>というタグの中に入ったHTMLデータ(しかもエスケープされた文字列)が返ってきてしまい、何故こうなるのかと頭を悩ませています。もう上記から{}内の文字列を配列に格納してしまおうかとも思いましたが多分本来の方法ではない気がして、よりスマートな取得・表示方法を知りたくて質問しました。

本当にやりたいこと

  • 取得したaaaとbbbをそれぞれid="pref_name"とid="data_name"のIDがついたタグの中に表示させたい

出来ないこと

  • jQueryにどう記述すればaaaとbbbだけを抜き取れるか
  • PHPにどう記述すれば返ってくるデータにhtmlとかheadとかbodyとか不要なものがくっつかなくなるか

よろしくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2017/08/09 16:41

    PHPのheader関数近辺も提示されたほうが良いと思います。

    キャンセル

回答 1

+3

jQueryにどう記述すればaaaとbbbだけを抜き取れるか

PHPを見た感じJSON形式で返したいように見受けられます。
受け取る側もJSONを指定しましょう。

 dataType: "json"


を指定すると、配列の形式でdataが返ってきます。
例えば、複数レコードあるとしたらdata[0].pref_nameで、1番目のデータのpref_name
と言った具合に返ってきた情報へのアクセスが可能となるはずです。
あとはforなりなんなりで配列dataをループして出力したい形に整形します。
例:

html="<ul>"; 
for(i=0;i<data.length;i++){
 html+= "<li>";
 html+= "pref_name:"+data[i].pref_name;
 html+= "|data_name:"+data[i].data_name;
 html+= "</li>";
}
html+="</ul>"; 
$('#container').html(html);


※あくまでサンプルです。ご自身のデータの状態にあわせて調整してください
※php時点でhtmlspecialchars()はかけておいた方が良いです

追記:
php側でforeachかけなくても、

echo 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/11 13:52

    とても丁寧なご回答、本当に有難うございます。

    提示頂いた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が何者かわからないのですが、いちどこの方向で
    進めてみようと思います。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.31%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る