在HTML中使用变量_Html_Json - Fatal编程技术网

在HTML中使用变量

html json

在HTML中使用变量,html,json,Html,Json,我正在寻找一种在我的网站中使用变量的方法。我想要一些链接这个的东西 <div class="container"> <h2>This product cost</h2> {{product_price}} </div> 我曾尝试将angular用于json文件中的数据，但这对我来说太难理解了。我可以从文章数据库中创建一个包含价格的json文件问题是: 在本例中，从json文件或任何简单的文件中获取一段数据并显示在我的网页上的简单方法是

我正在寻找一种在我的网站中使用变量的方法。我想要一些链接这个的东西

<div class="container">
    <h2>This product cost</h2> {{product_price}}
</div>

我曾尝试将angular用于json文件中的数据，但这对我来说太难理解了。我可以从文章数据库中创建一个包含价格的json文件

问题是:

在本例中，从json文件或任何简单的文件中获取一段数据并显示在我的网页上的简单方法是什么HTML是一种静态标记语言。它不是一种编程或脚本语言。为了实现您的目标，需要执行某种服务器端脚本。这意味着您的服务器需要运行一个应用程序，该应用程序编译一些代码并生成生成的静态HTML，这些HTML将在每次发出HTTP请求时提供给浏览器。有许多服务器端脚本选项可用。最流行的是PHP，但几乎所有主要的桌面编程语言都有可用的工具，可以将其用作服务器端HTTP预处理器。

您正在寻找模板：

我建议：或者你可以用谷歌搜索其他人

对于车把，除了他们的文档，这里是一个不错的选择

我认为您想要绑定数据。您可以通过使用小胡子来实现这一点，正确的方法是在后端或前端使用类似MVC的标记。除此之外，不要使用代币。使用JS插入，如下所示：

<div class="container">
    <h2>This product cost</h2> <span id="myId"></span>
</div>

<script>
var myVar = whateverFromMyJsonFile;
document.getElementById('myId').innerHtml(myVar);
</script>

使用下划线

或者，您可以使用脚本标记，这样就不会在JavaScript字符串中包含HTML

你不能只使用HTML，你至少需要一些客户端脚本语言，比如Javascript

你提到你试过用Angular，但那对你来说太麻烦了。然后，让我们尝试使用以下方法制作一个简单的示例：

以下是可能的情况：

<html>
<head></head>
<body>
  <script type="text/template" id="container-template">
    <div class='container'>
      <h2>This product cost</h2> {{product_price}}
    </div>
  </script>

  <script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min.js"></script>
  <script type="text/javascript">
    var source = document.getElementById('container-template').innerHTML.trim();
    var template = Handlebars.compile(source);

    var data = {product_price: 25};
    document.body.innerHTML = template(data);

      // Would render:
      //
      // <div class="container"><h2>This product cost</h2> 25</div>
  </script>
</body>
</html>

OP说他们看到了棱角，但认为这太复杂了。我投了赞成票，但收回了我的票。你需要发布一个例子；只有链接的答案并不是真正的答案。您需要在服务器上提供一个数据源，并用某种方法将数据值替换为占位符。有成千上万的方法可以做到这一点。

var tpl = _.template( '<div class="container"><h2>This product cost</h2> <%= product_price %></div>');
document.body.innerHTML = tpl({product_price: 25})

<script type="text/template" id="tpl">
  <div class="container">
    <h2>This product cost</h2> <%= product_price %>
  </div>
</script>

var tpl2 = _.template(document.getElementById('tpl').innerHTML);
document.body.innerHTML = tpl2({product_price: 25});

<html>
<head></head>
<body>
  <script type="text/template" id="container-template">
    <div class='container'>
      <h2>This product cost</h2> {{product_price}}
    </div>
  </script>

  <script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min.js"></script>
  <script type="text/javascript">
    var source = document.getElementById('container-template').innerHTML.trim();
    var template = Handlebars.compile(source);

    var data = {product_price: 25};
    document.body.innerHTML = template(data);

      // Would render:
      //
      // <div class="container"><h2>This product cost</h2> 25</div>
  </script>
</body>
</html>