前提
該当のソースコードのように、<table>
の contenteditable="true"
を編集すると、.json
の値が自動で更新さる JavaScript があります。
そして .json
を「送信」でPOSTし、データベースを更新するという流れです。
このうち count_likes
のキーは手動で更新せず、定期的にSQLで自動集計されるカラムなので、POSTしても使いません。
ご質問
では count_likes
はいつ削除すべきでしょうか?
該当のソースコード
サンプル:https://jsfiddle.net/yr4j3wo8/
html
1<table cellspacing="0" border="1"> 2 <tbody> 3 <tr> 4 <td><button type="button" class="ajaxPostUser">送信</button></td> 5 <td class="id">1</td> 6 <td class="name" contenteditable="true">太郎</td> 7 <td class="age" contenteditable="true">20</td> 8 <td class="count_likes">999</td> 9 <td class="json">{"id": 1, "name": "太郎", "age": 20, "count_likes": 999}</td> 10 </tr> 11 </tbody> 12</table>
JavaScript
1// 送信 2$(document).on('click','.ajaxPostUser', function() { 3 const json = JSON.parse( $(this).closest('tr').find('td.json').text() ); 4 ajaxPostUser( json ); 5}); 6 7function ajaxPostUser( json ){ 8 // ajaxで json をPOSTする 9 $.ajax({ 10 url : 'http...', 11 type : 'POST', 12 dataType: 'json', 13 data : json 14 }).done(function(responces) { 15 16 }).fail(function() { 17 18 }); 19} 20 21// 編集 22$(document).on('input','[contenteditable="true"]', function( evt ) { 23 editCol( evt ); 24}); 25 26function editCol( evt ) { 27 const $target = $( evt.target ); 28 const $tr = $target.closest('tr'); 29 const $td_json = $tr.find('td.json'); 30 31 // 現在値 32 let json = JSON.parse( $td_json.text() || '{}' ); 33 34 // 入力値 35 let inp_col; 36 let inp_val; 37 if ( evt.type === 'input' ) { 38 inp_col = $target.attr('class'); 39 inp_val = $target.text().trim(); 40 } else if ( evt.type === 'change' ) { 41 inp_col = $target.closest('td').attr('class'); 42 inp_val = $target.val(); 43 } 44 45 // 更新 46 json[inp_col] = inp_val; 47 $td_json.text( JSON.stringify(json, null , "\t") ); 48}
自分が考えた方法
次の4つの方法を考えたのですが、続く矢印のようにいまいちどれも釈然としません。
どのような方法がいいのでしょうか?
【➀検証の前、または➁検証の後】
→ 下記コードのイメージです。しかし➀は$_POSTを直に触る点に違和感を覚えますし、②は検証しても別に使わないですから検証を通すプロセスが無駄に思えます。
PHP
1function ajaxPostUser() { 2 $result = ['status'=>'error','errors'=>[]]; 3 try { 4 5 /*-- ➀POSTの直後、検証の前 --*/ 6 /* 7 unset( $_POST['json']['count_likes'] ); 8 */ 9 10 // 検証 11 $post = valid_post([ 12 'json' => filter_input(INPUT_POST, 'json', FILTER_DEFAULT, FILTER_REQUIRE_ARRAY) 13 ]); 14 if ( $post['status'] === 'error' ) { 15 throw new Exception("不正な値です"); 16 17 } else { 18 19 /*-- ➁検証の後 --*/ 20 /* 21 unset( $post['json']['count_likes'] ); 22 */ 23 24 // 更新する値 25 $json = $post['json']; 26 $id = $json['id']; 27 $name = $json['name']; 28 $age = $json['age']; 29 30 // 更新を実行 31 $dbh = new PDO($dsn, $user, $password); 32 $sql = "UPDATE user SET name='$name', age = '$age' WHERE ID = $id;"; 33 $dbh->query($sql); 34 35 $result = ['status'=>'ok']; 36 } 37 38 } catch ( PDOException $e ) { 39 $result['errors'] = $e->getMessage(); 40 } catch ( Exception $e ) { 41 $result['errors'] = $e->getMessage(); 42 } 43 44 echo $result; 45}
【➂そもそも count_likes をPOSTしない】
→ 下記コードのイメージです。しかし <table>
の .json
カラムは「その tr
の情報」という意味で使っているので、POSTしないというのは若干違和感を覚えます。
JavaScript
1function ajaxPostUser( json ){ 2 /*-- ➂ そもそも count_likes をPOSTしない -- */ 3 delete json.count_likes; 4 5 // ajaxで json をPOSTする 6 $.ajax({ 7 url : 'http...', 8 type : 'POST', 9 dataType: 'json', 10 data : json 11 }).done(function(responces) { 12 13 }).fail(function() { 14 15 }); 16} 17
【④POSTするが使わないまま、特に何もしない】
→ 何にも使わない値がずっとあるままという点に違和感を覚えます。
以上の4つの方法で私はどれも釈然としないのですが、いったいどのような方法がいいのでしょうか?理由を含めて知りたいです。
よろしくお願い致します。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/06/09 00:04 編集
2022/06/11 19:35