Question

我试图让每个人点击一个按钮。我正在考虑使用ajax的POST函数，但它会在服务器上发出大量的PHP请求。我想做那样的事情：

<script>
document.getElementById('buttonToClick').onclick = function() {
    var totalClicks = ???; // get total clicks number from the server somehow and 
// assign it to var totalClicks;

    document.getElementById("totalClicks").innerHTML = totalClicks;

    ??? = ??? + 1; // add 1 to total clicks number and save it to server.
};
</script>

<input id="buttonToClick" type="submit" name="button" value="enter"/>
<a>The button is clicked <a id="totalClicks"></a> times!</a>

是否可以使用Javascript进行此操作？

Answer 1

您必须使用AJAX将POST数据发送到服务器，因为您使用的是jQuery，您可以使用$.ajax函数。

举个例子：

$(document).on("click", "#buttonToClick", function() {
   uploadClickCount();
});

function uploadClickCount()
{
    var userId = $("#UserId").val(); // Get the user id first
    var totalClicks = $("#totalClicks").val();

    $.ajax({
        url: 'YourWebsite/ClickCounter',
        type: "POST",
        data: { user: userId, clickCount: totalClicks },
        success: function() { }
        error: function() { alert('Unable to connect to the server'); }
    });
}

保存对服务器的调用的另一种方法是尝试在用户离开页面时发送总点击次数或使用window.unload方法关闭页面，但这可能不可靠。

您还可以查看将点击次数存储在HTML 5本地存储中，然后在用户返回/ DOM准备就绪后将其上传，即$(document).ready(function() { });

最佳做法是在用户上次尝试联系服务器时进行存储，然后您可以在10秒延迟后使用此调用来调用AJAX调用，这将阻止服务器端的大量请求。

哪种方式最适合为每位访客制作公共变量？

1 个答案: