如何将计数变量从Python处理器传递给JavaScript函数？

Question

我想给每个新用户发一个用户名，格式是user1、user2、user3，依此类推。

根据我之前的问题的结果，我现在明白了，我需要在应用程序中跟踪计数，而不是在浏览器里。所以我创建了一个叫做 /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;  
};

我该如何把“count”从 /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）赋给JavaScript变量“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 是如何发送“count”的，以及我该如何在成功函数中获取它。

Answer 1

我得说，你这样做完全是错误的方向，这让事情变得比实际需要的要复杂得多。

存储用户名这样的东西，正确的地方不是在JavaScript的本地存储里，而是应该放在一个cookie里。这样做不需要AJAX，只需要服务器端的代码。

你没有说你用的是什么服务器端框架，但假设你在用Django，你只需要这样写 response.set_cookie('username', username)。不过如果你在用Django，我真想不通你为什么不使用它自带的认证框架。

Answer 2

如果你在服务器上保存了一个变量，并且想把它放到网页上，那么你只需要把这个变量的值输出成一个JavaScript变量。比如说，如果你的服务器上这个变量的值是12，那你就可以从你的网页服务器应用中把这个值输出到网页上：

var count = 12;

这样，网页上的任何JavaScript代码都可以访问到这个变量的值。如果你想在网页上修改这个变量的值，你需要向服务器发送请求来进行修改（通常是用表单提交或者ajax调用）。

---

你可以用两种方法来解决这个问题：

选项1：

你说你在服务器上有这个变量的值。它存储在服务器的某个地方，而不是在/counthandler或/choice这些地方——那些只是运行在服务器上的脚本。所以，如果你想在/choice网页上获取这个变量的值，你需要修改/choice的Python脚本，从中获取这个变量的值，然后像往网页中插入其他内容一样，把它放到网页上（具体怎么做取决于你使用的Python环境），但如果你已经在用Python脚本创建网页，那你肯定知道怎么做。然后，在网页的合适位置放入这段JavaScript：

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

你并不是从/counthandler获取值然后放到/count中。在/count脚本中，你直接获取这个变量的值并放到网页中。

选项2：

在/choice网页中，你可以发起一个ajax请求去某个服务器页面（可能是/counthandler）来获取当前的变量值。这个ajax调用的成功处理函数会得到你想要的值，然后你可以在网页上随意使用它。

至于为什么要把它写入本地存储，我们不太明白，因为你似乎已经在服务器上存储了这个值。localstorage是浏览器特定的存储，只能在特定的浏览器中使用，并且用户随时可以清除它。