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

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

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

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

JavaScript

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

jQuery

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

Q&A

解決済

1回答

418閲覧

手動で更新しない値をPOSTする際は、いつ削除すべきでしょうか?

nikuatsu

総合スコア177

PHP

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

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2022/06/08 21:51

編集2022/06/08 21:53

前提

該当のソースコードのように、<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つの方法で私はどれも釈然としないのですが、いったいどのような方法がいいのでしょうか?理由を含めて知りたいです。

よろしくお願い致します。

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

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

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

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

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

guest

回答1

0

ベストアンサー

しかし <table> の .json カラムは「その tr の情報」という意味で使っているので、POSTしないというのは若干違和感を覚えます。

POSTに不要な値を削るという妥当な目的もある以上、この「違和感」を何に抱いているのかがわかりません。

投稿2022/06/08 23:57

maisumakun

総合スコア145183

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

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

maisumakun

2022/06/09 00:04 編集

> ④POSTするが使わないまま、特に何もしない POSTする容量が負担になる分量でもないですし、実装の手間を省きたければこれもありです。
nikuatsu

2022/06/11 19:35

ありがとうございます。④もありとは気が楽になりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問