php - 单击 HTML 中的按钮以提交 MySQL 查询、更改背景和禁用按钮

Question

在我的网站上，用户可以搜索不同的食物，在搜索结果中我有一个小加号，用于将食物添加到他们的帐户中。我想做到这一点，当点击加号时，运行一个数据库查询，将食物添加到他们的帐户，将按钮的背景更改为复选标记(向他们反馈他们点击了按钮)，然后禁用按钮他们不能再添加那种食物。

Answer 1

<style>
.before
{
    background:url('plus.jpg'); 
}

.after
{
    background:url('tick.jpg');     
}
</style>        

    <script>
function add_food()
{   
jQuery.ajax({       
      url: 'addfood.php',
      type: 'POST',
      data: {'id':jQuery('#food_item').val()},
      success: function(html) {
        jQuery('#button').removeClass('before');
        jQuery('#button').addClass('after');
        jQuery('#button').attr('disabled', 'disabled');
      }, 
      error: function() {
        jQuery('#error').html('<div>Error! Unable to add food item.</div>');
      }
    });
}
</script>

<input type="hidden" value="food_id" id="food_item" />
<input id="button" type="button" class="before" onclick="add_food();" />

我希望这是有道理的，至少应该让你开始