javascript - Ajax Jquery更新Mysql表中的值并刷新页面上的值

标签 javascript php jquery mysql ajax

嗨,我是 ajax 新手,在一些基本的东西上遇到了困难。我有一个 mysql 表“users”,其中包含用户信息,包括他们 promise 捐赠的余额。我想要一个 div,当单击时,其余额会增加 10 并刷新下面显示的余额。我的页面有以下内容。

<?php
    include_once 'login.php';
    $db_server = mysql_connect($db_hostname, $db_username, $db_password);
    mysql_select_db($db_database);

?>

<!DOCTYPE html>


<script src ="js/jquery-2.1.0.js"></script>
<script language="javascript" type="text/javascript">
        $(document).ready(
            function()
            {
                $("#click").click(
                    function()
                    {
                        var ten = 10;
                        $.ajax(
                            {
                                url:  "updatebalance.php",
                                type: "post",
                                data: ten,
                                success: function(data) {

                                     document.getElementById("balance").innerHTML = ""
                                     alert('it was successful');
                                 }
                            }
                        );
                    }
                );
            });
 </script>


<html>

    <body>
        <div id="click">Ten Dollars </div>
        <div id="balance">
            <?php 

                $query = "SELECT * FROM users WHERE email='xxxxx@xxx.com'";
                $result = mysql_query($query);
                $row = mysql_fetch_row($result);
                echo "$row[2]";

            ?>
        </div>    

    </body>
</html>

这是 updatebalance.php 代码:

<?php
    include_once 'login.php';    
    $db_server = mysql_connect($db_hostname, $db_username, $db_password);
    $newBal = $_POST['ten']; 
    mysql_select_db($db_database);
    $query = "UPDATE users SET balance='$newBal' WHERE email='xxxxx@xxx.com'";
    $result = mysql_query($query);
    if (!$result) die ("Database access failed: " . mysql_error());
?>

发生以下情况:

  1. 首次加载页面时:显示“十美元”以及电子邮件“xxxxx@xxx.com”用户表中当前的余额 - 所以我知道连接到数据库没有问题。

  2. 当我点击“十美元”时:弹出警报,表示成功,但数据库中的值没有更改。带有余额的 div 就变成空白了,因为我不知道如何在“成功:”后更改它......

  3. 当我运行 updatebalance.php 并为 $newBal 输入一个数字(例如 4)时,它会在表中正确更新。

  4. 此外,我意识到我拥有它,因此新的余额值为 10,而不是之前的余额 + 10,但这是因为我试图减少可能发生错误的地方。

最佳答案

由于您使用的是ajax,因此您必须返回变量然后输出,目前您并没有太多检查是否成功,而是在响应中发送警报,这将包括您的错误代码。

您可以使用响应变量(在本例中,响应是变量数据)来做到这一点,这应该使您能够查看返回的内容,但如果它没有更新数据库,则几乎肯定是您的失败消息。

在这种特定情况下,您实际传入 post 变量的是 $_POST[0] = '10' 而不是 $_POST[ten]。您需要将数据作为对象传递才能以这种方式访问​​它:

data: { ten: ten }

我还建议使用与您想要访问的变量不同的名称或执行以下操作:

        $(document).ready(
        function()
        {
            $("#click").click(
                function()
                {
                    var post = { ten: ""}
                    var ten = 10;
                    var post.ten = ten;
                    $.ajax(
                        {
                            url:  "updatebalance.php",
                            type: "post",
                            data: post,
                            success: function(data) {

                                 document.getElementById("balance").innerHTML = "";
                                 alert('it was successful');
                             }
                        }
                    );
                }
            );
        });

以避免由于 10 是变量名而导致 10:10 可能导致的潜在困惑和不稳定行为。

编辑:漏掉了一个分号。

关于javascript - Ajax Jquery更新Mysql表中的值并刷新页面上的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22926045/

相关文章:

php - "Notice: Undefined variable"、 "Notice: Undefined index"、 "Warning: Undefined array key"和 "Notice: Undefined offset"使用 PHP

javascript - 中心/裁剪图像 - 使用 Cycle2 插件的响应式幻灯片

c# - 结果显示 System.String[]

javascript - fullPage.js 自动循环播放幻灯片无法前进到下一部分

javascript - 如何在不更改 Vue 中的 url 的情况下返回 404 错误?

javascript - 如何找到字符串特定部分开始的位置?

javascript - JS 点击时不触发

php - 用于 mysql 数据库数据的大型下拉菜单 css

javascript - Fabricjs - 调整大小无法在对象上正常工作

javascript - 在 Javascript 中嵌套对象 - 匿名不是函数错误