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

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

新規登録して質問してみよう
ただいま回答率
85.50%
PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

3回答

3352閲覧

PHP,ajaxでプルダウンを連動させたい

tapp

総合スコア3

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2021/03/14 14:39

前提・実現したいこと

PHP、を使用して、社内での製品データ入力フォームを作成し、データ共有を
したいと考えております。現在はエクセルで実施していますが、PHPの勉強も
兼ねてデータ入力フォームの作成に踏み切りました。
MYSQLへのデータの格納、取り出しは実現できましたが、
ajaxを使用し入力フォームでプルダウンを連動させようとした際に
不明点が発生しました。
リンク内容
上記のサイトをそのままコピペしてmysqlを作成し動作を確認しましたが、メーカーの
プルダウンを選択後、車種のプルダウンに車名が入ってきませんでした。
注意すべき箇所等、ご教示頂けますでしょうか。

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

エラーメッセージは出ませんでした。ajaxのfailになる(コンソールログで失敗と表示される)だけでした。

該当のソースコード

PHP

1<?php 2 //DBへ接続 3 try { 4 $dsn = 'mysql:host=localhost;dbname=car_maker;charset=utf8'; 5 $user = 'username'; //root 6 $pass = 'password'; //root 7 $pdo = new PDO($dsn, $user, $pass, array(PDO::ATTR_EMULATE_PREPARES => false)); 8 } catch (Exception $e) { 9 exit('データベース接続失敗'.$e->getMessage()); 10 } 11 //makerテーブル から値を取得し、 id と name を $maker_list配列 に格納 12 $sql = "SELECT * FROM maker"; 13 $stmt = $pdo->query($sql); 14 $maker_list = array(); 15 while($row = $stmt -> fetch(PDO::FETCH_ASSOC)){ 16 $maker_list[$row['id']] = $row['maker_name']; 17 } 18?> 19 20<!DOCTYPE html> 21<html> 22 <head> 23 <meta charset="utf-8"> 24 <script src="js/jquery.min.js" charset="utf-8"></script> 25 <script type="text/javascript"> 26 $(function(){ 27 //selectタグ(親) が変更された場合 28 $('[name=car_maker]').on('change', function(){ 29 var maker_val = $(this).val(); 30 31 //maker_val値 を select.php へ渡す 32 $.ajax({ 33 url: "select.php", 34 type: "POST", 35 dataType: 'json', 36 data: { 37 maker_id: maker_val 38 } 39 }) 40 .done(function(data){ 41 //selectタグ(子) の option値 を一旦削除 42 $('.car_model option').remove(); 43 //select.php から戻って来た data の値をそれそれ optionタグ として生成し、 44 // .car_model に optionタグ を追加する 45 $.each(data, function(id, name){ 46 $('.car_model').append($('<option>').text(name).attr('value', id)); 47 }); 48 }) 49 .fail(function(){ 50 console.log("失敗"); 51 }); 52 53 }); 54 }); 55 </script> 56 <title>Ajax Sample</title> 57 </head> 58 <body> 59 <h1>Ajax Sample</h1> 60 <div class=""> 61 <span>自動車メーカー:</span> 62 <select class="car_maker" name="car_maker"> 63 <option>選択して下さい</option> 64 <?php foreach($maker_list as $key => $maker_name){ 65 echo '<option name="" value="'.$key.'">'.$maker_name.'</option>'; 66 }?> 67 </select> 68 <span>車種:</span> 69 <select class="car_model" name="car_model"> 70 <option class="">選択して下さい</option> 71 </select> 72 </div> 73 </body> 74</html>

PHP

