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

前へ 次へ
このQ&Aのポイント
  • MySQLからのデータをPHPでJSON形式に加工して、jQueryで表示させる際に日本語の文字化けが起きてしまいます。
  • PHPにアクセスしても文字化けは起きないのに、jQueryからアクセスすると完璧に文字化けします。
  • エンコードを変えても文字化けが解決しないため、どうすればいいのか困っています。
回答を見る
  • ベストアンサー

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>

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

  • ベストアンサー
  • shiren2
  • ベストアンサー率47% (139/295)
回答No.3

おはようございます。 少し試したんですが、どうもPHPの出力で日本語をエンコードしてないことが原因ではないかと思われます。 これを試してみてもらえますか。 <?php $a = array( array("no" => "1", "title" => "できた！大成功！"), array("no" => "2", "title" => "これから頑張る！") ); header('Content-type: application/json; charset=UTF-8'); echo json_encode($a); ?>

owo0223
質問者

お礼

回答有難う御座います。 実際に試した所、どうやら言われたとおり日本語をエンコードしていなかったです。 うまく日本語表示が出来ました。 ありがとうございます。

その他の回答 (2)

  • shiren2
  • ベストアンサー率47% (139/295)
回答No.2

手元の環境で再現しませんでしたので、とりあえず思いつく点を書いておきますね。 1. PHPが原因で文字化け <?php header("Content-Type: application/json; charset=utf8"); ?> 2. htmlが原因で文字化け <meta charset="utf-8"> 3. scriptが原因で文字化け http://d.hatena.ne.jp/lesamoureuses/20080606/1212715908

owo0223
質問者

補足

回答有難う御座います。 三点やってみたのですが、文字化けは治らないままです。 PHPにアクセスは、問題無いく文字化けしないのです。 どこら辺がおかしいのでしょうね？

  • shiren2
  • ベストアンサー率47% (139/295)
回答No.1

＞<meta charset="euc"> たぶん、これではないでしょうか。 ＞<meta charset="utf-8"> これで試してみてください。

owo0223
質問者

補足

回答ありがとうございました。 <meta charset="euc"> ↓ <meta charset="utf-8"> に変更しましたが、やはり文字化けになってしまいます。

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

