如何使用可从 Javascript 访问的 HTML 发送值？

发布于 2024-12-13 03:22:44 字数 300 浏览 2 评论 0原文

通常，网页上的 JavaScript 需要能够访问服务器上已知的变量。例如，用户的用户名。假设我们不想发出 JSON/XML 请求，因为这会不必要地增加复杂性以及页面点击次数。我们希望将数据与 html/Javascript 一起发送。

发送数据的一种方法是将其注入 Javascript。

var x={{username}};

另一个想法是在头部创建一个元项并将数据存储在那里，然后使用 jQuery（或等效的）来检索它。

这些方法中的哪一种比另一种更好，或者我应该考虑其他方法吗？

原文

Often the Javascript on a webpage will need to be able to access variables that are known on the server. For example, the user's username. Suppose that we don't want to make a JSON/XML request as that would increase the complexity unnecessarily and also the number of page hits. We want to send the data along with the html/Javascript.

One way to send the data would be to inject it into the Javascript.

var x={{username}};

Another idea would be to create a meta item in the head and store the data there and then use jQuery (or equivalent) to retrieve it.

Is either of these methods preferable to the other or are there any other methods that I should consider?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

如何视而不见 2024-12-20 03:22:44

这两种方法中的一种比另一种更好，还是我应该考虑其他方法？

我不认为有一个正确的答案，当然我在这个问题上听到了很多相互矛盾的意见，但从你提到的两种方法中选择我会选择将值注入 JavaScript，因为我发现它更容易。

但是，既然您询问了其他建议，您可以将这两种想法结合起来：您的服务器端代码可以只在

<html>
<head>
<script>
   var dataFromServer = { /* all your server data here */};
</script>
<script type="text/javascript" src="somelibrarycript.js"></script> 
<script type="text/javascript" src="someotherscript.js"></script>
<script>
   if (dataFromServer.someProperty) {
      // someProperty provided above so do something with it...
   }
</script>
</head>
etc...

这种方法还有一个额外的优点，即服务器端代码本质上只是生成 JSON（如果直接包含在页面源代码中，它将成为对象文字），因此如果当您稍后决定开始使用一些 Ajax 时，您就已经差不多成功了。

Is either of these methods preferable to the other or are there any other methods that I should consider?

I don't think there's a single right answer, and certainly I've heard lots of contradictory opinions on this subject, but choosing from the two methods you mention I'd go with injecting the values into JavaScript because I find it easier.

But since you asked for other suggestions you can kind of combine the two ideas: instead of meta items, your server-side code can just insert a single <script> element in the <head> to store the data in a variable that can then be accessed directly from any of your other scripts (including scripts in multiple source files). You can stick all of your data in a single object to avoid lots of globals:

<html>
<head>
<script>
   var dataFromServer = { /* all your server data here */};
</script>
<script type="text/javascript" src="somelibrarycript.js"></script> 
<script type="text/javascript" src="someotherscript.js"></script>
<script>
   if (dataFromServer.someProperty) {
      // someProperty provided above so do something with it...
   }
</script>
</head>
etc...

This approach has the added advantage that the server-side code is essentially just producing JSON (that becomes an object literal if included directly in the page source) so if you later decide to start using some Ajax you'll already be almost there.

回复收藏 0 原文

浮生未歇 2024-12-20 03:22:44

我只会在头部有一个元素，它声明一个包含您的信息的命名良好的全局对象。像这样：

<script type="text/javascript" >
    this.blah = this.blah || {};
    this.blah.userinfo = this.blah.userinfo || {};

    this.blah.userinfo = {
        "username" : "UserName42"
        "gender" : "Male"
    };
<script>

最上面的两行只是初始化你的全局对象。由于它是全局的，我们使用“blah”来命名它。

I would just have a element in the head which declares a well-named global object containing your information. Something like :

<script type="text/javascript" >
    this.blah = this.blah || {};
    this.blah.userinfo = this.blah.userinfo || {};

    this.blah.userinfo = {
        "username" : "UserName42"
        "gender" : "Male"
    };
<script>

The top two lines just initialise your global object. Since it's global, we use "blah" to namespace it.

回复收藏 0 原文

ぃ双果 2024-12-20 03:22:44

你所建议的完全没问题。例如，CoffeeScript、Underscore.js 和 Backbone.js 的创建者 Jeremy Ashkenas 建议在骨干文档

<script>
  Accounts.reset(<%= @accounts.to_json %>);
  Projects.reset(<%= @projects.to_json(:collaborators => true) %>);
</script>

What you are suggesting is totally fine. For example Jeremy Ashkenas, creator of CoffeeScript, Underscore.js and Backbone.js suggests to do exactly the same in Backbone docs

<script>
  Accounts.reset(<%= @accounts.to_json %>);
  Projects.reset(<%= @projects.to_json(:collaborators => true) %>);
</script>

回复收藏 0 原文

太阳哥哥 2024-12-20 03:22:44

我认为这个问题有点复杂，因为根据我的经验，您很少依赖具有帐户、用户权限等的网站的静态/预创建的 HTML 页面。

通常，这样的网站/应用程序依赖于某种“服务器页面”技术 - ASP、JSP、PHP（或通过 AJAX 请求管理所有这些） - 这将允许您编写某种类似于以下内容的标签/服务器代码<%=request.getAttribute("userName")%> - 当服务器编译/解释时，会将您的用户名注入到页面中您想要的位置。

如果由于某种原因，您声称您的应用程序中情况并非如此，并且您向用户提供了纯粹的预创建或静态 HTML - 那么，您实际上必须执行以下操作之一：

1.AJAX 请求检索用户名

我认为你的论点是