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

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

ただいまの
回答率

90.33%

  • PHP

    21369questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • jQuery

    7118questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Ajax

    1156questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

ajaxにてボタンクリックでのPHPを使用したデータ呼び出し

受付中

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 540

singorira

score 2

 前提・実現したいこと

http://webcake.no003.info/webdesign/jquery-ajax-php-json-sample.html
こちらのサイトをコードを使用して、手持ちのmySQLからのデータをPHP経由にて
表示させることはできました。
これをボタンイベントで表示させたいのですが上手くいきません。
JQuery、javascriptは始めたばかりで知識が無く、何卒宜しくお願い致します。

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

Bdoyの中に入れ
オンクリックイベント後に挿入しても
// エラーメッセージの表示
まで飛んでいってしまいます。

エラーメッセージ

 該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>jQuery & Ajax通信を使ってPHPからJSON形式のデータを取得して表示するサンプル</title>

</head>
<body>
        <form method="POST">
                <button id="btn">button</button>
        </form>

        <script src="https://code.jquery.com/jquery-1.9.0.min.js"></script>
        <script>

        $(function() {
  //ボタンクリック
  $('#btn').click(function() {


          /**
           * Ajax通信メソッド
           * @param type  : HTTP通信の種類
           * @param url   : リクエスト送信先のURL
           * @param data  : サーバに送信する値
           */
          $.ajax({
            type: "POST",
            url: "json.php",
            dataType: "json",
          }).done(function(data, dataType) {
            // successのブロック内は、Ajax通信が成功した場合に呼び出される

            // 結果が0件の場合
            if(data == null) alert('データが0件でした');

            // 返ってきたデータの表示
            var $content = $('#content');
            for (var i =0; i<data.length; i++) {
              $content.append("<li>" + data[i].名前 + "</li>");
            }
          }).fail(function(XMLHttpRequest, textStatus, errorThrown) {


            // エラーメッセージの表示
            alert('Error : ' + errorThrown);
          });
        });
            });
        </script>

      <ul id="content"></ul>

</body>
</html>

json.php

<?php

// 接続文字列 (PHP5.3.6から文字コードが指定できるようになりました)
$dsn = 'mysql:dbname=xxx;host=xxx.xxx.0.60;charset=utf8';

// ユーザ名
$user = 'xxx';

// パスワード
$password = 'xxxx';

try
{
    // nullで初期化
    $users = null;

    // DBに接続
    $dbh = new PDO($dsn, $user, $password);

    // 'users' テーブルのデータを取得する
    $sql = "select * from 名簿 where 名前 = '田中'";
    $stmt = $dbh->query($sql);

    // 取得したデータを配列に格納
    while ($row = $stmt->fetchObject())
    {
        $users[] = array(
            '名前'=> $row->名前
            ,'誕生日' => $row->誕生日
            );
    }

    // JSON形式で出力する
    header('Content-Type: application/json');
    echo json_encode( $users );
    exit;
}
catch (PDOException $e)
{
    // 例外処理
    die('Error:' . $e->getMessage());
}


です

json.phpを直接走らせた時にブラウザに表示されていますデータは

[{"\u5de5\u7a0b\u756a\u53f7":"田中","\u53d7\u6ce8\u65e5":"2004-08-06"},{"\u5de5\u7a0b\u756a\u53f7":"田中","\u53d7\u6ce8\u65e5":"2005-08-02"},
{"\u5de5\u7a0b\u756a\u53f7":"田中","\u53d7\u6ce8\u65e5":"2017-08-05"}]


です

 試したこと

ここに問題に対して試したことを記載してください。

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

ここにより詳細な情報を記載してください。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • mts10806

    2018/06/16 12:08

    fail側に入ってるってことですよね。 json.phpに問題があるとしか思えません。 $row->名前 ←この取り方合ってるんでしょうか。もしかしたらExceptionのほうに入っているかもしれません。$e->getMessage()は何を出力していますか?

    キャンセル

  • singorira

    2018/06/16 13:53 編集

    json.phpを直接叩いて実行すると、$e->getMessage()には飛ばず
    ブラウザ上に必要とする結果のjsonデータが表示されます。

    キャンセル

  • mts10806

    2018/06/16 15:38

    $e->getMessage() が見れる時点で、失敗してるじゃないですか。問題「あり」ですよ。Exceptionは「異常」です。データ取得処理に何かしら異常が発生しています。たまたまdataType;JSONですのでJSONで返ってきているように見えるかもしれませんが、失敗してます。どの時点で失敗しているかデバッグして確かめてください。

    キャンセル

回答 2

+2

初心者が $.ajax() で必ずはまるのは {dataType: "json"} でアクセスした結果、JSONパースに失敗してエラー処理が呼ばれるんだけど、エラー理由が全く確認できなくて対処出来ないパターンなんだよね。

