Нажмите кнопку в 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();" /> 

Я надеюсь, что имеет смысл и должен по крайней мере, чтобы вы начали