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

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

ただいまの
回答率

87.49%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 114

score 1

前提・実現したいこと

顧客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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

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

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • yambejp

    2021/10/14 09:25

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

    キャンセル

  • kei344

    2021/10/14 12:52

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

    キャンセル

回答 1

checkベストアンサー

+1

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2021/10/14 10:06

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

    キャンセル

  • 2021/10/14 10: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'];
    }

    キャンセル

  • 2021/10/14 10:41

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

    キャンセル

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

  • ただいまの回答率 87.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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