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

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

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
と出る場合もあります。

回答4件

自己解決

すみません。直接の原因は、配列を初期化する時に、カンマが１つ抜けていたことでした。
$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

総合スコア51

ステータスコードは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

補足ですが、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

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を見たところ、エラーは出ていました。配列の初期化をする時に、カンマ(,)が１つ抜けているという凡ミスを犯していましたので、これで解決と思いきや、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さん、コメント頂きまして有難うございました。別に発生したエラーは、元々のソースに同じ修正を施したもので、質問とは別問題でした。どうもお騒がせしました。

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