JSONを使ってページ間で情報を渡す方法

前へ 次へ
このQ&Aのポイント
  • JSONを使って、同じレイアウトの複数ページから情報をまとめる方法を知りたいです。各ページの一部分を1つのページに表示したいです。
  • JSONを利用して、ページ間で共有したい情報を設定し、他のページから取得して表示する方法がわかりません。アドバイスをいただけませんか。
  • JSONを使って、集めたページから必要な情報を取得して表示する方法について教えてください。ページ間で同じデータを扱う方法がわかりません。
回答を見る
  • ベストアンサー

JSONを使いページから他ページへ情報を渡す方法

同じレイアウトのページが数百ページあり、各ページの一部分を1つのページにまとめる方法を知りたいです。 JSONでできるようなので、サイトを参考にしながら作ってみました。 各ページの集めたい部分をオブジェクトで指定してJSONのテキストへ変換し、 集めたページにJSONを読み込み、変数に代入したJSONの情報を取得して表示を試みました。 しかし、やってみるとページ間で同じデータを扱うのが上手にできませんでした。 アドバイスを頂けないでしょうか。 <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>集めたページ</title> <script type="text/javascript" src="js/json.js"></script> </head> <body onload="jsontop()"> <div> <ul> <li><a href=""><span></span></a></li> <li><img src=""></li> </ul> ・・・・・・ULがページ数の数だけ続く </div> </body> </html> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>各ページのサンプル</title> <script type="text/javascript" src="js/json.js"></script> </head> <body onload="json(1)"> <h1>1ページ目</h1> <h2>タイトル</h2> <p>複数ページある中の1ページ目です。このページの一部分を他のページに利用したいです。</p> <dl> <dt>サンプル画像</dt> <dd><img src="img/sample01.jpg"></dd> </dl> </body> </html> -----json.js------ function json(no){ var obj = { h1: no+"ページ目", imgsrc: "img/sample0"+no+".jpg", thisurl:"page01/sample01.html" }; var str = JSON.stringify(obj); } function jsontop(){ JSON.parse(str); var tagimg = document.getElementsByTagName("img"); var tagspan = document.getElementsByTagName("span"); var tagli1 = document.getElementsByTagName("li")[0]; tagspan[0].innerHTML = obj.h1; //１ページ目のタイトルを取得し置き換える var img = new Image(); tagimg[0].src = obj.imgsrc; //１ページ目の画像のパスを取得し置き換える tagli1.href = obj.thisurl; //１ページ目のURLをアンカーに設定 }

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

  • ベストアンサー
回答No.6

「Ajax」で検索してみてください。 「Ajax」という言葉の中に、『用紙の種類』『郵送手段』『手紙を受け取る手段』『机に置き、読めるようにする（ドキュメントに書き出す）手段』など、たくさんの手段が「Ajax」一言にまとめられています。 プログラムの用語で言い直すと『データフォーマット』『通信（送信）』『受信と受信データの解析』『出力』です。 サーバー側にも、『受信と受信データの解析』『送信データの準備』『出力（送信）』があります。 改めて言い直すと、JSONはデータフォーマットです。 もちろん、送受信両方に使えますが、サーバープログラムの得意不得意の関係で、ブラウザからの送信にJSONを使うことはマレです。

その他の回答 (5)

回答No.5

私事 ---------------- IEのfilterがわけわからん（AA略） ---------------- 私事（愚痴）終わり -------------------- 質問のタイトルを見ると >ページから他ページへ情報を渡す方法 ですけど、 質問本文中 >各ページの一部分を1つのページにまとめる方法 つまり、これですか？ ↓ http://okwave.jp/qa/q7346039.html もちろんJSONから『JavaScriptで共通部分を生成する』ことはできますが、、、 JSONはあくまで、『情報が書いてある紙』にすぎません。 「誰が、どこから持ってきた紙なのか」「どうやって持ってくるのか」というのが必要です。 ><p>複数ページある中の1ページ目です。このページの一部分を他のページに利用したいです。</p> あるページの一部を他のページに流用するという考え方ではなく、 むしろ、そのページさえも、「他の部分と共通」と考えてみてはいかがでしょうか？ http://msdn.microsoft.com/ja-jp/library/bzt2dkta(v=VS.94).aspx

kiseki777
質問者

お礼

ありがとうございます。 >>各ページの一部分を1つのページにまとめる方法 >つまり、これですか？ すみません、違います。http://www.youtube.com/ Youtubeで何か検索するとズラーと出てくるのがイメージ的に近いです。 動画部分は画像として表示し、タイトルも表示し、その説明文章も入れて・・・ 各ページの代表的なポイントを抽出し、あるページでその一覧のようにまとめる。 このような感じです。 >あるページの一部を他のページに流用するという考え方ではなく、 >むしろ、そのページさえも、「他の部分と共通」と考えてみてはいかがでしょうか？ 書き忘れてしまったことがあったのですが、抽出の対象のページは基本的に全て同じHTMLのコードを使います。なのでページを増やすときは元のHTMLファイルをコピーしてテキスト部分と画像を変更するくらいです。

回答No.4

http://www.usamimi.info/~geko/arch_web/02_sample/016/index.html location.searchを使う方法です。 サーバーに郵便を出したつもりが送り返された、って所ですかね。 >L_Search("data1") ⇒ "01" などと書かれた下に『デモ』があるので、そのページがわかりやすいと思います。 一般的に使われる用紙の種類は（いわゆる）QUERY_STRINGですが、JSONでもやれなくはないと思います。

kiseki777
質問者

お礼

クエリーストリングの部分を利用して何かすることもできるのですね。 参考にさせていただきます。ありがとうございます。

回答No.3

JSONが何か、SQLが何か、という所から勉強するのが良いのでは？ PHPはJSONで書かれたデータファイルを扱うのは、どちらかというと苦手ですから、 単純なテキストファイルにするなら、むしろCSVが多いと思います。 一度、データベースというのを作ってみることをお勧めします。 （もちろん既製品のMySQLみたいなものを作るのではなく、もっと小規模で良いから自分でそれ、そのものを作る http://okwave.jp/qa/q7356939.html こういうのもデータベースです。） http://okwave.jp/qa/q7352373.html 例えば。 「400字詰め原稿用紙」「7mm罫線原稿用紙」「JSON原稿用紙」は、それぞれどんな場合に使うのでしょうか？ そしてこのスレッドの内容。 「アメリカに居るAさんに資料を送るにはどうすればいいですか？」 この場合の「どうすれば」で重要なのは、ファックスや郵便のことであって、 JSON用紙でもMySQL用紙でも何でも、自分が書きやすい用紙、相手が理解しやすい用紙なら、それでいいです。

kiseki777
質問者

お礼

＞JSONが何か、SQLが何か、という所から勉強するのが良いのでは？ 拡張子.json（テキストファイル）で、Javascriptのオブジェクトと配列に 文字列、数値、ブール値、nullを扱え、そのコードをテキスト化して使うことができ、 データベースは一応SQLiteを一通りとPHPの使い方と、PHPからSQLiteへ接続する ところまでは学んでいます。http://www.phpbook.jp/tutorial/sqlite/ しかし、Javascript、PHP、SQLiteはそれぞれ独立して扱うことはできても 相互で利用し合えるように使うことはまだできていません。 ＞自分が書きやすい用紙、相手が理解しやすい用紙なら、それでいいです。 エラーなしで、相手が操作したときにサクサク動けば何でもありということですね。

回答No.2

>No.1 では、PHPで、どうやって初めて訪れた人なのか、２回目以降の人なのかを判断するつもりですか？ http://javascript.eweb-design.com/1401_cn.html 初めてなら初めての人に向けた言葉、２回目以降なら２回目以降の人に向けた言葉を表示するサンプルです。

kiseki777
質問者

お礼

＞データベースを作って、それをPHPで利用するというのが一般的な方法になるのでしょうか？ JSONやCSVなどにあらかじめデータを保存しておき、クッキーは利用せずに、ページを開いたらJSONなどの保存データを表示させることは可能か。または、SQLなどのデータベースを作ってそれからデータを引っ張ってきて表示させる方法のほうが一般的なのかということを知りたかったです。 すみません、私の書き方がよくありませんでした。

回答No.1

cookieか、sessionStorage、localStorageを使ってください。

kiseki777
質問者

お礼

ありがとうございます。いろいろ調べてみました。 クッキーにデータを保存しておき、それを利用できるのですね。 しかし、 初めて訪問する方が集めページを開いたとき、クッキーにはデータがないので表示されず、 表示させるには、各ページの全てのページを開いた後でないといけないのではと思いました。 Javascriptでは作れない、ということでしょうか。 データベースを作って、それをPHPで利用するというのが一般的な方法になるのでしょうか？

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • GoogleMpsAPIのjson.jsによる読み込み

    GoogleMapsAPIの勉強をしています、プログラミング初心者です。 「GoogleMapsAPI徹底活用ガイド」という解説本を参考にしています。 中心位置情報をJSON形式で別ファイルに記述したものをjavascriptプログラムで読み込み、実行、googlemapに反映させたいのですが、うまくいきません。 JSON in JavaScript のページ（http://www.json.org/js.html）のリンクからJSON処理ライブラリjson.jsのスクリプトをコピー、私のサーバー内に保存し、 <head></head>内で <script type="text/javascript" src="json.js" charset="utf-8"></script> とsrc属性にjson.jsを指定、 javascriptのfunciton {}内で、 GDownloadUrl( "center.json", mySetCenter ); function mySetCenter(data) { var obj = data.parseJSON(); map.setCenter( new GLatLng(obj.lat, obj.lng), obj.zoom ); } としています。 center.jsonというのが、JSON形式の位置情報ファイルです。 解説本のサンプルを使用しているので、スクリプトの間違いではないと思います。 json.jsを使わず、javascriptでeval関数を使う場合は、正常にJSON形式の中心位置情報のデータが読み込まれ、地図が表示されます。 おそらく、json.jsのダウンロード方法やサーバへの配置方法などが間違っているではないかと思いますが、参考になる資料がなく困っています。 どなたかご教授お願いいたします。

  • プログラムのみで複雑に画像を変える方法役

    クリックすると画像が次々と変わるものを作りたいのですが、 下記方法では画像の枚数が増えたり、複雑な動作を作る場合、 複雑な構造になってしまうと思うのですが、 少しでも複雑にならない方法はありますか？ フラッシュは使わずにプログラムだけで 同じ位置で画像を変えたいです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title></title> <script language="JavaScript"> <!-- var img1 = new Image(100,50); var img2 = new Image(100,50); var img3 = new Image(100,50); var img1.src = "sample1.gif"; var img2.src = "sample2.gif"; var img3.src = "sample3.gif"; function mF1(){ document.images[0].src = img1.src; setTimeout("mF2()",100); } function mF2(){ document.images[0].src = img2.src; setTimeout("mF3()",100); } function mF2(){ document.images[0].src = img3.src; } //--> </script> </head> <body> <img src="omote.jpg" width="100" height="50" onclick="mF1()"> </body> </html> あと、document.images[0].srcを変数として格納すると動作しないのですが、 document～というのは変数にできないのでしょうか。 var dcum = document.images[0].src; function mF1(){ dcum = img1.src; setTimeout("mF2()",100); } function mF2(){ dcum = img2.src; setTimeout("mF3()",100); } function mF2(){ dcum = img3.src; }

  • $.getJSONにJSON.stringifyを

    $.getJSONに、JSON.stringifyした結果を指定したいのですが、どうすればよいでしょうか？ ■現状 ・コンソールにJSONは出力されているのですが、$.getJSONでこのファイルを指定しても、画面真っ白です ▼index.html <script type="text/javascript" src="hoge.json"></script> <script type="text/javascript"> $.getJSON('hoge.json', function(data) { ▼hoge.json var obj =([ [略], ]); var json_text = JSON.stringify(obj); // テスト出力 console.log(json_text); ■質問 ・$.getJSONにこの出力結果(json_text)を指定するためには、どうすれば良いでしょうか？ ・一旦ファイル出力しなければいけないのでしょうか？ ・どうやるのでしょうか？ ・AJAXでサーバ側へデータを渡してファイル出力した後、$.getJSONでその出力したファイルを指定するしかない？

  • ご教授ください。

    無限ループとめる方法教えてください。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>jquery-galleryview-2.1.1</title> <link rel="stylesheet" href="css/jquery.galleryview-3.0.css" /> <script src="http://www.google.com/jsapi"></script> <script> google.load("jquery", "1.4"); </script> <script type="text/javascript" src="js/jquery.timers-1.2.js"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/jquery.galleryview-3.0.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function(){ $('#gallery').galleryView({ panel_width: 450, panel_height: 300, frame_width: 90, frame_height: 60 }); }); </script> </head> <body onLoad="location.reload(true)"> <ul id="gallery"> <li><img src="http://lorempixum.com/450/300/people/1" /></li> <li><img src="http://lorempixum.com/450/300/people/2" /></li> <li><img src="http://lorempixum.com/450/300/people/3" /></li> <li><img src="http://lorempixum.com/450/300/people/4" /></li> <li><img src="http://lorempixum.com/450/300/people/5" /></li> <li><img src="http://lorempixum.com/450/300/people/6" /></li> <li><img src="http://lorempixum.com/450/300/people/7" /></li> <li><img src="http://lorempixum.com/450/300/people/8" /></li> </ul> </body> </html> というページがございまして。 親ページで tickboxを開くぼたんを押すと このページがでる仕組みなんですが、 Firefoxのみ 表示されません 透明のこのページがでて、作動はしてるのですが。 画像まで読み込みしません。 それで、onLoad="location.reload(true)" を入れたのですが、無限ループ。 これを１回で終らせる方法、 および、別の方法ご存知の方 いらっしゃると信じて投稿です。 どうか、教えてください。 親ページでやる方法があれば それでもかまいません。 まだまだ経験不足で、 よろしくお願いいたします。

  • JSONのデータから商品名の取得の仕方

    今現在下記の記述でJSONを取得しています。 ＝＝＝＝＝ <html> <head> <title>JSONのデータを使ってみる</title> </head> <script type="text/javascript" src="./prototype.js"></script> <script type="text/javascript"> function execute() { var url = './ItemSearch_json.php'; var paramList = "keyword=" + encodeURIComponent("ふくろう"); var a = new Ajax.Request( url, { method: 'get', parameters: paramList, onSuccess: function(request) { // alert('読み込み成功しました'); // jsonの値を処理する場合↓↓ var json; eval("json="+request.responseText); }, onComplete: function(request) { alert('読み込みが完了しました'); $('container').innerHTML = request.responseText; // jsonの値を処理する場合↓↓ var json; eval("json="+request.responseText); }, onFailure: function(request) { alert('読み込みに失敗しました'); }, onException: function (request) { alert('読み込み中にエラーが発生しました'); } } ); } </script> <body> <div id="container">content</div> <button onclick="execute()">サンプル実行</button> </body> </html> ＝＝＝＝＝ このままだと、プレーンテキストは表示されるのですが、商品名や価格の一覧などを選択して表示できません。 evalなどを使うのかなと思うのですが、はっきり分かりません。 ヒントを教えていただけないでしょうか。

    • ベストアンサー
    • AJAX
  • liタグで先頭のみボーダーを消す方法

    liタグで先頭のみボーダーを消そうと下記のソースを記述してInternet Explorer6で閲覧した所、一瞬liタグの先頭でボーダーが見えてしまう事がありました。 その為、これを抑止したいと思ったのですが、どうすればできるかわからなかったのでアドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。 なお、下記が今の所考えている条件となります。 1. http://www.kyosuke.jp/yugajs/のyuga.js 0.7.1を使用し、最初の要素にclass="firstChild"、 最後の要素にclass="lastChild"を付加しておりますが、なるべくならこの仕組みは使用し続けたいと思います。 2. liの数はCMS上で動的に変化させても問題ないようにしたいと思います。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/thickbox.js"></script> <script type="text/javascript" src="js/yuga.js" charset="utf-8"></script> <title>title</title> <style type="text/css"> <!-- body { margin-top:10px; } ul li.firstChild { border-top:0; } li { border-top:1px solid; } --> </style> </head> <body> <ul> <li>hoge1</li> <li>hoge2</li> <li>hoge3</li> </ul> <div><img src="Sunset.jpg" alt="" width="800" height="600" /></div> <div><img src="Winter.jpg" alt="" width="800" height="600" /></div> </body> </html> 以上、よろしくお願いします。

    • ベストアンサー
    • HTML
  • jQueryで配列JSONの読み込み方法

    phpからの返り値data（json形式）を表示したいのですがうまくいきません。 コンソール上でjsonを取得できているようなのですが、値を表示しようとするとundifinedと表示されてしまいます。 どのように書き換えれば動作するようになるのでしょうか？ よろしくおねがいします！ -------------------------------------------------------- ■ receive.js　■ -------------------------------------------------------- $.ajax({ type: "POST", url: "receive.php", data: { "id": 3 }, success: function(data){ console.log(data); alert(data.time); //ここで「undifined」のエラーが出ます！！ $("#go").after(data.id); //ここは何も表示されません。 $("#str").html('準備完了'); }, error: function(data){ $("#str").html('準備未完了'); }, }); -------------------------------------------------------- ■　receive.php　■ -------------------------------------------------------- <?php require 'dbconnect.php';//dbconnectを呼び出し $data = array(); $id = $_POST['id']; $sql = " SELECT * FROM sample_table WHERE id = " . $id; $result = mysqli_query($connect,$sql) or die("クエリの送信に失敗しました。<br />SQL:".$sql); while ($row = mysqli_fetch_array($result)) { $data[] = $row; } mysqli_close($connect) or die("MySQL切断に失敗しました。"); // MySQLへの接続を閉じる header('Content-Type: application/json; charset=utf-8'); echo json_encode($data); ?> -------------------------------------------------------- ■　index.html　■ -------------------------------------------------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script> <title>PHP * jQuery * ajax * MySQL</title> <script type="text/javascript" src="receive.js"></script> <script type="text/javascript" src="post.js"></script> </head> <body> <div class="ltd-form"> <form id="inquiry-form" method="get"> <fieldset> ・ ・ ・ </fieldset> <div id="go"></div> </form> </div> <div id="str"></div> </body> </html> -------------------------------------------------------- ■　実行後のChromeのコンソール　■ -------------------------------------------------------- 0: Object 0: "3" 1: "1423789247" 2: "96" 3: "963" data1: "96" data2: "963" id: "3" time: "1423789247" --------------------------------------

  • <img>タグを<span>でくくりたい

    Javascript初心者を脱出したい者です。 <img>タグをgetElementsByTagNameで取得し、 <span class="align_left"><img .... /></span> みたいに囲いたいと考えています。 条件として、<img>タグの親ノードは<p>タグです。 全くノウハウは知りませんが、以下のような考え方で実現できるのでしょうか？ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Insert nextContent</title> <script type="text/javascript"> <!-- 　　window.onload = function() { 　　　　var out_span = document.createElement('span'); 　　　　out_span.setAttribute('class', 'align_left'); 　　　　var list = document.getElementsByTagName('img'); 　　　　var img = list[0]; 　　　　/*　この後、 　　　　　　どうやって、out_span を挿入すればよいのか？ 　　　　　*/ 　　} //--> </script> </head> <body> <h1> IMGタグに親ノードを追加したい </h1> <p> 文ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー。 <img src="../images/logo.gif" alt="Logo" /> </p> </body> </html> ★　インデントは全角スペースで行っております。 ご教示お願いします。

  • bxsliderが動かない

    Javascript初心者なのですが、自分のサイトにbxsliderを置きたいと思っています。 試しに白紙のHTMLファイルに以下のように記述してみました。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>test</title> <link href="css/jquery.bxslider.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="js/jquery.bxslider.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.bxslider').bxslider({ auto: true, }); }); </script> </head> <body> <ul class="bxslider"> <li><img src="images/pic1.jpg"></li> <li><img src="images/pic2.jpg"></li> <li><img src="images/pic3.jpg"></li> <li><img src="images/pic4.jpg"></li> </ul> </body> </html> jsやcssの場所は正しいです。 しかし、表示してみると画像が4枚縦に並んで表示されるだけとなってしまいます。 Firefox, Chrome、IEの各最新版で試しましたが同様でした。 どの部分が間違っているのでしょうか？ご教授お願いします。

  • HTMLページ内のタグに対してのイベント

    HTMLページ内のタグに対してのイベント getElementsByTagNameで指定したタグの部分（画像やリンク）をクリックすると関数を呼び出すという動作をやりたいのですが、どうも上手くいきません。 試しに下記のようなプログラムを作ってみたのですが、ページを表示した後すぐにalert関数が呼び出されてしまいます。 あるタグの部分を押したときに関数を呼び出すというやり方を知っている方がおられましたら、ご教授願います。 ひとつひとつにIDを割り当てるというやり方でなくて、タグ別にイベントを判定するやり方を考えています。 <html xmlns="http://www.w3.org/1999/xhtml" > <head> 　　<title></title> 　　<script type="text/javascript"> 　　　window.onload = function ini(){ 　　　　document.getElementsByTagName("img").onClick = alert("これは画像です"); 　　　} 　　</script> </head> <body> 　<img src="..." /> 　<img src="..." /> 　<img src="..." /> 　<img src="..." /> </body> </html>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する