あなたは正しい道を歩いています。
<input type="image" class="follow">
のようなボタンを使用した例を作成しました。ユーザーがクリックすると、サーバー(URL)に要求が送信されます。成功するとボタン画像が更新されます。
$('input[type=image].follow').click(function() {
var button = $(this);
var current_img = $(button).attr('src');
var current_alt = $(button).attr('alt');
$(button).attr('src', '/style/icons/ajax-loader.gif');
$(button).attr('alt', 'Requesting data from the server...');
$.ajax({
url: url of script the processes stuff (like db update),
type: 'POST',
data: {},
dataType: "json",
error: function(req, resulttype, exc)
{
$(button).attr('src', '/style/error.png');
$(button).attr('alt', 'Error while updating!');
window.setTimeout(function() {
$(button).attr('src', current_img);
$(button).attr('alt', current_alt);
}, 3000);
},
success: function(data)
{
$(button).attr('src', '/style/followed.png');
$(button).attr('alt', 'Followed');
}
});
return false;
});
上記は単なるコード例です。意志でそれを変更してください。それを楽しみましょう。
これは問題ありません。私が改善する唯一のことは、AJAXリクエストからデータベースが正しく更新されたという確認を得るまで、「FOLLOW」を「FOLLOWING」に変更しないでください。処理中にスピナーを表示するだけで済みます。それ以外は、これはかなり簡単です。それを実装するための助けが必要ですか、これはちょうど "私の正しい道のりです"という質問ですか? – AgentConundrum