関連するQ&A

  • jQueryでHTML表示の部分

    jQueryで表示されるデータをHTMLで表示するのですが、 色々いじっていたのですが、表示されなかったり<li>タグだけしかひょうじされなかったりして、 いまいちわからなくて、質問を致しました。 -現在の表示------------ <li>No：1　Title：タイトル</li> ----------------------- <li>タグの中にclassを追加したいのですが、 どうすれば、<li>タグにclassが追加されるのでしょうか。 ----------------------------------- <li class="test">No：1　Title：タイトル</li> ----------------------------------- こんな感じに表示させたいのです。 大変申し訳ございませんが、よろしくお願い致します。 <script type="text/javascript"> jQuery(function(){ $.getJSON("./json_sql.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> <div id="demo"> <h4>リスト</h4> </div>

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

  • 別URLからのJSON取得がうまくいかないので教えてください

    楽天書籍検索APIをJSONで取得したいのですが、うまく表示されません。 以下のソースで何がまずいか教えていただけますでしょうか。 ※[YOUR_developerID]にはIDが入っているものとします <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>JSON</title> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.2.6");</script> <script type="text/javascript"> $(function(){ $.getJSON("http://api.rakuten.co.jp/rws/2.0/json?developerId=[YOUR_developerID]&operation=BooksTotalSearch&version=2009-03-26&keyword=%E3%82%AC%E3%83%B3%E3%83%80%E3%83%A0&sort=-releaseDate", function(jsonData){ $(jsonData.Body.BooksBookSearch.Items.Item).each(function(){ $("body").append(this.title+"<hr />"); }) }) }) </script> </head> <body>

  • Ajax・jQueryでＧＥＴ時にＩＥで文字化け

    Ajax・jQueryで日本語をGETするとき、IEで文字化けします。 (Firefox,chromeでは文字化けは起こりません。IE6/7/8で確認すると文字化けします） どのようにしたら文字化けが起こらなくなるか教えていただければと思います。 環境 PHP:5.1.6 サーバー・HTMLの文字コードはUTF-8 下記のようなリンクを作り、「jquery.url.js」でパラメータを取得しています。 <a href="./test.php?keyword=テスト&cate=1"> （実際には下記のソースに示しますが、テストの文字はurlencordしています。） 【javascript部分】 <script type="text/javascript" src="jquery.url.js"></script> <script type="text/javascript"> $().ready ( function() { $('#sample-get').find('a').click ( function() { var url = $.url ( $(this).attr('href') ); $.ajax ({ type: 'GET', url: 'send.php', cache: false, data: url.attr ( 'query' ), success: function ( data, dataType ) { $('#test').html ( data ); }, error: function ( XMLHttpRequest, textStatus, errorThrown ) { this; alert('Error : ' + errorThrown); } }); return false; }); 【HTML(PHP)部分】 $keyword='テスト'; $keyword=urlencord($keyword);//urlエンコード echo<<<EOF <div id="sample-get"> <a href="./test.php?keyword=$keyword&cate=1"><img src="images/sample1.png" alt="sample1" height="200" width="200"></a> </div> EOF; 【PHP部分(send.php)】 <?php echo $_GET['keyword']; echo urldecord($_GET['keyword']); echo $_GET['cate']; ?>

    • ベストアンサー
    • AJAX
  • 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で質問です。

    jQueryで質問です。 オブジェクトA、Bがあるとします。 Aをドラッグすると、mousedownかdragstartの段階で要素がBに置き換わってドラッグさせるような動きは可能でしょうか。 作成中のソースを記載します。 <html> <head> <title>test</title> <script type="text/javascript" src="./jquery.min.js"></script> <script type="text/javascript" src="./ui/jquery.ui.core.js"></script> <script type="text/javascript" src="./ui/jquery.ui.widget.js"></script> <script type="text/javascript" src="./ui/jquery.ui.mouse.js"></script> <script type="text/javascript" src="./ui/jquery.ui.draggable.js"></script> <script type="text/javascript" src="./ui/jquery.ui.droppable.js"></script> <script type="text/javascript"> $(function(){ obj1 = $("#box"); obj2 = $('<div style="width:200px;height:200px;background:red;">B</div>'); obj1 .mousedown( function(){ obj1.replaceWith(obj2); obj2.draggable(); } ); }); </script> </head> <body> <div style="width:200px; height:100px; background: #cccccc;" id="box">A</div> </body> </html> これだと、Aのドラッグを一度解除して、Bをドラッグすると上手くいきますが、1回のモーションでBをドラッグさせたいのです。 宜しくお願いします。

  • Jquery　a href="javascript:名前('.$データ.')">の方法でString（文字）を渡す方法

    一部不備ありましたので、再度質問です。。 すみません 初めまして、jqueryを勉強し始めている初心者です。。 a href="javascript:名前('.$データ.')">の方法で データにString(文字)を持たせ、JQUERYを利用して、別のphpファイル（testo2.php）に値を渡し、 そのphpファイル（testo2.php）そのloadで読みたいのですが、うまくいきません この方法ではできないのでしょうか？ このa href="javascript:名前('.$String型.')の方法を何とか 利用したいと思ってますので、ご存知の方いましたら、 教えていただけないでしょうか。。。？ また別方法があれが教えていただけないでしょうか？ （input hidden 等以外のa href="javascript:名前('.$String型.')的な方法） 何度もすみません。。。 何ぶん、勉強初めて、1ヶ月弱のため、不備等がれば、すみません。 環境、jquery1.4, PHP5.0, eclipse3.5 //-----testo1.php <html> <head> <script type="text/javascript" src="jquery1.4.js"></script> <script type="text/javascript" src="tes.js"></script> <title></title> </head> <body> <?php //$id=1;(数字)の場合は値はわたせる、String 型の値の渡し方 //<a href="javascript:名前('.$文字列(String型).')">前のページ</a> //でJQUERYを利用して、別のphpファイル（testo2.php）にを渡し //loadで読みたい。 $id='文字列aaa'; <a href="javascript:value('.$id.')">前のページ</a> ?> <div id="box">ここに値を表示したい</div> </body></html> //----tes.js function value(id) {$("#box").load("php/tt.php",{id:id});} //------testo2.php <html> <head> <script type="text/javascript" src="jquery1.4.js"></script> <script type="text/javascript" src="tes.js"></script> <title></title> </head> <body> <?php echo $_POST['id'];//文字列String型を受けたい。 ?> </body></html>

  • jqueryでの文字置換について

    jqueryを使った文字の置換を行いたいのですがうまくいきません。 どなたかお詳しい方、ご教授いただけますでしょうか。 よろしくお願いします。 ■行いたいこと <div class="bbb"><img src="0123.jpg"></div> をwindow読み込み時に <div class="bbb"><img src="0123s.jpg"></div> と置き換えしたい。 javascriptのソースは以下の通りです。 <script src="jquery-min.js"></script> <script type="text/javascript"> <!-- $(function(){ var aaa = $('.bbb'); aaa.html().replace(/.jpg/ig, "s.jpg"); }); // --> </script>

  • 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に返す値 ?>

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

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する