用 + 增加计数器并将值存储到数据库答案

【问题标题】：Increasing a counter with + and storing value to database用 + 增加计数器并将值存储到数据库
【发布时间】：2012-10-12 14:53:55
【问题描述】：

我将创建一个计数器，在用户按下小键盘上的 + 按钮时从 0 到 100 一步计数。

这样做的目的是创建一个商店柜台（我们在显示屏上显示当前客户编号，我希望它基于网络）。所以我正在使用 jQuery，我希望将当前数字也存储在 MySQL 数据库中。

我该怎么做呢？我不想使用表格，但如果必须，我会。我尝试了一些解决方案，但没有一个真正可用。问题是我对jQuery的了解不够。所以一些正确方向的指针会很好。

我希望流程是这样的：

我有一个元素，其中包含一个我将从数据库中获取的数字，到目前为止一切顺利，我自己肯定可以做到这一点。但是，然后用户在小键盘上按 + 我希望这个值增加 1。然后我希望脚本将这个新值存储在数据库中并从数据库中获取新值并再次将其呈现在元素中。

正如我所说，我非常感谢您提供一些建议。可能是我想多了。

顺便说一句，我正在使用 PHP。

【问题讨论】：

标签： php jquery mysql counter

【解决方案1】：

因此，您需要处理被点击的“+”按钮，并进行 AJAX 调用。比如：

http://jsfiddle.net/QE3xd/1/

HTML：

<input type="text" id="current" readonly="readonly" value="2" />
<input type="button" id="increaser" value="+" />

Javascript：

$(document).ready(function () {
    $("#increaser").on("click", add);
});

function add() {
    // Make AJAX call to PHP method (where DB operation is done)

    $.ajax({
        url: "/echo/json/",
        cache: false,
        data: {"increment_by": 1},  // This line may be unnecessary, as you could assume it increases the value by 1 every time (but using this could make it customizable
        dataType: "json",
        success: function (data) {
            // Should return data in format: {"new_current": 4}
            //$("#current").val(data.new_current);
            // ^^ the real line
            $("#current").val(+$("#current").val()+1);
            // ^^ just to simulate the new number being returned
        },
        error: function () {
            console.log("there was an error");
        }
    });
}

【讨论】：

【解决方案2】：

您所描述的是一个典型的 MVVM 问题。具有交互作用的按钮和显示元素的用户界面。

我在使用 knockoutjs 库和 jquery 解决此类问题方面有一些很好的经验。教程中有一个example with a counter，就像你的一样。

另外 2 个要求（检测小键盘键和发布）可以通过按键插件和 jquery $.post 轻松解决

【讨论】：