{dataType: "html"}とかでアクセスするとJSONパースしないから通信さえ正常にできていればパースエラーが起きないのでレスポンスにあるdataをConsole.log()かなんかして確認することで1歩前進できるけど、ロジック自体かきかえなきゃいけないのでめんどくさい。

なので、POSTメソッドではなく、GETメソッドでajaxアクセスする。

 $.ajax({
            type: "GET",
            url: "json.php",
            dataType: "json",
        })

で、GETメソッドであれば、ブラウザのURL欄にアドレス入力するだけで、どんなレスポンスが返るかテストが出来る。

あとはブラウザに何が表示されるかで、エラーに対処するわけ。

例えば、500エラーとかが出てたらjson.phpの内部エラーだし、JSONコードが表示されたら構造が破綻してるのでJSONパースでコケてる。

実際のところ、今回の場合だとボタン押したら情報取ってくるだけのようなので、サーバーサイドに何か変更を行う処理ではないから、本来としてもPOSTメソッドではなくGETメソッドを使うべき。

まぁ、今のままでも500エラーとかならtextStatusで確認できるし、textStatusが200なのにコケてたらそりゃ、JSONパース失敗してるよねって話になるんだけど、結局レスポンスが確認しにくいので初心者には難しくなっちゃうからやっぱりGETでブラウザ直で叩いて内容確認したほうがいいと思う。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/06/16 08:56

    ご返答ありがとうございます。
    書いていただきました内容で使用してみたのですが
    chromeのコンソールでの表示は
    console.log(XMLHttpRequest.status);  0
    console.log(textStatus);  error
    console.log(errorThrown);  空欄
    と出力されました。
    どのように受け取ったらいいのでしょうか?

    キャンセル

  • 2018/06/16 12:24 編集

    それ、fail()側で受け取ってる状態でしょ? そっちに行ってる時点だめだから
    ajax走らせるんじゃなくて、ブラウザのURL欄に http://サーバ名/json.php みたいにしてアクセスして、
    ブラウザに何が表示されるか確認しようって話なの。

    で、JSONっぽいのがブラウザに表示されるなら、その内容を質問に追記すると、なんでJSONパースに失敗してるか、誰かが教えてくれるよ。

    キャンセル

  • 2018/06/16 15:53

    ご指摘ありがとうございます。
    json.php単体での結果を追記いたしました

    キャンセル

  • 2018/06/16 18:58

    えっとね、わかった。

    \u5de5\u7a0b\u756a\u53f7 ← これ、Unicode(UTF-16)

    JavaScriptってUTF-8前提だから、それでパースエラーしてる。

    キャンセル

  • 2018/06/16 19:01

    ちょっと違うか。

    キャンセル

  • 2018/06/16 19:02

    どうやったら同じ状態にできるんだろ? これ。

    キャンセル

  • 2018/06/16 19:06

    かなりちがうかも。適当な事いった。今、luckerお兄さん、適当な事言った。

    キャンセル

  • 2018/06/16 19:11

    うん、やっぱ、UTF-16BE(Unicode)だな。
    luckerお兄さん、土日は酒入ってるからたまに変なこと言うので自分で自分が信じられなくなる時、ある。

    キャンセル

  • 2018/06/16 19:12

    で、json_encode()の結果がUnicodeでエンコードされてるってことは、だ…

    キャンセル

  • 2018/06/16 19:13

    マニュアル
    http://php.net/manual/ja/function.json-encode.php
    すべての文字列データは、UTF-8 エンコードされていなければいけません。

    キャンセル

  • 2018/06/16 19:15

    PHPの内部エンコーディングがUTF-8じゃない or データベースに格納されてる文字列がUTF-8じゃない 
    的な話なのかなかな?

    キャンセル

  • 2018/06/16 19:17

    おーい、良い子、なんでUnicodeが出てきてるのかちょっと説明して。

    キャンセル

+1

さらっとしかみてませんが、問題は提示のコードにはなさそうです。
疑うべきは、json.php の方でしょう。
正しい形式で結果を返していますか?

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/06/16 08:43

    ご返答ありがとうございます。
    サンプルのように<head>内に同じスクリプトを入れると
    意図した結果がブラウザ上に、アクセス時に表示されますので
    形式は問題無いと思います。

    キャンセル

  • 2018/06/16 13:33

    問題ないって判断しちゃうなら、解決はできませんね。

    キャンセル

  • 2018/06/16 15:52

    知識不足で質問している中、勝手な判断してしまいましてすみません、、
    json.php単体での結果を追記いたしました

    キャンセル

同じタグがついた質問を見る

  • PHP

    21369questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • jQuery

    7118questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Ajax

    1156questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。