いつもお世話になっております。
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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。