如何从 python 处理程序获取计数变量到 javascript 函数？

Question

我正在尝试以 user1、user2、user3 等形式向每个新用户颁发用户名。

作为my previous question 的结果，现在我知道我需要在应用程序中而不是在浏览器中跟踪计数。所以我创建了/counthandler（我正在使用 Google App Engine Python）：

class CountHandler(webapp.RequestHandler):
    def get(self):
        count = count + 1

在/choice，我有这个脚本：

function writeToStorage()
{ 
  var user = "user" + count;
  localStorage.setItem("chooser", user);

  document.getElementById("form_chooser").value = user;  
};

如何从/counthandler 获取“计数”到writeToStorage？我知道我需要使用 HMLHttpRequest，但不确定如何使用。谢谢。

更新

针对 jfriend00 的评论，我添加了更多关于 ajax 调用的具体问题：

  var xhr = new XMLHttpRequest();
  xhr.open("POST", "http://localhost:8086/counthandler", true);
  xhr.onreadystatechange = function (aEvt) {
    if (xhr.readyState == 4 && xhr.status == 200){ 
      console.log("request 200-OK");
    }
    else {
      console.log("connection error");
    }
  };
  //I am not sure what to put in send()?
  xhr.send();

更新 2

响应 jfriend00 的评论和提供的参考，我将调用更改为 GET；但不确定之后会发生什么：

  var xhr = new XMLHttpRequest();
  xhr.open("GET", "http://localhost:8086/counthandler", true);
  xhr.onreadystatechange = function (aEvt) {
    if (xhr.readyState == 4 && xhr.status == 200){ 
      console.log("request 200-OK");
    }
    else {
      console.log("connection error");
    }
  };
  //changed this to "null". this now opens the connection.
  //what do I do after this?
  xhr.send(null);

更新回答 jfriend00 的更新回答：

感谢您的详细解释。现在我明白了。但是我仍然缺少一些东西。很容易得到count的值：

query = Count.all()
query.get()
count = e.count
logging.info("count = %s" % count)
# gives count = 12

现在你说的是，将python变量“count”的值为12赋给js变量“count”

<script type="text/javascript">
var count = 12;
</script>

我不明白的是下次count = 13时会发生什么？

在我看来

<script type="text/javascript">
var count = count;
</script>

不会工作。正确的？我错过了什么？

再次感谢。

---

更新以尝试 jfriend00 答案中的第二个选项。看来我需要包含一个成功函数来获取/counthandler发送的“count”变量：

    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function()
    {
        if (xhr.readyState == 4 && xhr.status == 200)
        {
            //get "count" sent by /counthandler?
            //var count = count;
        }
    };
    xhr.open("POST", "http://localhost:8086/counthandler", true);
    xhr.send(null);

但我仍然不明白/counthandler 如何发送“计数”以及如何在成功函数中获取它。

Answer 1

如果您在服务器端跟踪变量并希望将其放入您的网页中，那么您只需向网页输出一个值为 count 的 javascript 变量。因此，如果您的服务器计数为 12，那么您只需将其从您的 Web 服务器应用程序输出到网页：

var count = 12;

然后，任何客户端 javascript 代码都可以访问该计数变量的值。如果您想从客户端网页修改 count 变量，您必须发出服务器请求才能在服务器（发布或获取）上修改它，通常通过表单发布或 ajax 调用完成。

---

有两种方法可以解决这个问题：

选项 1：

您说过您的服务器具有 count 的价值。它存储在您的服务器上的某个地方。它不在 /counthandler 或 /choice 中 - 这些只是在您的服务器上运行的脚本。因此，如果您想要 /choice 网页中的 count 值，那么您可以修改 /choice python 脚本并在该脚本中获取 count 的值，然后将其插入网页中，就像放置其他任何内容一样在来自 python 脚本的网页中（具体如何执行取决于您使用的 python 环境），但如果您已经从 python 脚本创建网页，则必须已经在执行此操作。然后，在该网页的适当位置，放置这段 javascript：

<script type="text/javascript">
var count = 12;
</script>

您不会从 /counthandler 获取值并将其放入服务器的 /count 中。在 /count 脚本中，您获取 count 的值并将其放入该网页。

选项2：

在 /choice 网页中，您向某个服务器页面（可能是 /counthandler）发出 ajax 请求以获取当前计数。来自该 ajax 调用的成功处理程序将具有所需的计数值，然后您可以在网页中随意使用它。

至于将其写入本地存储，我们仍然不知道您为什么晚上尝试这样做，因为您似乎已经将它存储在服务器上。 localstorage 是特定于浏览器的存储，仅适用于该特定浏览器，用户可以随时清除。

Answer 2

我必须说，你的做法完全错误，从而使你自己的事情变得比实际需要的要困难得多。

存储用户名等内容的适当位置不在 Javascript 本地存储中，而是在 cookie 中。无需 AJAX，只需服务器端代码。

你没有说你正在使用什么服务器端框架，但假设它是 Django，你会做response.set_cookie('username', username) - 虽然如果你使用的是 Django，我无法想象你为什么不使用内置的身份验证框架。