1<?php 2 //直接のページ遷移を阻止 3 $request = isset($_SERVER['HTTP_X_REQUESTED_WITH']) ? strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) : ''; 4 if($request !== 'xmlhttprequest') exit; 5 //DBへの接続 6 //本来は db_connect関数 を作成して、DRYにした方が良いです。 7 try { 8 $dsn = 'mysql:host=localhost;dbname=car_model;charset=utf8'; 9 $user = 'username'; 10 $pass = 'password'; 11 $pdo = new PDO($dsn, $user, $pass, array(PDO::ATTR_EMULATE_PREPARES => false)); 12 } 13 catch (Exception $e) { 14 exit('データベース接続失敗'.$e->getMessage()); 15 } 16 //Ajaxで渡ってきた値をもとに modelテーブル から該当する model を抽出 17 $maker_no = $_POST['maker_no']; 18 $sql = 'SELECT * FROM model WHERE maker_id = :maker_id'; 19 $stmt=$pdo->prepare($sql); 20 $stmt->bindValue(':maker_id', (int)$maker_no, PDO::PARAM_INT); 21 $stmt->execute(); 22 23 //抽出された値を $model_list配列 に格納 24 $model_list = array(); 25 while($row = $stmt -> fetch(PDO::FETCH_ASSOC)){ 26 $model_list[$row['id']] = $row['maker_name']; 27 } 28 header('Content-Type: application/json'); 29 //json形式で index.php へバックする 30 echo json_encode($model_list); 31 ?>

試したこと

・他サイトのajaxの使用例と比較しましたが、サイトにより書き方が違って見えるので理解できず、
間違い箇所を判別できませんでした。
・index.phpファイルのajaxのdatatypeをjsonからtextにしたところ
「選択してください」の文字が消えましたが下記のエラーが出ました。

jquery.min.js:2 Uncaught TypeError: Cannot use 'in' operator to search for 'length' in <br /> <b>Notice</b>: Undefined index: maker_no in <b>C:\xampp\htdocs\ajax\select.php</b> on line <b>17</b><br /> [] at p (jquery.min.js:2) at Function.each (jquery.min.js:2) at Object.<anonymous> (index.php:27) at c (jquery.min.js:2) at Object.fireWith [as resolveWith] (jquery.min.js:2) at l (jquery.min.js:2) at XMLHttpRequest.<anonymous> (jquery.min.js:2)

尚、mysqlを使用しないプルダウンの連動は成功しております。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

解決出来ました。修正後のコードです。
・参照の修正。
・datatypeはjsonのままいけました。
・select.phpにif (!empty($_POST['maker_id']))を追記
など。

index.php

PHP

1<?php 2 //DBへ接続 3 try { 4 $dsn = 'mysql:host=localhost;dbname=car_maker;charset=utf8'; 5 $user = 'root'; //root 6 $pass = 'root'; //root 7 $pdo = new PDO($dsn, $user, $pass, array(PDO::ATTR_EMULATE_PREPARES => false)); 8 $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); 9 } catch(PDOException $e) { 10 exit('データベース接続失敗'.$e->getMessage()); 11 } 12 //makerテーブル から値を取得し、 id と name を $maker_list配列 に格納 13 $sql = "SELECT * FROM maker"; 14 $stmt = $pdo->query($sql); 15 $maker_list = array(); 16 while($row = $stmt -> fetch(PDO::FETCH_ASSOC)){ 17 $maker_list[$row['id']] = $row['maker_name']; 18 } 19?> 20 21<!DOCTYPE html> 22<html> 23 <head> 24 <meta charset="utf-8"> 25 <script src="js/jquery-3.6.0.min.js" charset="utf-8"></script> 26 <script type="text/javascript"> 27 $(function(){ 28 //selectタグ(親) が変更された場合 29 $('[name=car_maker]').on('change', function(){ 30 var maker_val = $(this).val(); 31 32 //maker_val値 を select.php へ渡す 33 $.ajax({ 34 url: "select.php", 35 type: "POST", 36 dataType: 'json', 37 data: { 38 "maker_id": maker_val 39 } 40 }) 41 .done(function(data){ 42 //selectタグ(子) の option値 を一旦削除 43 $('.car_model option').remove(); 44 //select.php から戻って来た data の値をそれそれ optionタグ として生成し、 45 // .car_model に optionタグ を追加する 46 $.each(data, function(id, name){ 47 $('.car_model').append($('<option>').text(name).attr('value', id)); 48 }); 49 }) 50 .fail(function(XMLHttpRequest, textStatus, errorThrown) { 51 console.log("ajax通信に失敗しました"); 52 console.log("XMLHttpRequest : " + XMLHttpRequest.status); 53 console.log("textStatus : " + textStatus); 54 console.log("errorThrown : " + errorThrown.message); 55 }); 56 57 }); 58 }); 59 </script> 60 <title>Ajax Sample</title> 61 </head> 62 <body> 63 <h1>Ajax Sample</h1> 64 <div class=""> 65 <span>自動車メーカー:</span> 66 <select class="car_maker" name="car_maker"> 67 <option>選択して下さい</option> 68 <?php foreach($maker_list as $key => $maker_name){ 69 echo '<option name="" value="'.$key.'">'.$maker_name.'</option>'; 70 }?> 71 </select> 72 <span>車種:</span> 73 <select class="car_model" name="car_model"> 74 <option class="">選択して下さい</option> 75 </select> 76 </div> 77 </body> 78</html>

