非同期通信でDB接続してデータを反映・削除したいです。

Question

deteil.php（suumoさんでいう、物件詳細画面）

<a id="favorite">お気に入りに追加</a>

実装したい機能はsuumoさんのお気に入り登録の部分です。
♡をクリックするとお気に入りに登録され、お気に入りに追加済みの場合にクリックするとお気に入りから外れることをやりたいです。

参考URL）
https://suumo.jp/chintai/tokyo/sc_chiyoda/jnc_000006938114/?bc=100047457965

https://teratail.com/questions/35721
こちらでも同じ質問をしたのですが、いまだ実装できず手詰まりのため再投稿です。

aタグがクリックされた場合に非同期通信を行い
お気に入りに登録されていない場合はINSERT
お気に入りに登録されている場合はDERETE

だと思うのですが、どうやって書いたら良いか、、、、
結構簡単だと書いてあるのですが、簡単にやれるものなんですかね＞＜

Comments

[kei344]

「何」が「どのように」わからないのか、どのコードで詰まっているのか、サーバ側なのかクライアント側なのかなどとあわせて、書かれているコードを追記されたほうが回答が望めると思います。

Answer 1

昔ながらのシンプルなjQueryベースの方法でよければこちらのようなやり方でどうぞ．難易度は大したことないです，ホントに簡単な部類です．（但し，くれぐれもPHP側を煩雑なコードにしてSQLインジェクション脆弱性を生まないようにご注意ください）

JavaScript(jQuery)からPHPのAPIを利用する

実行成功後にはボタン(登録用/解除用)を反転するように，適切なDOM操作を行ってください．すこし引っかかりそうなところは**「どうやってaタグによるページ遷移を防いでかつその代わりにJavaScriptのイベントを行わせるか」**というところになると思いますが，それも以下のような方法で解決できます．

$('aへのセレクタ').click(function (event) {
    event.preventDefault(); // ←これでページ遷移が防げる
    /* 続きの処理はここに書く */
});

Comments

[ssk]

ありがとうございます。
なんとか、実装することができました。

[mpyw]

おつかれさまです