前提・実現したいこと
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/ツールのバージョンなど)
ここにより詳細な情報を記載してください。