select.php

PHP

1<?php 2 //直接のページ遷移を阻止 3 $request = isset($_SERVER['HTTP_X_REQUESTED_WITH']) ? strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) : ''; 4 if($request !== 'xmlhttprequest') exit; 5 //DBへの接続 6 //本来は db_connect関数 を作成して、DRYにした方が良いです。 7 try { 8 $dsn = 'mysql:host=localhost;dbname=car_model;charset=utf8'; 9 $user = 'root'; 10 $pass = 'root'; 11 $pdo = new PDO($dsn, $user, $pass, array(PDO::ATTR_EMULATE_PREPARES => false)); 12 $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); 13 } 14 catch(PDOException $e) { 15 exit('データベース接続失敗'.$e->getMessage()); 16 } 17 //Ajaxで渡ってきた値をもとに modelテーブル から該当する model を抽出 18 if (!empty($_POST['maker_id'])) { 19 $maker_no = $_POST['maker_id']; 20 //$maker_no = $_POST['maker_no']; 21 $sql = 'SELECT * FROM model WHERE maker_id = :maker_id'; 22 $stmt=$pdo->prepare($sql); 23 $stmt->bindValue(':maker_id', (int)$maker_no, PDO::PARAM_INT); 24 $stmt->execute(); 25 26 //抽出された値を $model_list配列 に格納 27 $model_list = array(); 28 while($row = $stmt -> fetch(PDO::FETCH_ASSOC)){ 29 $model_list[$row['id']] = $row['model_name']; 30 } 31 header('Content-Type: application/json'); 32 //json形式で index.php へバックする 33 echo json_encode($model_list); 34} 35 ?>

投稿2021/03/20 03:42

tapp

総合スコア3

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

解決出来ました。修正後のコードです。
・参照の修正。
・datatypeはjsonのままいけました。
・select.phpにif (!empty($_POST['maker_id']))を追記
など。

index.php

PHP

1<?php 2 //DBへ接続 3 try { 4 $dsn = 'mysql:host=localhost;dbname=car_maker;charset=utf8'; 5 $user = 'root'; //root 6 $pass = 'root'; //root 7 $pdo = new PDO($dsn, $user, $pass, array(PDO::ATTR_EMULATE_PREPARES => false)); 8 $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); 9 } catch(PDOException $e) { 10 exit('データベース接続失敗'.$e->getMessage()); 11 } 12 //makerテーブル から値を取得し、 id と name を $maker_list配列 に格納 13 $sql = "SELECT * FROM maker"; 14 $stmt = $pdo->query($sql); 15 $maker_list = array(); 16 while($row = $stmt -> fetch(PDO::FETCH_ASSOC)){ 17 $maker_list[$row['id']] = $row['maker_name']; 18 } 19?> 20 21<!DOCTYPE html> 22<html> 23 <head> 24 <meta charset="utf-8"> 25 <script src="js/jquery-3.6.0.min.js" charset="utf-8"></script> 26 <script type="text/javascript"> 27 $(function(){ 28 //selectタグ(親) が変更された場合 29 $('[name=car_maker]').on('change', function(){ 30 var maker_val = $(this).val(); 31 32 //maker_val値 を select.php へ渡す 33 $.ajax({ 34 url: "select.php", 35 type: "POST", 36 dataType: 'json', 37 data: { 38 "maker_id": maker_val 39 } 40 }) 41 .done(function(data){ 42 //selectタグ(子) の option値 を一旦削除 43 $('.car_model option').remove(); 44 //select.php から戻って来た data の値をそれそれ optionタグ として生成し、 45 // .car_model に optionタグ を追加する 46 $.each(data, function(id, name){ 47 $('.car_model').append($('<option>').text(name).attr('value', id)); 48 }); 49 }) 50 .fail(function(XMLHttpRequest, textStatus, errorThrown) { 51 console.log("ajax通信に失敗しました"); 52 console.log("XMLHttpRequest : " + XMLHttpRequest.status); 53 console.log("textStatus : " + textStatus); 54 console.log("errorThrown : " + errorThrown.message); 55 }); 56 57 }); 58 }); 59 </script> 60 <title>Ajax Sample</title> 61 </head> 62 <body> 63 <h1>Ajax Sample</h1> 64 <div class=""> 65 <span>自動車メーカー:</span> 66 <select class="car_maker" name="car_maker"> 67 <option>選択して下さい</option> 68 <?php foreach($maker_list as $key => $maker_name){ 69 echo '<option name="" value="'.$key.'">'.$maker_name.'</option>'; 70 }?> 71 </select> 72 <span>車種:</span> 73 <select class="car_model" name="car_model"> 74 <option class="">選択して下さい</option> 75 </select> 76 </div> 77 </body> 78</html>

