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

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

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

Q&A

解決済

2回答

486閲覧

データベースに値を代入する方法

Beronika

総合スコア18

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

0グッド

0クリップ

投稿2019/05/17 09:46

編集2019/05/18 03:17

データベースに打ち込んだデータが反映されない

PHP初心者です。

ドットインストールのPHPの講座
「PHPでTodo管理アプリを作ろう」
を参考に、フォームの送信ボタンを押すとデータベースに値が代入されて、指定したデザインで、データベースの値が反映されるというプログラミングを制作しました。

しかし、全く反映されません。

コード

1部を取り出したものが以下のコードです。

PHP

1 2<h2>デッキ登録</h2> 3  <form action = "" id = "write" method = "post"> 4    <h3>デッキ名</h3> 5      <input id = "name" type = "text"> 6    <h3>リーダー</h3> 7 <select id = "reader"> 8   <option disabled selected value>選択してください。</option> 9   <?php foreach ($leaders as $leader): ?> 10   <option id = "chara_<?php echo h($leader->id) ?>" vlaue = "<?php echo h($leader->character_name) ?>"><?php echo h($leader->character_name) ?></option> 11  <?php endforeach; ?> 12 </select> 13 <h3>デッキタイプ</h3> 14   <select id = "dekki_type"> 15    <option disabled selected value>選択してください。</option> 16    <?php foreach ($types as $type): ?> 17     <option id = "type_<?php echo h($leader->id) ?>" vlaue = "<?php echo h($type->type) ?>"><?php echo h($type->type) ?></option> 18    <?php endforeach; ?> 19   </select> 20 <h3>デッキURL</h3> 21   <input id = "url" type = "text"> 22 <input type = "submit" id = "ragistration" value = "登録"> 23 </form> 24<h2>デッキ一覧</h2> 25  <div id = "decklist_template" class = "select"> 26   <h4 class = "deckName"></h4> 27 <p class = "detail">リーダー:<span class = "leaderName"></span></p> 28 <p class = "detail">タイプ:<span class = "typeName"></span></p> 29 <div class = "btn">デッキを確認</div> 30 <div class = "btn">詳細</div> 31 <div class = "btn">削除</div> 32 </div> 33

jquery

1 $("#registration").on('submit',function(){ 2 var name = $('#name').val(); 3 var leader = $('#reader').val(); 4 var type = $('#dekki_type').val(); 5 var url = $("#url").val(); 6 7 $.post('_ajax.php',{ 8 name:name, 9 leader:leader, 10 type:type, 11 url:url, 12 mode:'reg' 13 },function(res){ 14 var $div = $('#decklist_template').clone; 15 $div 16 .attr('id','deck_'+res.id); 17 .find('.deckName').text(name); 18 .find('.leaderName').text(leader); 19 .find('.typeName').text(type); 20 $("#deck_list").prepend($div.fadeIn()); 21 $('#name').val(''); 22 $('url').val(''); 23 }) 24 })

PHP

1require_once('config.php'); 2require_once('function.php'); 3require_once('management.php'); 4 5$ajax_processing = new DB(); 6 7//今回はmanagementクラスのインスタンスを作って、post()というメソッドを呼び出す処理を書いている 8 9if ($_SERVER['REQUEST_METHOD'] === 'POST') { 10 try { 11 $res = $ajax_processing->post(); 12 //jsonであることを知らせている 13 header('Content-Type: application/json'); 14 echo json_encode($res); 15 exit; 16 } catch (Exception $e) { 17 header($_SERVER['SERVER_PROTOCOL'] . ' 500 Internal Server Error', true, 500); 18 echo $e->getMessage(); 19 exit; 20 } 21}

PHP

1public function post(){ 2 switch ($_POST['mode']){ 3 case 'reg'; 4 return $this->_registration(); 5 } 6 } 7 8 9 public function registration(){ 10 $sql = "insert into deck_data(name,leader,type,url) values (:name,:leader,:type,:url)"; 11 $stmt = $this->_db->prepare($sql); 12 $stmt->execute(array 13 ':name'=>$_POST['name'], 14 ':leader'=>$_POST['reader'], 15 ':type'=>$_POST['dekki_type'], 16 ':url'=>$_POST['url'] 17 ); 18 19 return[ 20 'id' => $this->_db->lastInsertId() 21 ]; 22 } 23 24 }

バグの原因考察

コンソールを見ると
「main.js:21 Uncaught SyntaxError: Unexpected token .」
と出ています。

