Обновить информацию базы данных с помощью кнопки onclick

Question

Мне нужна помощь с кнопкой onClick.

<button type="button" id="1" onclick="this.disabled=true; ^FUNCTION TO UPDATE^"> 
<button type="button" id="2" onclick="this.disabled=true; ^FUNCTION TO UPDATE^"> 
<button type="button" id="3" onclick="this.disabled=true; ^FUNCTION TO UPDATE^"> 

С помощью этого кода я отключаю нажатую кнопку, но мне также нужно обновить информацию в базе данных, отправляя идентификатор, примерно так:

UPDATE reservation SET status='approved' WHERE id=^ID OF THE CLICKED BUTTON^

Мне нужно, чтобы он был загружен на той же странице без отправки с POST или GET.

Answer 1

Используйте для этого вызов ajax, например:

$.get('update_reservation.php', {id: 1});

Подробнее см. http://api.jquery.com/jQuery.get/.

Answer 2

С простым javascript вы можете сделать что-то вроде этого:

<script type="text/javascript">
<!--
var page = "dbupdate.php"; // hardcode this elsewhere out of sight

function update(target,data){
document.getElementById(target).innerHTML = 'sending...';
if (window.XMLHttpRequest) {
       req = new XMLHttpRequest();
       req.onreadystatechange = function() {ajaxDone(target);};
       req.open("POST", page, true);
       req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
       req.send("data=" + data );
   // IE/Windows ActiveX version
  } else if (window.ActiveXObject) {
       req = new ActiveXObject("Microsoft.XMLHTTP");
    if (req) {
           req.onreadystatechange = function() {ajaxDone(target);};
           req.open("POST", page, true);
           req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
           req.send("data=" + data );

       }
   }
}  

function ajaxDone(target) {
    // only if req is "loaded"
    if (req.readyState == 4) {
        // only if "OK"
        if (req.status == 200 || req.status == 304) {
           results = req.responseText;
            document.getElementById(target).innerHTML = results;
        } else {
           document.getElementById(target).innerHTML="ajax error:\n" +
            req.statusText;
        }
    }
}
// -->
</script>

Для вывода убедитесь, что у вас есть div с идентификатором, равным target.