select.php

PHP

1<?php 2 //直接のページ遷移を阻止 3 $request = isset($_SERVER['HTTP_X_REQUESTED_WITH']) ? strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) : ''; 4 if($request !== 'xmlhttprequest') exit; 5 //DBへの接続 6 //本来は db_connect関数 を作成して、DRYにした方が良いです。 7 try { 8 $dsn = 'mysql:host=localhost;dbname=car_model;charset=utf8'; 9 $user = 'root'; 10 $pass = 'root'; 11 $pdo = new PDO($dsn, $user, $pass, array(PDO::ATTR_EMULATE_PREPARES => false)); 12 $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); 13 } 14 catch(PDOException $e) { 15 exit('データベース接続失敗'.$e->getMessage()); 16 } 17 //Ajaxで渡ってきた値をもとに modelテーブル から該当する model を抽出 18 if (!empty($_POST['maker_id'])) { 19 $maker_no = $_POST['maker_id']; 20 //$maker_no = $_POST['maker_no']; 21 $sql = 'SELECT * FROM model WHERE maker_id = :maker_id'; 22 $stmt=$pdo->prepare($sql); 23 $stmt->bindValue(':maker_id', (int)$maker_no, PDO::PARAM_INT); 24 $stmt->execute(); 25 26 //抽出された値を $model_list配列 に格納 27 $model_list = array(); 28 while($row = $stmt -> fetch(PDO::FETCH_ASSOC)){ 29 $model_list[$row['id']] = $row['model_name']; 30 } 31 header('Content-Type: application/json'); 32 //json形式で index.php へバックする 33 echo json_encode($model_list); 34} 35 ?>

投稿2021/03/20 03:36

tapp

総合スコア3

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

PDOのデバッグにはエラーモードの設定は必須だと理解ください

php

1 $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

キャッチはcatch(PDOException $e)

投稿2021/03/15 00:35

yambejp

総合スコア114585

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tapp

2021/03/15 03:41

ご回答頂きありがとうございます。pdoの方も見るべきだったのですね。pdoについて確認致します。
tapp

2021/03/15 08:52

2つのPHPファイルともにエラーモードを設定してみましたが、特に動作の変化はありませんでした。他に気になる点等ありますでしょうか。
yambejp

2021/03/15 08:55 編集

あとはajaxではなくpostをサブミットした場合想定通りのデータが 返ってくるか確認ですね ajaxのfailは .fail(function(xhr,err){ console.log(err) }) としてエラー情報を拾ってください
tapp

2021/03/15 15:04

ajaxを使用せずにと言うことで合ってますでしょうか。調べて置き換えてみたいと思います。 ご教示頂いたfail~にてエラーを拾ったところ、パースエラーとなりました。 またステータスはNG200と出力されました。その為、index.php下部をdata: {"maker_id":"maker_val"}とダブルクオーテーションで囲ってみましたがエラーは変わらずでした。下記を参考にしました。 http://www.koikikukan.com/archives/2014/10/01-012345.php
tapp

2021/03/20 03:24

エラーを追っていったら解決できました。ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問