PHP、Ajaxで連動するプルダウンをつくりたい

前提・実現したいこと

顧客IDプルダウンを選ぶと連動して案件IDプルダウンが変化するというものを作っています。Ajaxを使っているのですが、parsererrorが発生してしまいます。
何がおかしいんでしょうか？

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

Ajaxを使っているのですが、parsererrorが発生してしまいます。
何がおかしいんでしょうか？
失敗
index.php:148 XMLHttpRequest : 200
index.php:149 textStatus : parsererror
index.php:150 errorThrown : Unexpected token ポ in JSON at position 0

該当のソースコード

index.php

<?php
require_once '../../../app/config/config.php';

$get_time=date('Y/m/d H:i:s');


?>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../../style.css">
  <script
  src="https://code.jquery.com/jquery-3.6.0.js"
  integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
  crossorigin="anonymous"></script>
  
  <title>Document</title>
</head>
<body>

<header>
    <nav id="gnav">
      <ul class="inner">
      <li><a href="../../home/switch.php">HOME</a></li>
      <li><a href="../../time_card/">タイムカード</a></li>
      <li><a href="../../time_records/">タイムレコード</a></li>
        <li><a href="../../staffs/switch.php">スタッフ</a></li>
        <li><a href="../../customers/">顧客</a></li>
        <li><a href="../../task_statuses/">タスクステータス</a></li>
        <li><a href="../../tasks/">タスク</a></li>
        <li><a href="../../project_statuses/">案件ステータス</a></li>
        <li><a href="../../projects/">案件</a></li>
        <li><a href="../../dailys/">日報</a></li>
        
        
        <li><a href="../../login/logout.php">ログアウト</a></li>
      </ul>
    </nav>
  </header>
  <h1>時間記録登録画面</h1>


  <form action="create.php" method="post" id="form_time_records">
    <table border=1>
      <tr>
        <td>区分ID</td>
        <td><select name="category_id" id="category_id">
          <option value="">選択してください</option>
          <option value="予定">予定</option>
          <option value="実績">実績</option>
        </select></td>
      </tr>
      <?php 

try {
  $db = getDb(array(PDO::ATTR_EMULATE_PREPARES => false));
  $sql = 'SELECT * 
          FROM customers
        ';

  
  // echo "<pre>";var_dump($customer_name_val);echo "</pre>";
  $stmt = $db->query($sql);
  $customers_list =array();
} catch (PDOException $e) {
  exit;
  $message = $e->getMessage();
  echo $message;
}
// $row = $stmt->fetch();
  
  foreach($stmt as $row) {
    $customer_list[$row['id']] = $row['customer_name'];
  } 
  // echo "<pre>";var_dump($_POST);echo "</pre>";
  // echo $data['id'];

  // $_SESSION['customer_id'] = $data['customer_id'];
  // echo "<pre>";var_dump($_SESSION);echo "</pre>";
?>
<button type="button" id="test1">aaa</button>

<?php
// echo "<pre>";var_dump($_POST);echo "</pre>";
?>


      <tr>
        <td>顧客ID</td>
        <td><select class="customer_id" name="customer_id" id="customer_id">
          <option>選択してください</option>
          <?php foreach($customer_list as $key => $customer_name){
            echo '<option name"" value="'.$key.'">'.$customer_name.'</option>';
          }?>
            </select>
        </td>
        </tr>
      <tr>
        <td>案件ID</td>
        <td><select class="project_id" name="project_id" id="project_id">
          <option>選択してください</option>
            </select></td>
      </tr>
      <?php 

try {
  $db = getDb();
  $sql = "SELECT id, task_name
          FROM tasks
        ";

  
  // echo "<pre>";var_dump($customer_name_val);echo "</pre>";
  $stmt = $db->prepare($sql);
  $stmt->execute();
} catch (PDOException $e) {
  $message = $e->getMessage();
  echo $message;
}


  $data = $stmt->fetchAll(PDO::FETCH_ASSOC); 
  // echo "<pre>";var_dump($data);echo "</pre>";
  // echo $data['id'];
  
  foreach($data as $data_key=>$data_val) {
    @$data .= '<option value="'. $data_val['id'] .'">'. $data_val['task_name']."</option>";
  }
      
  ?>
      <tr>
        <td>タスクID</td>
        <td><select name="task_id" id="task_id">
        <?= $data . "$n"; ?>
            </select></td>
      </tr>
      <tr>
        <td>開始</td>
        <td><input type="text" name="start" id="start" value="<?= $get_time ?>"></td>
      </tr>
      <tr>
        <td>停止</td>
        <td><input type="text" name="end" id="end"></td>
      </tr>
      <?php 

