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

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

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

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

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

解決済

4回答

3690閲覧

AJAXでphpからJSONの値が受け取れない

hatsuzo

総合スコア56

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

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クリップ

投稿2022/09/18 07:17

いつもお世話になっております。

jQuery+PHPで、PHPでDBを検索した結果を元のhtmlに戻そうと思っているのですが、ajaxでJSON形式で結果を受け取るところからしてうまく動きません。
よくある事例だと思い、ネット上で調べ、最初は動いたのですが、パラメタを追加し、
配列の要素名を変えてからおかしくなってしまったようです。
パラメタは付けても変化はないので、配列の渡し方に問題があるのだと思います。
根本的な間違いをおかしているのだとは思いますが、アドバイスを頂ければ幸いです。

実現したいこと

元のスクリプト(docs.php)より、フォーム上に入力した値をパラメタとして、ajax通信で別のスクリプト(docs01.php)から返した値を元のフォームに返す。
うまくいかないので、初期化した配列の値を受け渡しても同じ結果になった。

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

コンソールログに失敗時のerror.message を表示したところ、

log

1XMLHttpRequest : 200 2textStatus : parsererror 3errorThrown : Unexpected token '<', "<br /> 4<b>"... is not valid JSON

のエラーとなりました。

該当のソースコード

呼び出し元

html

