jQueryで配列JSONの読み込み方法

前へ 次へ
このQ&Aのポイント
  • phpからの返り値data（json形式）を表示したいのですがうまくいきません。
  • コンソール上でjsonを取得できているようなのですが、値を表示しようとするとundifinedと表示されてしまいます。
  • どのように書き換えれば動作するようになるのでしょうか？
回答を見る
  • ベストアンサー

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" --------------------------------------

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

  • ベストアンサー
  • sanzero
  • ベストアンサー率56% (58/102)
回答No.2

phpで配列内に結果の配列を入れてるのと コンソールで0:objectになってるので js側でdata[0].time で取れるんじゃないかな。

zilchr6
質問者

お礼

ありがとうございます！！ まる一日調べてできなかったことが解決できました！

その他の回答 (1)

  • sanzero
  • ベストアンサー率56% (58/102)
回答No.1

たぶんdataがjsonでなくて文字列として扱われているのかと思います。 ajaxのオプションに dataType:'json' を追加する。 または、取得したdataに対して var jsonData = JSON.parse(data) としてみてはいかがでしょう。

zilchr6
質問者

補足

ご連絡ありがとうございます。 両方ともためしてみたのですが、うまく動きませんでした。 ajaxのオプションにdataType:'json'を追加した場合は、これまでと同様 alert(data.time); で「undifined」のエラーが出ました。 またvar jsonData = JSON.parse(data)の場合には、 uncaught syntaxerror: unexpected token oと表示されました。 調べたところ「文字列が渡されるはずのところにオブジェクトが渡された。」ということなので、jsonとして扱われていると考えていいのでしょうか？ もし他に考えられることなどありましたらご教授頂けると助かります。 よろしくお願いいたします。

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