try {
  $db = getDb();
  $sql = "SELECT staffs_id, name
          FROM staffs
        ";

  
  // echo "<pre>";var_dump($customer_name_val);echo "</pre>";
  $stmt = $db->prepare($sql);
  $stmt->execute();
} catch (PDOException $e) {
  $message = $e->getMessage();
  echo $message;
}


  $data = $stmt->fetchAll(PDO::FETCH_ASSOC); 
  // echo "<pre>";var_dump($data);echo "</pre>";
  // echo $data['id'];
  
  foreach($data as $data_key=>$data_val) {
    @$data .= '<option value="'. $data_val['staffs_id'] .'">'. $data_val['name']."</option>";
  }
      
  ?>
      <tr>
        <td>担当者ID</td>
        <td><select name="staffs_id" id="staffs_id">
        <?= $data . "$n"; ?>
            </select></td>
      </tr>
      <tr>
        <td>コメント</td>
        <td><input type="text" name="comment" id="comment"></td>
      </tr>
      <tr>
        <td>削除フラグ</td>
        <td><input type="text" name="delete_flg" id="delete_flg"></td>
      </tr>
    </table>
  </form>
  <button type="submit" form="form_time_records" name="">確認</button>
  <button type="button" onclick="location.href='../index.php'">戻る</button>

  
<script type="text/javascript">
$('#form').submit(function(e) { // formのsubmitに処理を登録する、引数としてEventのオブジェクトeを受け取る
  e.preventDefault(); // これを一行目に追加
});

$('button#test1').click(function() {
        console.log('クリックされました！');
    })

  $(function(){
    $('select#customer_id').on('change', function(){
      var customer_id = $(this).val();
      console.log(customer_id);
      //customer_val値をselect.phpへ渡す
    
      
$.ajax({
  url: './select.php',
  type: "POST",
  dataType: "text",
  crossDomain: false,
  data: customer_id
          
         
      }).done(function(data){
        console.log(data);
       
        // console.log(Array.isArray(data));

        if(data == null) alert('データが0件でした');
        //selectタグ（子）のoption値をいったん削除
        $('.project_id option').remove();
        //select.phpから戻ってきたdataの値をそれぞれoptionタグとして育成し、
        //.project_idにoptionタグを追加する
        // console.log(<?=__LINE__?>);

        $.each(data, function(id, name){

        
        $('#project_id').append($('<option>').text(name).attr('value', id));

      });
    }).fail(function(XMLHttpRequest, textStatus, errorThrown){
      console.log(<?=__LINE__?>);
      console.log("失敗");
      console.log("XMLHttpRequest : " + XMLHttpRequest.status);
      console.log("textStatus     : " + textStatus);
      console.log("errorThrown    : " + errorThrown.message);
    });

  


    });
  });
</script>


</body>
</html>

select.php

<?php
// error_log("error log test. output to file(test.log)\n",3,"./test.log");
// $json = file_get_contents('php://input');
// header('Content-Type: application/json');
// $_POST['customer_id'] = 1;


echo "<pre>";var_dump($_POST);echo "</pre>";
// exit;
if(isset ($_POST)){
  echo "ポストが来きてる";
  exit;
}

if(array_key_exists('customer_id' , $_POST )){
  echo "customer_id が来てない";
  exit;
}
echo "そもそもダメ";
exit;

require_once '../../../app/config/config.php';
//直接のページ遷移を阻止
// echo "<pre>";var_dump($_POST);echo "</pre>";
$request = isset($_SERVER['HTTP_X_REQUESTED_WITH']) ? strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) : '';
// if($request == 'xmlhttprequest') exit;
//DBへの接続
try {
  $db =getDb(array(PDO::ATTR_EMULATE_PREPARES => false));
} catch (exception $e) {
  exit('データベース接続失敗'.$e->getMessage());
}
//ajaxで渡ってきた値を元にprojectsテーブルから該当する案件を抽出
$customer_id = $_POST['customer_id'];
$sql = 'SELECT * FROM projects WHERE customer_id =:customer_id';
$stmt=$db->prepare($sql);
$stmt->bindValue(':customer_id', $customer_id, PDO::PARAM_INT);
$stmt->execute();

//抽出された値を$project_list配列に格納
$project_list = array();
foreach($stmt as $data){
  $project_list[$data['customer_id']] = $data['project_name'];
}
// echo "<pre>";var_dump($_POST);echo "</pre>";