main.js21 の行はjqueryの「.find('.deckName).text(name)」の部分です。この部分が間違えているんでしょうが、その原因は全くわかりません。

jsが反映されていない、jqueryが反応していない、php同士のファイルがしっかりと動いていないということはないと思います。
おそらく原因はjqueryの書き方だと思っています。Ajaxを処理している間に何かおかしなことになってのではないかと思っています。

※2019年5月18日11:55
追加情報を入力しました。postメソッドについてです。

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

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

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

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

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

guest

回答2

0

ベストアンサー

代入ではなく挿入が正しい表現ですね。

また、前提としてJavaScriptは構文エラーがあるとそこで処理を中断します。

JavaScriptもPHPもデバッグを覚えましょう。

気になった点。

  • cloneはプロパティではなくメソッドです(リファレンス)
  • JavaScriptにおいて;は終端なので、そこで文は切れます。下記、きちんとそれぞれのメソッド呼べてないと思います(そこでエラーになっている)

js

1 $div 2 .attr('id','deck_'+res.id); 3 .find('.deckName').text(name); 4 .find('.leaderName').text(leader); 5 .find('.typeName').text(type);

対策としてはメソッドチェーン的な書き方をするか、1個1個書くか、ですね。

  • ajaxの実行結果、成功か失敗かはきちんととったほうが良い。

成功する前提のプログラムは危険です。プログラムはそもそもどこからどう呼び出されるか知らずに単にリクエストに沿って処理しているだけなので「○○がくる前提」という組み方は避けましょう。これはPHPも同じですね。
doneとかfailとか導入して処理わけしたほうが良いです。

投稿2019/05/17 10:09

編集2019/05/17 10:11
m.ts10806

総合スコア80765

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

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

Beronika

2019/05/17 11:15

表現方法の指摘までしていただいてありがとうございます。 1つ1つ回答・再質問をさせてください。 ・cloneはプロパティではなくメソッドです 確かにそうでした。そうなると var $div = $('decklist_template').clone(); とするのが正しい表現になりそうですね。 ・avaScriptにおいて;は終端なので〜 理解できました。確かに終わらせると.findから読み込み初めてしまうからよくないですね。 となると、修正するには以下のようにするといいということですね。   $div .attr('id','deck_'+res.id) .find('.deckName').text(name) .find('.leaderName').text(leader) .find('.typeName').text(type); 一度これでやってみます。 ・ajaxの実行結果、〜 ajaxの理解がまだ浅いこともあり、とりあえず動くプログラミングを描きたかったので、このような形になりました。 みた雰囲気ですと、以下のように書けばいいのでしょうか? $.post('_ajax.php',{ name:name, leader:leader, type:type, url:url, mode:'reg'   success:'success' },done(function(res){ var $div = $('#decklist_template').clone(); $div .attr('id','deck_'+res.id) .find('.deckName').text(name) .find('.leaderName').text(leader) .find('.typeName').text(type); $("#deck_list").prepend($div.fadeIn()); $('#name').val(''); $('url').val(''); })fail(エラーメッセージのプログラミング))
m.ts10806

2019/05/17 11:22

おそらくお分かりと思いますので、1つ1つ「OK」を確かめてください。 構文ミスがあってもそこでエラーとなるだけです。エラーが出れば調べて試していけばいいだけなので。 Ajaxのdone,failのところももう少し細分化して止めて確認する箇所を増やせると思います。(そのほうが確実です)
Beronika

2019/05/17 23:47 編集

承知いたしました。 現在は別の用事に追われているので、午後に改めて結果と問題があれば再質問をさせていただきます。 2時くらいには結果報告ができると思います。 done,failももう少し練ってみます。
m.ts10806

2019/05/17 23:56

こちら特に急いでおりませんのでご自分のペースでご対応いただくので問題ないです
Beronika

2019/05/18 02:56 編集

指摘された場所を訂正し、反映させてみました。 結果、バグはなくなりました。しかし、入力した値はデータベースに挿入されません。 どこが原因なのでしょうか? 原因として考えられる点がpost命令にあるので、そのコードを追加しました。
m.ts10806

2019/05/21 05:10

解決済みになったようですが、その後、どういう経緯をたどって解決になったのでしょうか?
Beronika

2019/05/21 07:24

その後、1つずつ辿っていき、ただの入力ミスだったことが把握、とりあえずここでの部分は解決しています。 しかし、今、別の問題に当たっている所です。
m.ts10806

2019/05/21 07:26

その「とりあえず解決した」部分を具体的に記載いただいておくとこちらとしても顛末が分かりますし、あとから同じ問題を抱えた人のためにもなるのでお時間あるときに記載しておいてください。 https://teratail.com/help/question-tips#questionTips4-2
Beronika

2019/05/22 00:37

承知いたしました。 解決方法としては最後のPHPのコードにおけるpostメゾットでは「_registration()」を返しているのに、そのようなメゾットがないからです。正しくは「registration()」と書くべきでした。
m.ts10806

2019/05/22 00:39

解決したようで何よりです。 手入力するとちょっとしたミスが全てにつながるので、コピペのほうが間違いなく、早くできます。 あと、細かいですがメ[ソ]ッドです。method
guest

0

.find('.deckName).text(name)

本当にここがそのままのソースなら

.find('.deckName').text(name)
としないとまずいですね「.deckName」を文字列が閉じてない

投稿2019/05/17 10:19

yambejp

総合スコア114572

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

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

m.ts10806

2019/05/17 10:22

提示のコードでは閉じてるのでコピペしてなかったのかなと思ってます。その手前で提示のエラーが出そうなおかしいところありますし
Beronika

2019/05/17 11:00 編集

ごめんなさい。記入ミスです。 実際のソースでは 「.find('deckName').text(name)」 となっています。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問