質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.13%

mysql→php→jsonをjs_Ajax dataの中身が自身のhtml

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,699

eruko

score 9

前提・実現したいこと

mysqlのデータをphpで取得し、jsonにして
Ajaxで取得したいのです。

発生している問題・エラーメッセージ

Ajaxのエラーでこちらがでました。

SyntaxError: Unexpected token < in JSON at position 0


こちらのサイトでも同じエラーので質問されている方がいらっしゃって、
形式がjsonじゃないからということでした。

そこでエラーの内容から
data:textに変更してconsole.logに出力してみると、
自身ののHTMLデータが入っていました。。。

初心者なのですが、ご教授下さい。

該当のソースコード

/* garally2.php */
require_once('./php/ponta.php');// DBに接続
$db->query('set names utf8');
$ps = $db->query('select * from wan2 order by ban desc');
$users = null;
while ($row = $ps->fetchObject())
  {
    $users[] = array(
      'ban'=> $row->ban
      ,'nam' => $row->nam
      ,'ttl' => $row->ttl
      ,'mes' => $row->mes
      ,'gaz' => $row->gaz
      ,'dat' => $row->dat
    );
  }
// JSON形式で出力する
  header('Content-Type: application/json; charset=utf-8');
  json_decode($users);
  $users = json_encode( $users );
  echo $users;
?>


"gallery1.php"に別jsファイルとしてこちらを読込ませました。
"gallery2.php"は同じディレクトリです。

$.ajax({
  type: "POST",
  data: "gallery2.php",
  dataType: "json",
  crossDomain: false,
  scriptCharset: "UTF-8",
  cache: false
}).done(function(data) {
  //console.log(data);
  console.log($.parseJSON(data));
}).fail(function(XMLHttpRequest, textStatus, errorThrown) {
    alert('Error : ' + errorThrown);
});

試したこと

まず、gallery2.phpを直接たたいたところ、形式はjsonの形になっているようでした。

[{"ban":"56","nam":"eru","ttl":"\u30dd\u30f3\u592a","mes":"\u306e\u306e","gaz":"20170905230540IMG_0322.JPG","dat":"2017-09-05"}
(中略)
{"ban":"47","nam":"eru","ttl":"fff","mes":"furanku","gaz":"2017090322121104_10_03_13_34.jpg","dat":"2017-09-03"}]

そこでエラーの内容から
data:textに変更してconsole.logに出力してみると、
自身のgallery1.phpのHTMLデータが入っていました。。。

$.ajax({
  type: "POST",
  data: "gallery2.php",
  dataType: "text",
  crossDomain: false,
  scriptCharset: "UTF-8",
  cache: false
}).done(function(data) {
  //console.log(data);
  //console.log($.parseJSON(data));
}).fail(function(XMLHttpRequest, textStatus, errorThrown) {
    alert('Error : ' + errorThrown);
});

なおしたことその2

