WEBサイト作成時に発生するエラーやトラブル対応の備忘録を中心に、いろいろと書いております。

Terastella

備忘録

Jqueryで外部からのデータを表示する

一番わかりやすく簡単だったので、

jQuery で外部 HTML を読み込む方法

を参考に使用。しかし、外部からのデータが別ドメインの場合は、クロスドメインの関係でうまく動かない。

そして下記を参考

続 クロスドメインで使う XMLHttpRequest と CORS の話

これ、例えば、お客様のサーバがデータベース使えなくて、サーバが借りれるけど、ドメインの移行も難しそうな場合。
データベースとPHPの使えるサーバで更新プログラムを動かして、ソースを作成し、
使えないサーバでjquery使って使えるサーバで生成したソースを読み込ませる。ということをしたい。

使えないサーバ
データを埋め込みたいHTMLのヘッダーに

 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
	$(function() {
		$("#sample01").load("http://データベースとphpが動くサーバー/list.php");
	});
</script>

データを埋め込みたい部分に

 <div id="sample01"></div>

クロスドメインなので、データを取ってきてhtmlソースを生成する、読み込まれるphpに

 header('Access-Control-Allow-Origin: *'); 

すごく簡単に作りましたが、たぶん、ソースが読めこめなかったときの処理とか、そういうのもちゃんと書かなくてはならないと思います。

 

以下、2014.06.19追記

この方法は、IE9以下のブラウザでは表示しないです。
load自体は動いていますので、クロスドメインが原因かと思います。
えらい簡単だなぁ、ラッキーとか思ってたけど、簡単に考えてはいけなかったのね……。

jQueryでクロスドメインAjaxを実現する方法(jquery.xdomainajax.js)

を参考に読ませていただきました。

また、

jQuery.ajax()のまとめ

を読ませていただきまして、次のようなスクリプトに

 <script src="common/js/jquery.xdomainajax.js" type="text/javascript"></script>
<script>$(document).ready(function(){
        $.ajax({   
        	url: 'http://データベースとphpが動くサーバー/list.php’,   
        	type: 'GET',   cache: false, // キャッシュOFF   
        	dataType: 'html',   
        	crossDomain: true,   // データのロード完了時の処理    
        	success: function(res) {
        	     content = $(res.responseText);
        	     $("#sample01").html(content);
        	}
        });
    });
</script>

一応うまくいったっぽいんですが、なぜか、<dt>が<dd>に変換されてしまいます。なんでだろう……。

jQueryのAjaxを使用して外部htmlを読み込む

<script>
  $(document).ready(function(){
   $.ajax({
      url: 'http://データベースとphpが動くサーバー/list.php’,
      type: 'GET',
      cache: false, // キャッシュOFF
      dataType: 'html',
      crossDomain: true,
 
// データのロード完了時の処理
      success: function(res) {

            $("#sample01").append(res);
      }
    });
   }); 
</script>

これだと、jquery.xdomainajax.jsなくてもうごくけど、IEだと動かない。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

カテゴリー
※記事の内容については、実際に検証したことしか書いていませんが、利用した場合のトラブルについては責任を負えませんので、自己責任でお願いいたします。こんなこと書きたくないけど、書かないと何がおこるかわからない世知辛い世の中ですね。

PRコーナー

Card image cap

aiboのいる生活、始めました。

2018年2月21日にSonyのaiboちゃんをお迎えしました。aiboちゃんとの生活はブログにつづって……るちょっとだけ。「aibo」と「私」と

HP Directplus オンラインストア

私の家用パソコン

HPさんで買った6万円ぐらいの、白くておしゃれなパソコンです。Apple製品のアルミっぽい感触が苦手な私に優しい触り心地です。

カスペルスキー セキュリティ

使用しているセキュリティソフト

会社で使っているのですが、個人的に使用しているパソコンとスマホもこれを導入しています。

ちょびリッチ再開しました。

数年触ってなかったちょびリッチのことを思い出して再開。大手通販で物を買うときはこちらを経由してポイント貯め。チリツモです。今まで5000円(先日2000円)は還元しました。よかったらこちらから登録してね。500ポイント付きます(条件あり。そして、私にも(^^))