- ベストアンサー
JSONを使ってページ間で情報を渡す方法
神崎 渉瑠（@taloo）の回答
「Ajax」で検索してみてください。 「Ajax」という言葉の中に、『用紙の種類』『郵送手段』『手紙を受け取る手段』『机に置き、読めるようにする（ドキュメントに書き出す）手段』など、たくさんの手段が「Ajax」一言にまとめられています。 プログラムの用語で言い直すと『データフォーマット』『通信（送信）』『受信と受信データの解析』『出力』です。 サーバー側にも、『受信と受信データの解析』『送信データの準備』『出力（送信）』があります。 改めて言い直すと、JSONはデータフォーマットです。 もちろん、送受信両方に使えますが、サーバープログラムの得意不得意の関係で、ブラウザからの送信にJSONを使うことはマレです。
関連する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のダウンロード方法やサーバへの配置方法などが間違っているではないかと思いますが、参考になる資料がなく困っています。 どなたかご教授お願いいたします。
- 締切済み
- JavaScript
- プログラムのみで複雑に画像を変える方法役
クリックすると画像が次々と変わるものを作りたいのですが、 下記方法では画像の枚数が増えたり、複雑な動作を作る場合、 複雑な構造になってしまうと思うのですが、 少しでも複雑にならない方法はありますか？ フラッシュは使わずにプログラムだけで 同じ位置で画像を変えたいです。 <!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; }
- ベストアンサー
- JavaScript
- $.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でその出力したファイルを指定するしかない？
- ベストアンサー
- JavaScript
- ご教授ください。
無限ループとめる方法教えてください。 <!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" --------------------------------------
- ベストアンサー
- JavaScript
- <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> ★ インデントは全角スペースで行っております。 ご教示お願いします。
- ベストアンサー
- JavaScript
- 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の各最新版で試しましたが同様でした。 どの部分が間違っているのでしょうか？ご教授お願いします。
- ベストアンサー
- JavaScript
- 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>
- ベストアンサー
- JavaScript