Ajax：JSONで通信エラー

Question

商品登録のフォームを作成しています。
Ajaxを使用して、登録商品をDBに登録する作業を行っています。
dataType : "json"でDB登録はできるのですが、通信エラーにつながります。
dataType : "text"であると問題なく通信もでき、DB登録も可能です。
デバッグを確認したところ、

$result = array();
            while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
                $result[] = array(
                  // ここでデバッグが飛んでしまう。
                   $hoge1=>$row['number'];
                   $hoge2=>$row['name'];
                   $hoge3=>$row['price'];
                   $hoge4=>$row['password'];
                   $hoge5=>$row['confirmpass'];
                );
            }

上記に記載したよう、デバッグが飛んでしまいます。
そのため、ここで配列に変換できていないことが分かったのですが、ここからどうやってJSONでも通信が成功するのかを解決できません。
詳しい方法を教えていただけたら幸いです。

// 登録ボタン押下
        if(isset($_POST['signupBtn'])) {
            $hoge1=$_POST['number'];
            $hoge2=$_POST['name'];
            $hoge3=$_POST['price'];
            $hoge4=$_POST['password'];
            $hoge5=$_POST['confirmpass'];

            // 値はバインドさせる
            $sql = 'INSERT INTO table(number, name, price, password)VALUES(?, ?, ?, ?)';
            // SQLをセット
            $stmt = $pdo->prepare($sql);
            // SQL実行
            $stmt->execute(array($hoge1, $hoge2, $hoge3, $hoge4, $hoge5));
            // 登録情報をDBに配列で挿入
            // 先ほど追加したデータを取得
            // idはlastInsertId()で取得できる
            $last_id = $pdo->lastInsertId();
            $sql = "SELECT id, number, name, price, password FROM table WHERE id = ?";
            // SQLをセット
            $stmt = ($pdo->prepare($sql));
            // SQLを実行
            $stmt->execute(array($last_id));
            // 配列宣言
            $result = array();
            while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
                $result[] = array(
                   $hoge1=>$row['number'];
                   $hoge2=>$row['name'];
                   $hoge3=>$row['price'];
                   $hoge4=>$row['password'];
                );
            }
            var_dump($row);
            header('Content-Type: application/json');
            echo json_encode($result);
        }

 $(function() {
                $("#signupBtn").on("click", function() {
                    // actionで指定されたURLへ遷移しないようにする
                    event.preventDefault();
                    // 新規登録フォームの入力値を取得
                    const number= $("#number").val();
                    const name = $("#name ").val();
                    const price= $("#price").val();
                    const password = $("#password ").val();
                    const confirmpassword = $("#confirmpassword ").val();
                    
                    // 入力チェック
                    if(number== '') {
                        alert("商品番号を入力してください");
                    } else if (name == '') {
                        alert("商品名を入力してください");
                    } else if (price== '') {
                        alert("価格を入力してください");
                    } else if (password == '') {
                        alert("パスワードを入力してください");
                    } else if (confpassword == '') {
                        alert("確認用パスワードを入力してください");
                    } else if (password != '' && confpassword != '' && password != confpassword ) { 
                        // パスワード確認用
                        alert("パスワードの値が一致しません。");
                    } else {
                        // 登録確認モーダル
                        if (window.confirm('この内容で登録してもよろしいですか？')) {
                            $.ajax( {
                                type: "POST",
                                url: "http://localhost/hogehoge/hoge.php",
                                dataType : "json",
                                data: {
                                    number: "number",
                                    name: name,
                                    price: price,
                                    password: password,
                                    confirmpass: confirmpass,
                                }
                            }).done(function(result) {
                                // 成功時
                                alert("登録に成功しました。");
                                console.log('通信成功');
                                console.log(result);
                            }).fail(function(jqXHR, textStatus, errorThrown) {
                                // 失敗時
                                alert('登録に失敗しました。');
                                console.log("jqXHR          : " + jqXHR.status); // HTTPステータスが取得
                                console.log("textStatus     : " + textStatus);    // タイムアウト、パースエラー
                                console.log("errorThrown    : " + errorThrown.message); // 例外情報
                            }).always(function() {
                                // 通信が完了したときの処理
                                $("#signupForm").modal('hide'); // モーダルを閉じる
                            });
                        }
                    }
                });
            });

