javascript - 使用 JQUERY 更新 Mysql

Question

我在理解如何让它发挥作用时遇到了一些麻烦。我正在使用 jquery 加载一个页面，其中包含来自 mysql 数据库表的数据。我希望能够在不刷新的情况下对单个记录进行 mysql 更新。这是我试过的代码，但无法使更新生效。

索引.php

function showUser(str) {
    if (str == "") {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else {
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","data_ajax.php?q="+str,true);
        xmlhttp.send();
    }
}

这里我在 while 循环中有一个下拉列表来检索所需的记录并将其发布到 <div id="txtHint"></div> 中。 .到目前为止，还不错。

现在，我将以下内容放入 data_ajax.php 中以执行 mysql 更新。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    $(".update_button").click(function() {
        var id = $(this).attr("id");
        var dataString = 'id='+ id ;
        var parent = $(this).parent();

        $.ajax({
            type: "POST",
            url: "update_ajax.php",
            data: dataString,
            cache: false,
        });

        return false;
    });
});
</script>

我有一个文本链接 <a href='#' id='".$row['id']."' class='update_button'>".$label."</a>那应该调用上面的操作来进行更新。所有这一切都会将页面跳到顶部，但什么也没有发生。单击链接时似乎不会调用 update_ajax.php。我知道这是我想念的简单事情。任何帮助将不胜感激。

Answer 1

我的建议是直接在 index.php 中包含 jQuery，这样您就可以使用事件委托(delegate)来处理大部分工作。

通过将 jQuery 包含在 index.php 中，您也可以使用 jQuery 执行 showUser ajax 请求。

function showUser(str) {
    if (str == "") {
        $("#txtHint").empty();
        return;
    }
    $("#txtHint").load("data_ajax.php?q=" + str);
}
$(document).ready(function () {
    $("#txtHint").delegate(".update_button", "click", function () {
        var id = $(this).attr("id");
        var dataString = 'id='+ id ;
        var parent = $(this).parent();

        $.ajax({
            type: "POST",
            url: "update_ajax.php",
            data: dataString
        });

        return false;
    });
});