ajaxを使った、DB情報の更新方法

前提・実現したいこと

php初学者です。
phpで、記事を投稿/検索/新規作成/編集するプログラムを組んでます。

【伺いたい工程部分】
特定のidの記事の表示画面から、idを受け取りその記事を編集するための編集画面での出来事です。
ユーザーには、新しい情報を入れてもらい最後に更新ボタンを押してDB更新を完了してもう仕様です。

【イメージしている流れ】
① ユーザーが新たに入力した値を取得
それぞれ、inputとtextareaのvalueには初期値としてDBから取得した値が入っているのでchangeイベントで、
radioはclickイベントで、ユーザーがブラウザ上で編集して入力している値を確認しvarで変数に代入して値を保持

script
1$(function(){
2
3    //ブラウザ上で更新された、input,textareaのvalueを変数に代入
4  $('#id_url').change(function() {
5    var $inputVal_url = $(this).val();
6  });
7
8  $('#id_wire_url').change(function() {
9    var $inputVal_wire_url = $(this).val();
10  });
11
12  $('#id_project').change(function() {
13    var $nputVal_project = $(this).val();
14  });
15
16  $('#id_coment').change(function() {
17    var $textareaVal_coment = $(this).val();
18  });
19
20
21    //ブラウザ上で選択された、ラジオボタンのvalueを変数に代入
22$(".page_name_btn").click( function() {
23    var $radioVal_page_name = $("input[name='style']:checked").val();    
24});
25
26$(".job_btn").click( function() {
27    var $radioVal_job = $("input[name='style']:checked").val();    
28});
29
30$(".style_btn").click( function() {
31    var $radioVal_style = $("input[name='style']:checked").val();    
32});

② phpに変数を渡す
ajaxで#ajaxクリック時に、update.phpに変数を渡す

script
1   $('#ajax').on('click',function(){
2
3          //idを変数に代入
4          var $id_id = $('#id_id').val();
5
6        $.ajax({
7          url:'update.php', //送信先
8          type:'POST', //送信方法
9          datatype: 'json', //受け取りデータの種類
10          data:{
11          id : $id_id,
12          url : $inputVal_url,
13          wire_url : $inputVal_wire_url,
14          project : $inputVal_project,
15          coment : $textareaVal_coment,
16           page_name :$radioVal_page_name,
17           job :$radioVal_job,
18           style :$radioVal_style
19          },
20          // Ajax通信が成功した時
21          success : function(){
22            alert('更新されました。\nありがとうございました。');
23          console.log('通信成功');
24          },
25          // Ajax通信が失敗した時
26          error : function() {
27            alert('通信に失敗しました。\n通信環境を確認の上、もう一度更新ボタンを押してください。');
28          console.log('通信失敗');
29        }
30         }); 
31         //submitによる画面リロードを防いでいます。
32         return false;
33    }); //#ajax click end

③ DBを更新する
update.phpで、sql実行して値を更新

php
1ini_set("display_errors", 1);
2error_reporting(E_ALL);
3
4//受け取った値を代入
5$id = $_REQUEST['id'];
6$project = $_REQUEST['project'];
7$url = $_REQUEST['url'];
8$wire_url = $_REQUEST['wire_url'];
9$page_name = $_REQUEST['page_name'];
10$job = $_REQUEST['job'];
11$style = $_REQUEST['style'];
12$coment = $_REQUEST['coment'];
13
14
15$pdo = new PDO(//接続情報);
16
17$sql = 'UPDATE articles SET project = :project and url = :url and wire_url = :wire_url and page_name = :page_name and job = :job and style = :style and coment = :coment
18        WHERE id = :id
19        ';
20        $statement = $pdo->prepare($sql);
21        $statement->bindValue(':id', $id, PDO::PARAM_INT);
22        $statement->bindValue(':project', $project, PDO::PARAM_STR);
23        $statement->bindValue(':url', $url, PDO::PARAM_STR);
24        $statement->bindValue(':wire_url', $wire_url, PDO::PARAM_STR);
25        $statement->bindValue(':page_name', $page_name, PDO::PARAM_STR);
26        $statement->bindValue(':job', $job, PDO::PARAM_STR);
27        $statement->bindValue(':style', $style, PDO::PARAM_STR);
28        $statement->bindValue(':coment', $coment, PDO::PARAM_STR);
29        $statement->execute();
30
31    $statement = null;
32    $pdo = null;

（補足）

html
1<form>
2ajaxのクリックイベント部分のhtmlの記述
3<!--input,textarea,radioの入力コードの記述-->
4
5<input id="ajax" class="update-btn" type="submit" value="更新する">
6</form>

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

DBの更新がされず、ajax通信も成功しているのかが不明です。。。

申し訳ございません。ブラウザが更新されるだけで特に変化なしです。

試したこと

ググりました。
jqueryの変数をphpに渡すことと、その中でajaxを調べ、上記のソースコードはググりながらコピペしてカスタムしました。

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

php：5.7
mysql：5.7.28

ここにより詳細な情報を記載してください。

m.ts10806

2019/11/30 19:33

＞php初学者です。あまりこういった但し書きは要らないと思います（要件ではないので）「初心者アイコン」を質問につけるにとどめてください。質問は編集できます。

paccuman

2019/12/01 10:12

ありがとうございます。編集しました。

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

回答4件

ベストアンサー

DBの更新がされず、

まずSQLのミスがありますね。それは既に指摘がある通り。

ただ、SQLはPHPからすると外部の仕組みです。
絶対にPHPからしか実行できないわけではありません。
他の言語からも実行できますし、ターミナルやツールなどからログインして直接実行することも出来ます。

直接実行して想定通りに動かないSQLであれば当然PHPなど外部から実行しても動きません。
変数など入力を受け付ける可変な情報はひとまず固定値にして直接実行して想定通りの結果が得られるか確かめてから、利用しましょう。
そうすることで、何か問題が起きても「SQLの構文自体は問題ない」と、1つ可能性を潰せるからです。

いきなりPHPから変数（やプリペアドステートメント）で実行してしまうと、
PHPのコードがいけないのか、SQLがいけないのか、値がきちんとPHPから渡せていないのか、通信状態が悪いのか、、、、、様々な可能性と向き合わなければいけません。
1つでも可能性を潰しておけば、考慮すべき部分が減るので、確かめやすくなります。

ajax通信も成功しているのかが不明です。。。

通信自体の成否やPHP側の出力はJavaScript側で取得可能です。

jQueryリファレンスなどを確認されると分かりますが、様々な引数が返ってくることが分かります。

success

Type: Function( Anything data, String textStatus, jqXHR jqXHR )
error
Type: Function( jqXHR jqXHR, String textStatus, String errorThrown )

successにきたとしてもtextStatusは必ず確認しておいたほうが良いです。
ちなみに受け取る側の引数なので必須ではありません。
が、これだけ返してくれるのでなるべく全て見ておくようにしておいたほうが良いでしょう。
alert()などで直接画面に出す必要はなく、console.log()でコンソールに出すだけでも良いです。
※もしユーザー向けに本番リリースするのであれば除くべき

AjaxではPHP側での出力をsuccessの「data」で拾ってくれる仕組みがあるので、何かしら出力するようにして置いた方が良いです。
別に１とか０とかでも良いです。何も返してないことで、余計にPHP側の状況を不明にしてしまっています。

また、PHP側にDBの処理をさせるのであれば、エラーを捕捉する仕組みを導入すべきです。

php
1try{
2
3//PDO接続からトランザクション、DB処理、コミット/ロールバックまで
4
5}catch (PDOException $e){
6  echo $e->getMessage();
7  //できれば$e全部ログ出力
8}
9

PHPマニュアル：エラーおよびエラー処理

さらっと最後に書きましたが、Ajaxもデバッグできるような仕組みを導入しましょう。
ブラウザのデベロッパツールでも通信状態を確認することができますし、
PHPコードがどこまで通っているか確かめたかったらテキストファイルに状況を書きだすでも良いですし、デバッガ導入も有効でしょう。
私としてはAjax実行するといっても結局POST/GETでリクエストを送るにすぎないので、JavaScriptからでなく普通にform送信でPOST/GETリクエストを送るのが結構手っ取り早い気もします。ブラウザで見れますしね。

蛇足：
success/errorは割と古めの書き方として認識されています。
本件落ち着きましたら、新しい書き方もチャレンジしてみましょう。
おじさんが若い時はね$.ajax()のオプションでsuccessとかerrorとか指定していたんだよ（追憶）

投稿2019/11/30 20:01

編集2019/11/30 20:02

m.ts10806

総合スコア80850

paccuman

2019/12/01 11:19

ありがとうございます！トランザクションやコミットや色々「できているのか」「できていないのか」を判定する記述は大切なんですね。。 success/errorについての補足情報もありがとうございました！ご指摘いただいたように動かない可能性が複数あるので確認し、おそらく、質問文でいうところの【① ユーザーが新たに入力した値を取得】に問題ありでした。（確認したこと） >sql SETの記述を修正し、更新するデータは変数ではなく、文字列や整数で検証し、UPDATEできたためコード上はとりあえず成功 >ajax 通信先のupdate.phpに1をechoさせ、それをscriptを記述しているファイルでdataで受け取れりalertできたため通信も成功 >var変数について無関係な別の文字や数値をvar変数に入れて通信したところ更新できました（質問文でいうところの【① ユーザーが新たに入力した値を取得】に問題あることが判明）

paccuman

2019/12/01 11:29

ブラウザで変更があった際にvalueを取得する7個のvarを、console.logで見ましたが全て正常に値が入ってました。（すみません、【① ユーザーが新たに入力した値を取得】のソースコードにタイプミスがありました）ただ、この方法で値を代入したvarをajaxで送ろうとすると、また、ブラウザだけ更新される現象になってしまいます。現状、ここが原因かと思うのですが、なぜこのようなことが起こるかわかりますでしょうか？

m.ts10806

2019/12/01 21:27

「ブラウザだけ更新」とはどういう挙動を想定された表現ですか？

paccuman

2019/12/02 07:54 編集

画面の情報は変わらず、ただF5を押したような挙動です。

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

PHP は既に回答があるので JavaScript について。
function はスコープを形成するので変数は反映されず送信されていません。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions

変更のたびに取得する理由もなさそうなので .ajax() の直前で取得すればいいでしょう。

投稿2019/12/02 02:46

x_x

総合スコア13749

paccuman

2019/12/02 09:36

ありがとうございます。たしかに、function内なので外では呼び出せないのですね。。！ちなみに、.changeや.clickイベントの処理結果を戻り値として受け取ることで、 ajaxで送るデータとして活用できるようになると思っていますが、あっていますでしょうか？調べてみたのですが明確な記述方法が見つからず、 returnの記述をどのように書けばよいかお判りでしょうか？

paccuman

2019/12/03 05:59

ありがとうございます。整理してまた別の質問として投稿させていただきます。！また、よろしくお願いいたします。

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

質問に CREATE TABLE文は提示しましょう。
SQLのところだけ、
理解し易いように改行しています。

SQL
1UPDATE articles SET
2    project = :project 
3and url = :url 
4and wire_url = :wire_url
5and page_name = :page_name 
6and job = :job 
7and style = :style 
8and coment = :coment
9WHERE id = :id
10    ↓
11UPDATE articles SET
12    project = :project 
13  , url = :url 
14  , wire_url = :wire_url
15  , page_name = :page_name 
16  , job = :job 
17  , style = :style 
18  , coment = :coment
19WHERE id = :id