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

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

新規登録して質問してみよう
ただいま回答率
86.12%
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アプリケーションを実現することができます。

解決済

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

hatsuzo
hatsuzo

総合スコア49

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アプリケーションを実現することができます。

4回答

0リアクション

0クリップ

365閲覧

投稿2022/09/18 07:17

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

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

実現したいこと

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

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

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

log

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

のエラーとなりました。

該当のソースコード

呼び出し元

html

<html> <head> <meta http-equiv='Content-Type' content='text/html; charset=utf-8'> <title>PHP TEST</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ // AjaxでPHPからJSONデータを受け取る $('[name="ctr_srch"]').click(function() { var sos = $('[name="sosnm"]').val(); var str = $('[name="tkstr"]').val(); try { if (str == '') { alert("必ず検索条件を入れて下さい。"); throw new Error('終了します'); } // ajax送信 ctrmst_get(str,sos); } catch (e) { console.log(e.message); } }); function ctrmst_get(str,sos){ $.ajax({ type: "POST", url: 'docs01.php', dataType: "json", data: { str : str, sos : sos }, beforeSend: function(xhr, settings) { // ajax送信前の処理 }, complete: function(xhr, status) { // ajax応答後の処理 }, success: function(data) { // ajax通信成功時の処理 var html = ""; if (data.length > 0) { html = "<table class='pure-table'>\n"; html += "<thead>\n"; html += "<tr>\n"; html += "<th>コード</th>\n"; html += "<th></th>\n"; html += "<th>得意先名</th>\n"; html += "<th>担当者名</th>\n"; html += "<th>最終売上日</th>\n"; html += "<th>区分</th>\n"; html += "</tr>\n"; html += "</thead>\n"; html += "<tbody>\n"; for (var i = 0; i < data.length; i++) { html += "<tr>\n"; html += "<td>" + data[i].ctktkcd + "</td>"; html += "<td>" + data[i].ctktksc + "</td>"; html += "<td>" + data[i].ctrtrnm + "</td>"; html += "<td>" + data[i].csysynm + "</td>"; html += "<td>" + data[i].ctkurdt + "</td>"; html += "<td>" + data[i].ckbtsnm + "</td>\n"; html += "</tr>\n"; } html += "</tbody>\n"; html += "</table>\n"; } else { html = "データはありませんでした。"; } $("#userlist").html(html); }, error: function(xhr, status, error) { // ajax通信成失敗の処理 alert("error"); console.log("XMLHttpRequest : " + xhr.status); console.log("textStatus : " + status); console.log("errorThrown : " + error.message); } }); } }); </script> </head> <body> <form name="f" action="./docs01.php" method="post"> <input type="text" name="sosnm" value="10301"> <input type='text' name="tkstr" placeholder="文字の一部を入力して下さい"> <a name="ctr_srch" href="javascript:void(0);">検索</a> </form> <div id="userlist"></div> </body> </html>

呼び出し先(docs01.php)

php

<?php $str = $_POST["str"]; $sos = $_POST["sos"]; echo json_encode($data); $ary=[]; $ary=array( array( 'ctktkcd'=>'11111', 'ctktksc'=>'11', 'ctrtrnm'=>'白百合商事', 'csysynm'=>'〇〇太郎' 'ctkurdt'=>20200412, 'ckbtsnm'=>'倒産' ), array( 'ctktkcd'=>'22222', 'ctktksc'=>'22', 'ctrtrnm'=>'白馬商事', 'csysynm'=>'〇〇次郎' 'ctkurdt'=>20200411, 'ckbtsnm'=>'廃業' ), ); $jsondata = json_encode($ary); echo $jsondata; ?>

試したこと

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

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

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

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

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

同じタグがついた質問を見る

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アプリケーションを実現することができます。