//json形式でindex.phpへバックする
echo json_encode($project_list);

試したこと

console.logでエラーメッセージを出力

補足情報（FW/ツールのバージョンなど）

windows10
PHP Version 7.4.12

yambejp

2021/10/14 00:25

ソースをマークダウンしてください

kei344

2021/10/14 03:52

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

行動規範の内容に同意します

回答1件

ベストアンサー

select.phpが返すデータがjson型ではないということです
一旦dataTypeを"text"にして検証されるとよろしいかと

投稿2021/10/14 00:25

yambejp

総合スコア116724

jirojirojiro

2021/10/14 00:30

dataTypeを"text"にすると jquery-3.6.0.js:513 Uncaught TypeError: Cannot use 'in' operator to search for 'length' in ポストが来きてる at isArrayLike (jquery-3.6.0.js:513) at Function.each (jquery-3.6.0.js:382) at Object.<anonymous> (index.php:139) at fire (jquery-3.6.0.js:3500) at Object.fireWith [as resolveWith] (jquery-3.6.0.js:3630) at done (jquery-3.6.0.js:9796) at XMLHttpRequest.<anonymous> (jquery-3.6.0.js:10057) isArrayLike @ jquery-3.6.0.js:513 each @ jquery-3.6.0.js:382 （匿名） @ index.php:139 fire @ jquery-3.6.0.js:3500 fireWith @ jquery-3.6.0.js:3630 done @ jquery-3.6.0.js:9796 （匿名） @ jquery-3.6.0.js:10057 load（非同期） send @ jquery-3.6.0.js:10076 ajax @ jquery-3.6.0.js:9690 （匿名） @ index.php:119 dispatch @ jquery-3.6.0.js:5430 elemData.handle @ jquery-3.6.0.js:5234 ListPicker._handleMouseUp @ 不明とでてきてしまいます。初心者なので意味がよくわかりません。どういうことなんでしょうか？

yambejp

2021/10/14 00:44

doneの処理も検証用に変更してください .done(function(data){ console.log(data); })

jirojirojiro

2021/10/14 00:51

<pre>array(1) { [1]=> string(0) "" } </pre>ポストが来きてる jquery-3.6.0.js:513 Uncaught TypeError: Cannot use 'in' operator to search for 'length' in <pre>array(1) { [1]=> string(0) "" } </pre>ポストが来きてる at isArrayLike (jquery-3.6.0.js:513) at Function.each (jquery-3.6.0.js:382) at Object.<anonymous> (index.php:139) at fire (jquery-3.6.0.js:3500) at Object.fireWith [as resolveWith] (jquery-3.6.0.js:3630) at done (jquery-3.6.0.js:9796) at XMLHttpRequest.<anonymous> (jquery-3.6.0.js:10057) isArrayLike @ jquery-3.6.0.js:513 each @ jquery-3.6.0.js:382 （匿名） @ index.php:139 fire @ jquery-3.6.0.js:3500 fireWith @ jquery-3.6.0.js:3630 done @ jquery-3.6.0.js:9796 （匿名） @ jquery-3.6.0.js:10057 load（非同期） send @ jquery-3.6.0.js:10076 ajax @ jquery-3.6.0.js:9690 （匿名） @ index.php:119 dispatch @ jquery-3.6.0.js:5430 elemData.handle @ jquery-3.6.0.js:5234 ListPicker._handleMouseUp @ 不明 stringが" "ということはなにもかえってきていないということでしょうか？

yambejp

2021/10/14 00:55

select.phpにてコメントアウトしているはずのvar_dumpが実行されている時点で提示されているソースとやっていることが違うのだと思います

jirojirojiro

2021/10/14 01:06

最新のコードをマークダウンしました。

yambejp

2021/10/14 01:18

新たなselect.phpみましたが検証部分だけ実行されてexitしているので postを受け取ったかどうかチェックしているだけですよね？いったんバッサリけずってください $customer_id=filter_input(INPUT_POST,'customer_id'); だけで十分です sqlの発行部分は問題なさそうなので、念の為fetchで受け取ってみてください $project_list = array(); foreach($stmt->fetchAll(PDO::FETCH_ASSOC) as $data){ $project_list[$customer_id] = $data['project_name']; }

jirojirojiro

2021/10/14 01:41

var arr = JSON.parse(data) でうまくいきました。ありがとうございました。

行動規範の内容に同意します