Question

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

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

我将如何做到这一点？我想不使用表格，但如果我必须，我会。我尝试了一些解决方案，但没有一个真正可用。问题是我对jQuery的理解不够。因此，正确方向的一些指示会很好。

我希望流程如下：

我有一个元素，其中包含我将从数据库中获取的数字，到目前为止一切都很好，我自己肯定可以这样做。然而，然后用户按下小键盘上的+我希望此值增加1.然后我希望脚本将此新值存储在数据库中并从数据库中获取新值并再次将其显示在元素中。

正如我所说的，我非常感谢这方面的一些指示。也许我在思考它。

我顺便使用PHP。

Answer 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");
        }
    });
}

Answer 2

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

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

使用keypress插件和jquery $.post

可以轻松解决其他2项要求（检测小键盘和发布）

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

2 个答案: