お気に入り登録ボタンを押して登録されたら、ボタンのテキストが瞬時に切り替わるようにしたい

Question

前提・実現したいこと

以下のようなボタンがあり、クリックするとAjaxでDBにお気に入りとして登録または削除され、処理が行われるとクラス属性のactiveを付け外しするようにしています。

<button type="button" class="js-click-like <?php if(isLike($id,$u_id)){echo 'active';} ?>">お気に入り登録する</button>

※Ajax処理のためのdeta属性などは割愛しています。

今回希望する動きは、クラス属性'active'があるか無いかを判定して、テキストをボタンを押したら瞬時にテキストが切り替わるようにしたいと考えています。
・お気に入り登録している→「お気に入り済みです」
・お気に入り登録が無い→元のテキスト

試したこと

var $like;
        $like = $('.js-click-like') || null;
        if($like.hasClass('active')){
            $like.text('お気に入り済みです');
        }

発生している問題

上記のJqueryの処理もきちんと入っているようなのですが、テキストが瞬時に切り替わるわけではなく、リロードしないと処理が反映されません。
ボタンを押した瞬間に切り替わるようにしたい場合どうすればよいでしょうか？

Answer 1

ajaxで処理するなら、api側が戻してきたデータをみて、ajaxの方で書き換えるだけです

Comments

[coco144]

Ajax処理では、SQLでDBにお気に入りテーブルにレコードがあるか無いかを判定して、レコードがあれば削除（お気に入り登録解除）無ければ追加（お気に入り登録）という処理をしています。

戻ってきたデータを元に、Ajax処理が成功ならdoneで、
$like.toggleClass('active');
でクラス属性の付け外しをしています。

例えば、Ajax処理の中のSQLの処理の際にtrueまたはfalseなどを返すようにして、その戻り値をもとにテキストを切り替えるようにしたらどうだろう？と思うのですが、調べても希望する情報にたどり着けないので考え方が間違っているのだと思います。

何かいい処理の仕方がありましたら教えて頂けたらと思います。

[yambejp]

apiの仕様を決めるのはサービス側なので、削除・追加・修正されたという結果を戻してもらい
そのデータを元にHTMLを書き換えるか、修正後のデータすべてを受け取って
全体を書き換えるかのどちらが妥当でしょう

[coco144]

結果をどのように受け取るのか勉強不足で調べても最適な方法が分からなかったのですが、「戻してもらったデータを元に書き換える」というアドバイスを元に、次のような実装をしてみました。

▶AjaxファイルのDBの操作ごとに、以下のコードを追加。
①DBに該当レコード（お気に入り登録）があり削除する
　echo 'お気に入り登録する';
②DBに該当レコードがないので追加する
　echo 'お気に入り登録済みです';

それをJquery側で受け取る際に

$like.text(data);

としました。
一応ボタンを押すごとにテキストが切り替わるようになりました。

[yambejp]

apiをご自身で用意しているなら、戻りはなんでもいいんでう
わざわざ表示する文字自体を返して貰う必要はありません
jsonデータで["id":123,"method":"del","status":"success"]的な
戻り値が返ってくるとベターでしょうね

[coco144]

Ajaxの処理後にconsole.log(data)を試してみたのですが、結果が何もありません。※datatype:'json'もコードに足しました。
クエリ結果をAjax側でどのように返したら、回答にあるようなjsonデータが受け取れるのかたくさん調べましたが、今の私のレベルではどうしようもできませんでした。
今回教えて頂いたことで、Ajax処理についてもっと基礎から学習することが必要だなと感じましたので、しっかり勉強したいと思います。
拙い質問にも付き合っていただきありがとうございました！