使用 onclick 按钮更新数据库信息答案

【问题标题】：Update database info with onclick button使用 onclick 按钮更新数据库信息
【发布时间】：2011-09-27 10:35:35
【问题描述】：

我需要一些关于按钮 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^">

使用此代码，我禁用了按下的按钮，但我还需要更新发送 id 的数据库中的信息，如下所示：

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

我需要将其加载到同一页面中，而无需使用POST 或GET 发送。

【问题讨论】：

看看 jQuery，更具体地说，它是 Ajax 功能。这正是您正在寻找的。span>
"我需要将其加载到同一页面中，而不使用 POST 或 GET 发送。" - 为什么有这个要求？无论是通过显式 POST（GET 不应用于此目的......）还是通过 Ajax，它都是相同的，也是唯一可以更新数据库中信息的方法。

标签： php javascript mysql button onclick

【解决方案1】：

为此使用 ajax 调用，例如：

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

请参阅http://api.jquery.com/jQuery.get/ 了解更多信息。

【讨论】：

我对 jQuery 没有我想的那么熟悉。这个调用可以直接放在onClick属性中吗？

【解决方案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>

对于输出，请确保您有一个 id 等于 target 的 div。

【讨论】：