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

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

新規登録して質問してみよう
ただいま回答率
85.50%
PHP

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

jQuery

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

Ajax

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

Q&A

2回答

1362閲覧

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

singorira

総合スコア6

PHP

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

jQuery

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

Ajax

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

0グッド

0クリップ

投稿2018/06/15 15:30

編集2022/01/12 10:55

前提・実現したいこと

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/ツールのバージョンなど)

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/06/16 01:32

念のためjson.phpをご提示ください。
kei344

2018/06/16 01:57

質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
m.ts10806

2018/06/16 03:08

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

2018/06/16 04:54 編集

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

2018/06/16 06:38

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

回答2

0

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

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

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

PHP

1 $.ajax({ 2 type: "GET", 3 url: "json.php", 4 dataType: "json", 5 })

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

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

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

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

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

投稿2018/06/15 23:05

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

singorira

2018/06/15 23:56

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

退会済みユーザー

2018/06/16 03:24 編集

それ、fail()側で受け取ってる状態でしょ? そっちに行ってる時点だめだから ajax走らせるんじゃなくて、ブラウザのURL欄に http://サーバ名/json.php みたいにしてアクセスして、 ブラウザに何が表示されるか確認しようって話なの。 で、JSONっぽいのがブラウザに表示されるなら、その内容を質問に追記すると、なんでJSONパースに失敗してるか、誰かが教えてくれるよ。
singorira

2018/06/16 06:53

ご指摘ありがとうございます。 json.php単体での結果を追記いたしました
退会済みユーザー

退会済みユーザー

2018/06/16 09:58

えっとね、わかった。 \u5de5\u7a0b\u756a\u53f7 ← これ、Unicode(UTF-16) JavaScriptってUTF-8前提だから、それでパースエラーしてる。
退会済みユーザー

退会済みユーザー

2018/06/16 10:01

ちょっと違うか。
退会済みユーザー

退会済みユーザー

2018/06/16 10:02

どうやったら同じ状態にできるんだろ? これ。
退会済みユーザー

退会済みユーザー

2018/06/16 10:06

かなりちがうかも。適当な事いった。今、luckerお兄さん、適当な事言った。
退会済みユーザー

退会済みユーザー

2018/06/16 10:11

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

退会済みユーザー

2018/06/16 10:12

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

退会済みユーザー

2018/06/16 10:15

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

退会済みユーザー

2018/06/16 10:17

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

0

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

投稿2018/06/15 15:34

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

singorira

2018/06/15 23:43

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

退会済みユーザー

2018/06/16 04:33

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

2018/06/16 06:52

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問