関連するQ&A

  • jQueryでAJAXを利用しJSONデータを取得

    商品コードを入力したら、AJAXで商品名と価格を取得して表示させ、それを確認して個数を入力して注文票を作ろうとしています。 商品名だけの取得は何とかできたのですが、商品名と価格といったように複数データを取得するのに苦労しています。 独学のプログラミングなので初歩的な所が分かっていないのだろうと思いますが、JSON形式で受け取ればいいのだろうと考えて、そうしているのですが、うまくいきません。 下記は、商品名だけなら取得できているコードですが、どこを修正したらいいでしょうか。 よろしくお願いします。 ファイル名：test1.php <html> <head> <title>test</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script> <script type='text/javascript'> $(document).ready(function(){ $("#goodsid").keyup(function(e){ var search_val=$("#goodsid").val(); $.post("./SubTest1.php",{search_term : search_val},function(data){$("#goodsname").html(data);}) }) }); </script> </head> <body> <form id="searchform" method="post"> <div> <label>商品番号</label> <input type="text" name="goodsid" id="goodsid" /> </div> </form> <div id="goodsname"></div> <div id="goodsprice"></div> </body> </html> ファイル名：SubTest1.php <?php ini_set("default_charset","utf-8"); // MySQLクラスファイルの取り込みとインスタンスの作成 require_once("../mysql.php"); $mysql = new MySQL; $term = $_POST["search_term"]; $sql = "SELECT goods_name,goods_price FROM `goods_table` WHERE goods_num ='".$term."'"; $mysql->query($sql); $row = $mysql->fetch(); // ここまででデータを取得している if ($row){ $goodsname = $row['goods_name']; }else{ $goodsname = ""; } echo $goodsname; //呼び出し元のtest1.phpに返す値 ?>

  • JSONデータをｊQueryにわたす際に文字化け

    MySQLからのデータをPHPでJSON形式に加工して、ｊQueryで表示させようしているのですが、 どうしても日本語だけ文字化けをしてしまい、エンコードを色々変えても文字化けしてしまい困っています。 どなたか助けていただけませんでしょうか？ -文字化け結果- No：1　Title：¤Ç¤­¤¿¡ªÂçÀ®¸ù¡ª No：2　Title：¤³¤ì¤«¤é´èÄ¥¤ë¡ª phpにアクセスしても文字化けはいたしません。 ｊQueryからアクセスをすると完璧に文字化けをしてしまいます。 json.php (UTF-8) [ { no: "1", title: "できた！大成功！" }, { no: "2", title: "これから頑張る！" } ] index.html (UTF-8) <!DOCTYPE HTML> <html> <head> <meta charset="euc"> <title>jsonテスト</title> <link rel="stylesheet" type="text/css" href="style/desktop.css"> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.7.1");</script> <script type="text/javascript"> jQuery(function(){ $.getJSON("./json.php",function(data){ $('p','#demo').remove(); $('#demo').append('<ul/>'); $.each(data,function(i,items){ $("<li/>",{ text:'No：'+items.no+'　Title：'+items.title }).appendTo('ul','#demo'); }); }); }); </script> </head> <body> <div> <div id="demo"> <h4>リスト</h4> <p></p> </div> </div> </body> </html>

  • ｊQuery UIについて

    今ｊQueryUITabｓというプラグインを使ってタブによる切り替えを行おうとしています。 このプラグインでは、タブの内容をajaxのように他のページを読み込めるとのことで 以下のようなコードを書いてみました。 この場合に、tabs.htmlの方で、読み込んだ先のフォームがクリックされたのを検知するには どうしたらよいのでしょうか。 単純に、tabs.htmlのスクリプトの部分に次のようなコードを書いても「Undifined」が表示されてしまいました。 $("#form1").submit(function(){ alert($("#form1_text").val()); }); もし解決策をご存知でしたら、ご教授お願いいたします。 --------- Tabs.html ------------------ ++++++script++++++++ $(function(){ $("#tabs").tabs(){}); }) ++++++script++++++++ ++++++html++++++++ <div id ="tabs"> <ul> <li><a href = "test1.html">テスト１のフォーム</a></li> <li><a href = "test2.html">テスト２のフォーム</a></li> </ul> </div> ++++++html++++++++ --------- Tabs.html ------------------ --------- test1.html ------------------ <form id = "form1"> <input type = "text" id = "form1_text"> <input type = "submit" id = "form1_submit"> </form> --------- test1.html ------------------ --------- test2.html ------------------ <form id = "form2"> <input type = "text" id = "form2_text"> <input type = "submit" id = "form2_submit"> </form> --------- test2.html ------------------

  • jquery上で2つのスクリプトの合体

    下記のように「サブページその1 　hoge.ne.jp/read1000.php」からスクレイピングしたtakahashiという文字を、「メインページ　hogehoge.jp/index.html」の<input type="text">内に表示可能なスクリプトがあります。【現在できていること その1】 また、メインページで取得した変数123456を、URLという形で「サブページ2 read2222.php」のPHPに渡し、サブページ2の中で「123456についてのPHP処理した結果」を、再度メインページで取得して表示するスクリプトがあります。【現在できていること その2】 【やりたいこと】 この2つのスクリプトを合体させ「サブページ1 read1000.php」からスクレイピングしたtakahashiという文字を、URLという形で「サブページ2 read2222.php」のPHPに渡し、サブページ2の中で「takahashiについてのPHP処理した結果」を、再度メインページで取得して表示したいというのが今回の趣旨で、スタックしている部分となります。 ***************************************************************** 【現在できていること その1】 【サブページその1 http://hoge.ne.jp/read1000.php】 <table border="1"> <tbody> <tr> <td class="class3_sql_name">takahashi</td> </tr> </tbody> </table> 【メインページ　http://hogehoge.jp/index.html】 <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <script src="js/jquery.xdomainajax.js"></script> <script> // 引っ張ってきたいサイトのURL url = 'http://hoge.ne.jp/read1000.php'; $.get(url, function(data){ var content3_sql_name = $(data.responseText).find('.class3_sql_name').text(); 　　$("[name='ca2_stock_name']").val(content3_sql_name); }); </script> <input type="text" name="ca2_stock_name" value="" /> ***************************************************************** 上記のスクリプトを実行すると、 <input type="text" name="ca2_stock_name" value="takahashi" /> という形が完成します。 ****************************************************************** 【現在できていること その2】 【サブページその2 http://hoge.ne.jp/read2222.php】 <div id="news200"> こんにちは <?php echo $_GET["name"]; ?> さん </div> 【メインページ　http://hogehoge.jp/index.html】 <script type="text/javascript"> var usr_id='123456' $(function(){ $("#read200").load("https://hoge.ne.jp/read2222.php?name="+usr_id+" #news200 ul", function(data) { if(data == null){ $("#read200").append("読込みに失敗しました"); } }); }); </script> <div id="read200"></div> ***************************************************************** 上記のスクリプトを実行すると、 メインページ 上で、サブページ2の<div id="news200"/>....<div> 間を拾ってきて表示することができます。 　　　　　　　　　　　　　　　→　こんにちは123456さん メインページ内で「read2222.php?name="+usr_id+"」という形でURLとして一旦サブページ2にトスし、 $_GET["name"]　でサブページで処理しものをあらためてメインページで表示させています。 ***************************************************************** 【やりたいこと】 上記の2つのスクリプトを合体させ、 var usr_id='123456'　の代わりに、 【http://hoge.ne.jp/read1000.php】にある<td class="class3_sql_name">takahashi</td> のtakahashiを表示させたいと考えています。 　　　　　　　　　　　　　　　→　こんにちはtakahashiさん 考え方としては var content3_sql_name　の変数をvar usr_idの代わりにすればいいだけです。 ************************************************************** 【試したがうまくいかなかったスクリプト】 <script type="text/javascript"> url = 'http://hoge.ne.jp/read1000.php'; $.get(url, function(data){ var content3_sql_name = $(data.responseText).find('.class3_sql_name').text(); $(function(){ $("#read200").load("https://hoge.ne.jp/read5555.php?name="+content3_sql_name+" #news200 ul", function(data1) { if(data1 == null){ $("#read200").append("読込みに失敗しました"); } }); }); }); </script> <div id="read200"></div> ********************************************************** どこがいけないのかご指導いただけませんでしょうか? 宜しくお願い致します。

  • フォームからjQuery,jQuery.jsonを使ってJSONを作っ

    フォームからjQuery,jQuery.jsonを使ってJSONを作ってPHPで表示したい。 こんばんは。2、3日ずっと悩んでて解決しないので助けてください。 jQuery,jQuery.jsonを使ってJSONを作成しています。 クリックイベントに var form = $("#sform"); var json = $(form.serializeArray()); var strJson = $.toJSON(json); という形をとって $.ajax({ url : "request.php", type : "post", data : strJson, success: function(request){ $('#result').html(request); } }); で送っています。 ただPHP側で var_dump($_POST); を行ってもArray ( ) と表示されます。 firebugで見たところpostに入っているデータは以下の通りです。 {"0":{"name":"date","value":"2010/09/15"},"1":{"name":"type","value":"new"},"2":{"name":"bin[]","value":"2"},"3":{"name":"bin[]","value":"3"},"length":4} var_dumpで表示できないのはなぜでしょうか？ 上記で変数json のまま送るとオブジェクトとして送れてvar_dump でも表示できます。 ただ今はjson の勉強をしているので、できればなぜこうなっているのかを理解したいです。 基本的なところで勉強不足かもしれませんが、何かアドバイスなど頂けると嬉しいです。 よろしくお願いします。

  • jQueryのタブにスクロールバーをつけたい

    jQueryのタブにスクロールバーをつけたい jQueryの「ui.tabs.js」を使ってタブを制作し、「jquery.cookie.js」でタブの内容を記憶し。 さらに、そのタブの中身が設定した枠を超えると「jScrollPane.js」を使って横にスクロールバーがでるようにしたいのですがうまくいきません。 <script src="./js/jquery-1.2.6.js" type="text/javascript"></script> <script src="./js/jquery.cookie.js" type="text/javascript"></script> <script src="./js/ui.core.js" type="text/javascript"></script> <script src="./js/ui.tabs.js" type="text/javascript"></script> <script src="./js/jScrollPane.js" type="text/javascript"></script> <script src="./js/jquery.mousewheel.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $('#container1 > ul').tabs({ event: 'click' ,cookie: { expires: 30 } , cache: true}); $('#fra_sl').jScrollPane({scrollbarWidth:13, scrollbarMargin:9}); }); </script> <body> <div id="container1"> <ul> <li id="tab1"><a href="#tab_categry">タブ1</a></li> <li id="tab2"><a href="#tab_all">タブ2</a></li> </ul> <div id="pane1"> <div id="tab_categry"> <p>中身１(省略)</p> </div> <div id="tab_all"> <p>中身2(省略)</p> </div> </div> </div> </body> 以前同じような質問をされていた方がいたのでそちらも参考にして試してみたのですが→http://okwave.jp/qa/q4819862.html javascriptは初心者なものでよくわかりませんでしたorz どなたかわかる方がいましたら教えてもらえないでしょうか？？

  • HTMLをPHPでJSONにして返すには

    jqueryでurlをPHPに送って、そのurlのhtmlファイルから、titleタグやh1タグの内容を抽出し、連想配列に格納。そして、その連想配列をJSON形式にしてjqueryに返し、ｈｔｍｌにレンダリングしたいのですが上手くいきません。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> function site_check(){ var url = $("#url").val(); if(url=="") return; $.getJSON("test.php?url=" + encodeURIComponent(url) ,function(res){ $("#title").html(res.title); $("#h1").html(res.h1); }); } </script> </head> <body> <div class="form"> URL <input type="text" id="url" value="" style="width:300px;" onfocus="this.select()" onkeypress="if(event.keyCode==13) site_check()" /> <button onclick="site_check()" />チェック</button> </div> title：<span id="title"></span></br> h1：<span id="h1"></span> </body> test.php↓ <?php $html=mb_convert_encoding(file_get_contents($_GET['url']), 'UTF-8', 'auto'); $array = array(); $pattern = "/(?<=<title>).+?(?=<\/title>)/mis"; preg_match($pattern,$html,$array['title']); $pattern = "/(?<=<h1>).+?(?=<\/h1>)/mis"; preg_match($pattern,$html,$array['h1']); header("Content-Type: application/json; charset=UTF-8"); echo json_encode($array); ?> このコードだと、test.phpからは、[object Object]と、レスポンスが返ってきてしまいます。

    • ベストアンサー
    • PHP
  • jQueryとprototypeの共存

    prototype.jsとjQuery.js、そのプラグインであるjquery.cycle.all.pack.jsを共存させ、データベースから取り出した画像にエフェクトをかけて表示したいと思っています。 ライブラリの共存には'jQuery.noConflict();'を使うところまでは調べたのですが、その使い方がよくわかりません。現在は以下のようにプログラムを書いていますが、jqueryの効果が出ていません。使い方、描き方の間違い等ありましたらご指摘お願いいたします。 <script type="text/javascript" src="./js/prototype.js"></script> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.cycle.all.pack.js"></script> <script type="text/javascript"> <!-- jQuery.noConflict(); function loadHello(){ new Ajax.Request( './php/Search2.php', { onComplete : function( httpObj ){ $('検索結果表示領域').innerHTML = httpObj.responseText; } } );} jQuery(function() { 　　　　jQuery(".sample").cycle( { fx:'shuffle', delay: -2000 }); }); // --></script> </head> <body onLoad="loadHello()"> <ul id="sample"> <div id="検索結果表示領域"></div> </ul> </body> </html>

  • JQUERYをはじめて導入したのですが、

    JQUERYをはじめて導入したのですが、 読込み部分の記述が間違っているのか 「$(document).ready(function(){」のところで一箇所エラーとなります。 「オブジェクトでサポートされてないプロパティまたはメソッドです」となります。 設定内容の、現状は下記です。 「validate」設定を実現したいためにjqueryを導入。 ・JQUERYは現在の最新版のものを入手。 ・読み込んだファイルは全く編集などはしてないもの。 ・パスなどの記述は間違っていないようです。確実にファイルは存在しております。 ・一応パーミッションも確認済みです。 ・id"form-host"もformタグに設定しております。 <script type="text/javascript" src="/common/js/jquery.js"></script> <script type="text/javascript" src="/common/js/jquery.validate.pack.js"></script> <script type="text/javascript" src="/common/js/jquery.validate.js"></script> <script type="text/javascript" src="/common/js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="/common/js/jquery.validate.min.js"></script> <script type="text/javascript" src="/common/js/additional-methods.js"></script> <script type="text/javascript" src="/common/js/messages_ja.js"></script> <script type="text/javascript"> //入力チェック関数に対象フォームIDを指定 $(document).ready(function(){ $("#form-host").validate(); }); </script> jsファイルの読込みの順序が違うのでしょうか、 不必要なjsファイルを読み込んでしまっている？為なのか； validate関連を導入した事があるからいらっしゃれば、 ご教授願います。

  • 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をアンカーに設定 }

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する