1<html> 2<head> 3<meta http-equiv='Content-Type' content='text/html; charset=utf-8'> 4<title>PHP TEST</title> 5<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 6<script type="text/javascript"> 7$(function(){ 8 // AjaxでPHPからJSONデータを受け取る 9 $('[name="ctr_srch"]').click(function() { 10 var sos = $('[name="sosnm"]').val(); 11 var str = $('[name="tkstr"]').val(); 12 try { 13 if (str == '') { 14 alert("必ず検索条件を入れて下さい。"); 15 throw new Error('終了します'); 16 } 17 // ajax送信 18 ctrmst_get(str,sos); 19 } catch (e) { 20 console.log(e.message); 21 } 22 }); 23 24 function ctrmst_get(str,sos){ 25 $.ajax({ 26 type: "POST", 27 url: 'docs01.php', 28 dataType: "json", 29 data: { 30 str : str, 31 sos : sos 32 }, 33 beforeSend: function(xhr, settings) { 34 // ajax送信前の処理 35 }, 36 complete: function(xhr, status) { 37 // ajax応答後の処理 38 }, 39 success: function(data) { 40 // ajax通信成功時の処理 41 var html = ""; 42 if (data.length > 0) { 43 html = "<table class='pure-table'>\n"; 44 html += "<thead>\n"; 45 html += "<tr>\n"; 46 html += "<th>コード</th>\n"; 47 html += "<th></th>\n"; 48 html += "<th>得意先名</th>\n"; 49 html += "<th>担当者名</th>\n"; 50 html += "<th>最終売上日</th>\n"; 51 html += "<th>区分</th>\n"; 52 html += "</tr>\n"; 53 html += "</thead>\n"; 54 html += "<tbody>\n"; 55 for (var i = 0; i < data.length; i++) { 56 html += "<tr>\n"; 57 html += "<td>" + data[i].ctktkcd + "</td>"; 58 html += "<td>" + data[i].ctktksc + "</td>"; 59 html += "<td>" + data[i].ctrtrnm + "</td>"; 60 html += "<td>" + data[i].csysynm + "</td>"; 61 html += "<td>" + data[i].ctkurdt + "</td>"; 62 html += "<td>" + data[i].ckbtsnm + "</td>\n"; 63 html += "</tr>\n"; 64 } 65 html += "</tbody>\n"; 66 html += "</table>\n"; 67 } else { 68 html = "データはありませんでした。"; 69 } 70 $("#userlist").html(html); 71 }, 72 error: function(xhr, status, error) { 73 // ajax通信成失敗の処理 74 alert("error"); 75 console.log("XMLHttpRequest : " + xhr.status); 76 console.log("textStatus : " + status); 77 console.log("errorThrown : " + error.message); 78 } 79 }); 80 } 81}); 82</script> 83</head> 84<body> 85<form name="f" action="./docs01.php" method="post"> 86 <input type="text" name="sosnm" value="10301"> 87 <input type='text' name="tkstr" placeholder="文字の一部を入力して下さい"> 88 <a name="ctr_srch" href="javascript:void(0);">検索</a> 89</form> 90<div id="userlist"></div> 91</body> 92</html>

呼び出し先(docs01.php)

php

1<?php 2$str = $_POST["str"]; 3$sos = $_POST["sos"]; 4echo json_encode($data); 5$ary=[]; 6$ary=array( 7 array( 8 'ctktkcd'=>'11111', 9 'ctktksc'=>'11', 10 'ctrtrnm'=>'白百合商事', 11 'csysynm'=>'〇〇太郎' 12 'ctkurdt'=>20200412, 13 'ckbtsnm'=>'倒産' 14 ), 15 array( 16 'ctktkcd'=>'22222', 17 'ctktksc'=>'22', 18 'ctrtrnm'=>'白馬商事', 19 'csysynm'=>'〇〇次郎' 20 'ctkurdt'=>20200411, 21 'ckbtsnm'=>'廃業' 22 ), 23); 24$jsondata = json_encode($ary); 25echo $jsondata; 26?>

試したこと

呼び出し元はDBをアクセスした結果を配列で戻していたのですが、切り分けのため、配列の要素名を同じにして、値を直接初期化した配列にしたのですが、結果は同じでした。
配列の書き方を色々変えてみましたが、エラーメッセージに、
unexpected non-whitespace character after JSON data
と出る場合もあります。

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

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

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

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

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

guest

回答4

0

自己解決

すみません。直接の原因は、配列を初期化する時に、カンマが1つ抜けていたことでした。
$ary=array(
array(
'ctktkcd'=>'11111',
'ctktksc'=>'11',
'ctrtrnm'=>'白百合商事',
'csysynm'=>'〇〇太郎' <----- ここのカンマ
'ctkurdt'=>20200412,
'ckbtsnm'=>'倒産'
),
array(
'ctktkcd'=>'22222',
'ctktksc'=>'22',
'ctrtrnm'=>'白馬商事',
'csysynm'=>'〇〇次郎' <--- ここのカンマ
'ctkurdt'=>20200411,
'ckbtsnm'=>'廃業'
),
);

派生した問題は元のソースを触った結果に発生した別問題のようですので、元の質問につきましては、一旦クローズとさせて頂きたいと思います。
お騒がせて申し訳ありませんでした。

投稿2022/09/20 05:37

hatsuzo

総合スコア56

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

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

0

ステータスコードは200番なので単純にJSON文字列が返って来て無いだけだと思います。
シンプルに下記コードでレスポンスだけ出力して結果を確認してみて下さい。

php

1<?php 2$ary=[]; 3$ary=array( 4 array( 5 'ctktkcd'=>'11111', 6 'ctktksc'=>'11', 7 'ctrtrnm'=>'白百合商事', 8 'csysynm'=>'〇〇太郎' 9 'ctkurdt'=>20200412, 10 'ckbtsnm'=>'倒産' 11 ), 12 array( 13 'ctktkcd'=>'22222', 14 'ctktksc'=>'22', 15 'ctrtrnm'=>'白馬商事', 16 'csysynm'=>'〇〇次郎' 17 'ctkurdt'=>20200411, 18 'ckbtsnm'=>'廃業' 19 ), 20); 21$jsondata = json_encode($ary); 22header("Content-Type: application/json; charset=utf-8"); 23echo $jsondata; 24?>

投稿2022/09/20 04:58

HS1111

総合スコア91

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

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

0

補足ですが、POSTしたJSON形式データーは$_POSTグローバル変数には入らないと思います。

PHP

1$json = file_get_contents('php://input'); 2$data = json_decode($json, true);

と、したいのでは?

投稿2022/09/18 08:06

編集2022/09/18 08:08
HS1111

総合スコア91

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

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

0

echo json_encode($data);

の$data変数はどこから出て来ましたか?

それとレスポンスをJSONで返す場合は

php

1header("Content-Type: application/json; charset=utf-8");

が必要だと思います。

その前にエラー出力がレスポンスされていませんか?

投稿2022/09/18 07:46

HS1111

総合スコア91

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

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

hatsuzo

2022/09/18 14:30

コメント有難うございます。 > echo json_encode($data); の1行は、元ソース及びデバッグ段階での消し忘れです。大変失礼しました。 > header("Content-Type: application/json; charset=utf-8"); はJSONで値を返す時には必要なのですね。 ソースを修正する前は入れなくもなぜか動いていました。 このソースに追加してもみましたが、結果は変わらずでした。
HS1111

2022/09/19 00:59

補足にも書きましたが$_POST["str"]部分でエラーが出てませんか? Chromeとかのデベロッパーツールでレスポンスの内容を確認してみて下さい。 JSON文字列以外のなにかがレスポンスされている筈です。
hatsuzo

2022/09/20 04:46

コメントありがとうございます。 無知で申し訳ないですが、受け取った側のPHPだと、コンソールには何も出てこないので、 php_errors.logを見たところ、エラーは出ていました。 配列の初期化をする時に、カンマ(,)が1つ抜けているという凡ミスを犯していましたので、これで解決と思いきや、php_errors.logのエラーは何も出なくなりましたが、ブラウザのコンソールログのエラーは、 Unexpected non-whitespace character after JSON at position 22 に変わりました。at position 22 の意味が分らないので、JSONに渡す前の配列がおかしいとは思いますが、 phpで変数の値をダンプしようと思うのですが、ajaxの呼び出し先であるPHPの場合は、別のファイルにテキストで出力する等しないダンプは出来ないのでしょうか?
hatsuzo

2022/09/20 05:40

HS1111さん、コメント頂きまして有難うございました。 別に発生したエラーは、元々のソースに同じ修正を施したもので、質問とは別問題でした。 どうもお騒がせしました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問