// テーブル
    $dsn = "mysql:host=localhost;dbname=dbname;charset=utf8;";
    $user = 'root';
    $pass = '';
    try{
        $pdo = new PDO($dsn,$user,$pass);
        echo "DB接続成功<br>";
        $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); 
        $pdo->setAttribute(PDO::ATTR_EMULATE_PREPARES, false); 
        $pdo->exec('create table if not exists m_employee(
            id not null auto_increment primary key,
            name not null,
            price not null,
            password not null,
        )');
 } catch (PDOException $e) {
        echo "DB接続失敗 > " . $e->getMessage();
        die();
    }

Comments

[K_3578]

よく間違えられますがデバックじゃなくて"デバッグ"です。

[xxx0_0xxx]

「デバッグ」なんですね！
教えていただきありがとうございます。

[m.ts10806]

debug
だから。

[K_3578]

ん･･･？直ってなくないか？
>上記に記載したよう、デバックが飛んでしまいます。 とか。

コード内のコメントとか

Answer 1

var_dump($row);

ここで余計な出力が行われてレスポンスがjsonにならないからでは。
他にも返したい情報とは無関係の出力がないか確認してください。
PHPタグ外はすべて出力となるので、スペースはおろか改行にも注意が必要です。

Comments

[K_3578]

m.ts10806さん
>開業
typoしてます。

[m.ts10806]

ご指摘ありがとうございます。
時々スマホで回答してるとそのままやっちゃってますね。

[xxx0_0xxx]

m.ts10806さん
いつもご回答ありがとうございます。
ご提示いただいた通り、var_dump($row);を削除し、
そのほかにもコメント等を削除いたしました。
しかし、やはりjsonでは通信エラーが起こってしまいます・・・
他に考えられる原因はあるのでしょうか？

[m.ts10806]

コメントは削除する必要ないとは思いますが。
何のエラーかにもよりますね。

[m.ts10806]

コピペしてください。

[xxx0_0xxx]

jqXHR : 200
textStatus : parsererror
errorThrown : Unexpected token D in JSON at position 0
上記エラーがGoogleのデバックに表示される状態です。
配列の作り方が悪いのでしょうか＞＜

[kei344]

echo "DB接続成功<br>";の「D」では？

[m.ts10806]

そうですね。
dataType をJSONにしたからには全てのレスポンスをJSON形式にする必要があります。

[m.ts10806]

一字目から違うのでそのように出ているものと。

[m.ts10806]

>Googleのデバック
GoogleじゃなくGoogle Chromeでしょうし、見られているのはコンソールですし、
先に指摘が合ったようにデバッグですし（debug だから。 https://ja.wikipedia.org/wiki/%E3%83%87%E3%83%90%E3%83%83%E3%82%B0 ）

このあたりの用語は正しく使わないと話が通じません。

[xxx0_0xxx]

いろいろご指摘ありがとうございます。
以後気をつけます！

[xxx0_0xxx]

kei344さん
ご回答ありがとうございます。
echo "DB接続成功<br>";の「D」では？
こちらも削除してみたのですが、やはり通信エラーになります・・・
textタイプでは送れるのですが、謎です＞＜

[m.ts10806]

結局私の回答に落ち着きます。
余計な出力があるからです。

[m.ts10806]

コードがそのまま提示されない現状では他者にはこれ以上応えようがないです。

[m.ts10806]

ちなみにPHPがシステム的に出力するエラーも含みます。
JSONのエラーに１文字しか出ないのはそこがおかしいからだけ。
画面で確認したいならリクエストをGETで送ってブラウザからクエリストリング付きでアクセスすると良いです。