php側で
json_decode()→json_encode()のみにして
header('Content-Type~はdatatypeがjsonなら不要なのではずした。
また、
指摘を頂いてphp側に
echo json_encode(array(
'ban' => 'ban1',
'nam' => 'nam1',
'ttl' => 'ttl1',
'gaz' => 'gaz1',
'dat' => 'dat1',
));

json側でちゃんと読込まれていたので
原因はphp側と判明。

<?php
require_once('./php/ponta.php');
$db->query('set names utf8');
$ps = $db->query('select * from wan2 order by ban desc');
$users = [];

while ($row = $ps->fetchObject())
{
    $users[] = array(
      'ban'=> $row->ban
      ,'nam' => $row->nam
      ,'ttl' => $row->ttl
      ,'mes' => $row->mes
      ,'gaz' => $row->gaz
      ,'dat' => $row->dat
    );
}

echo json_encode($users);
?>


一応js側

$.ajax({
  type: "POST",
  data: "gallery2.php",
  dataType: "json",
  crossDomain: false,
  scriptCharset: "UTF-8",
  cache: false
}).done(function(data) {
  //console.log(data);
  console.log($.parseJSON(data));
}).fail(function(XMLHttpRequest, textStatus, errorThrown) {
    alert('Error : ' + errorThrown);
});

補足情報(言語/FW/ツール等のバージョンなど)

PHP 5.6.31 
jquery-2.1.1

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+2

まず、PHPコードは下記のようにします。json_encode()です。$.ajax()dataTypeの設定は返された文字列をどのように解釈するかの設定で、jsonに設定しておけば勝手にjsonに解釈されます。

/* garally2.php */
require_once('./php/ponta.php');// DBに接続

$db->query('set names utf8');
$ps = $db->query('select * from wan2 order by ban desc');
$users = [];

while ($row = $ps->fetchObject())
{
    $users[] = array(
      'ban'=> $row->ban
      ,'nam' => $row->nam
      ,'ttl' => $row->ttl
      ,'mes' => $row->mes
      ,'gaz' => $row->gaz
      ,'dat' => $row->dat
    );
}

// JSON形式で出力する
echo json_encode($users);
?>

JavaScriptは下記のようにします。

$.ajax({
  type: "POST",
  url: "gallery2.php",
  dataType: "json",
  cache: false
}).done(function(data) {
  console.log(data);
}).fail(function(XMLHttpRequest, textStatus, errorThrown) {
  console.log(XMLHttpRequest, textStatus, errorThrown);
});

 追記1

うまくいかない原因として、JavaScriptが原因なのかPHPが原因なのか明確にします。
garally2.phpを下記のようにしてみます。正しく表示されればPHPが原因ということになります。逆に正しく表示されない場合は、JavaScriptが原因ということになります。

Content-Typeは上記に書いたようにdataTypeを指定すれば普通は必要ありません。

//garally2.php
echo json_encode(array(
    'ban' => 'ban1',
    'nam' => 'nam1',
    'ttl' => 'ttl1',
    'gaz' => 'gaz1',
    'dat' => 'dat1',
));

JavaScriptコンソールには「Parse Error」となっているので必ずなにかJson文字列として認識できない文字列が入っているはずですが、jQueryのバグの可能性もあります。
ですので、jQueryのバージョンをダウングレードしてみるのも良いかもしれません。

 追記2

■Jsonエンコードエラーチェック
Jsonのエンコードでエラーが発生している場合は下記のコードのようにjson_last_error()でチェックすることができます。エンコードエラーが発生していない場合は、下記のようにJson Lintチェッカーで構文チェックします。

■Jsonエンコードオプション
その他、Jsonエンコードではオプションを複数渡すことができます。PHPマニュアルのjsonの定義済み定数を参照してください。日本語のユニコードエスケープをさせないようにしたり、Json文字列の構文チェックすることを念頭に置いてインデントと改行でフォーマットして表示することも可能です。

■Json Lintチェッカー
Jsonフォーマットは下記のようなJson Lintでチェックできます。このようなチェッカーサイトでは、ピンポイントでどの行がフォーマットエラーなのか表示してくれます。
https://jsonlint.com/

ブラウザのデバッグ(F12)の「ネットワーク」などからレスポンスソース(JSON文字列)をそのまま上記サイトにコピー&ペーストしてJsonフォーマットをチェックします。

/* garally2.php */
require_once('./php/ponta.php');// DBに接続

$db->query('set names utf8');
$ps = $db->query('select * from wan2 order by ban desc');
$users = [];

while ($row = $ps->fetchObject())
{
    $users[] = array(
      'ban'=> $row->ban
      ,'nam' => $row->nam
      ,'ttl' => $row->ttl
      ,'mes' => $row->mes
      ,'gaz' => $row->gaz
      ,'dat' => $row->dat
    );
}

//JSONエンコードしてみる(エラーチェック用)
json_encode($users, JSON_UNESCAPED_UNICODE|JSON_PRETTY_PRINT);

$debug = [];

//JSONエンコードエラーチェック
switch (json_last_error()) {
    case JSON_ERROR_NONE :
        $debug = ['SUCCESS' => 'エラーは発生しませんでした'];
        break;
    case JSON_ERROR_DEPTH :
        $debug = ['FAIL' => '配列の深さが最大値を超えました'];
        break;
    case JSON_ERROR_STATE_MISMATCH :
        $debug = ['FAIL' => 'JSON の形式が無効、あるいは壊れています'];
        break;
    case JSON_ERROR_CTRL_CHAR :
        $debug = ['FAIL' => '制御文字エラー。おそらくエンコーディングが違います'];
        break;
    case JSON_ERROR_SYNTAX :
        $debug = ['FAIL' => '構文エラー'];
        break;
    case JSON_ERROR_UTF8 :
        $debug = ['FAIL' => '正しくエンコードされていないなど、不正な形式の UTF-8 文字'];
        break;
    case JSON_ERROR_RECURSION :
        $debug = ['FAIL' => 'エンコード対象の値に再帰参照が含まれています'];
        break;
    case JSON_ERROR_INF_OR_NAN :
        $debug = ['FAIL' => 'エンコード対象の値に NAN あるいは INF が含まれています'];
        break;
    case JSON_ERROR_UNSUPPORTED_TYPE :
        $debug = ['FAIL' => 'エンコード不可能な型の値が渡されました'];
        break;
    default :
        $debug = ['FAIL' => '不明なエラー - Unknown error'];
        break;
}

//日本語をユニコードエスケープしない(JSON_UNESCAPED_UNICODE)
//JSONをインデントと改行をつけて見やすい形式で表示(JSON_PRETTY_PRINT)
echo json_encode($debug + $users, JSON_UNESCAPED_UNICODE|JSON_PRETTY_PRINT);

exit();

 追記3

コメント欄で頂いた、エラーのJSON文字列をコピーしたところ先頭になぜかBOM(\ufeff)が入っていました。何かBOM付ファイルを参照していたりしないでしょうか?

DBから値を取得して配列を作成するときに、\n→<br>が必要な場合はnl2br()を行ってから下記のコードのように制御文字コードを削除するようにします。

下記のコードでもJsonの構文エラーが出る場合は、Jsonをそもそも表示する前に制御文字が出力されている可能性があるので、ob_start(), ob_end_clean()の行をコメントアウトしてみます。
ob_start(), ob_end_clean()間ですべての出力を切り捨てて、制御文字が出力されないようにします。

/* garally2.php */
//ob_start();
require_once('./php/ponta.php');// DBに接続

$db->query('set names utf8');
$ps = $db->query('select * from wan2 order by ban desc');
$users = [];

while ($row = $ps->fetchObject())
{
    foreach (['ban','nam','ttl','mes','gaz','dat'] as $column) {
        //制御文字を削除
        $value = preg_replace('/[\x00-\x1F\x80-\xFF]/', '', $row->{$column});
        //nl2br()付制御文字削除
        //$value = preg_replace('/[\x00-\x1F\x80-\xFF]/', '', nl2br($row->{$column}));
        $users[] = [$column => $value];
    }
}

//ob_start()からここまでの出力を切り捨て
//ob_end_clean();

//日本語をユニコードエスケープしない(JSON_UNESCAPED_UNICODE)
//JSONをインデントと改行をつけて見やすい形式で表示(JSON_PRETTY_PRINT)
echo json_encode($debug + $users, JSON_UNESCAPED_UNICODE|JSON_PRETTY_PRINT);

exit();

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/09/10 17:23

    先頭の\0を削除する方法はわからなかったのですが、
    とりあえず、js側でテキストデータとして取得し、
    data.trim()で空白を取り除き、
    jQuery.parseJSON()でjsonとして扱うことにしました。

    色々ありがとうございました。
    問題解決能力を日々はやめていきたいですw

    キャンセル

  • 2017/09/10 17:43

    すみません、既に解決済みでした。
    モヤモヤ感はありますが、方針が決まったということでとりあえず良かったです。

    キャンセル

  • 2017/09/10 18:37

    確かに最初、テキストエディターがBOMつきになっていました。
    よくないことがわかったので、そうじゃないのに変更したのですが、うまくいっていなかったのかもしれません。。。

    なんとなく、まやかしっぽい解決策な感は否めませんが
    許して下さい。

    ありがとうございます。

    キャンセル

+1

data: "gallery2.php", は url: "gallery2.php", では?

【jQuery.ajax() | jQuery API Documentation】
http://api.jquery.com/jquery.ajax/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/09/09 15:37

    そうなんです。。。
    dataType: "json",にすると
    .done()に入らず
    .fail()に入って
    エラーが表示されるのです。
    SyntaxError: Unexpected token  in JSON at position 0

    dataType:text,だと
    .done(function(data){
    console.log(data);
    })
    が表示されます。

    キャンセル

  • 2017/09/09 15:45

    Networkパネルで内容を確認して、それがパースできるか確認してみては?

    キャンセル

  • 2017/09/09 16:32

    NetworkパネルのPreviwで見るとちゃんとしたjsonで文字化けしないで表示されました。。。
    なぜdoneに入っていってしまうのか。。。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.13%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる