如何将JSON和JS从HTML文件内部移动到外部文件

How Do I Move JSON and JS From Inside An HTML File To External Files?

本文关键字：文件 内部 移动 外部 HTML JSON JS      更新时间：2023-09-26

我想将JSON和JavaScript从HTML内部移动到外部文件中。

下面的例子是我正在运行的一个测试，以确保数据被拉入。一旦我开始添加实际数据，JSON和JS就会增长，我不希望它扰乱HTML。

而且会有第三方根据需要编辑JSON数据，所以我不希望他们在HTML中这样做。

以下是CodePen的示例：http://codepen.io/frankDraws/pen/btvcr

这是代码：

var data = { "PreferredFlexPay":[
            {
                priceMonth:"$20.00 / Month",
                priceDownPayment:"$10.00 / Down Payment"
            }
    ]}
    // PREFERRED ANNUAL PASS FLEX PAY MONTH
var output='<span class="price-month">';
for (var i in data.PreferredFlexPay) {
    output+=data.PreferredFlexPay[i].priceMonth;
}
output+='</span>';
document.getElementById('preferred-FP-month').innerHTML=output;
// PREFERRED ANNUAL PASS FLEX PAY DOWNPAYMENT
var output='<span class="price-downpayment">';
for (var i in data.PreferredFlexPay) {
    output+=data.PreferredFlexPay[i].priceDownPayment;
}
output+='</span>';
document.getElementById('preferred-FP-downpayment').innerHTML=output;
body, html {
    background: rgba(73,155,234,1);
	background: -moz-radial-gradient(center, ellipse cover, rgba(73,155,234,1) 0%, rgba(0,81,168,1) 100%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(73,155,234,1)), color-stop(100%, rgba(0,81,168,1)));
	background: -webkit-radial-gradient(center, ellipse cover, rgba(73,155,234,1) 0%, rgba(0,81,168,1) 100%);
	background: -o-radial-gradient(center, ellipse cover, rgba(73,155,234,1) 0%, rgba(0,81,168,1) 100%);
	background: -ms-radial-gradient(center, ellipse cover, rgba(73,155,234,1) 0%, rgba(0,81,168,1) 100%);
	background: radial-gradient(ellipse at center, rgba(73,155,234,1) 0%, rgba(0,81,168,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#0051a8', GradientType=1 );
	background-size:cover;
    width:100%;
    height:100%;
    font: normal 20px/1.8em Roboto, Helvetica, sans-serif;
    padding: 8px;
    margin: auto;
}
div {
  max-width: 450px;
  height: auto;
  background: #fff;
  margin: auto;
  border-radius: 4px;
  padding:20px;
}
<div>
  <table class="fp-table">
    <tr><td id="preferred-FP-month"></td></tr>
    <tr><td id="preferred-FP-downpayment"></td></tr>
  </table>
</div>

您将JavaScript放在自己的文件中，传统上扩展名为.js，并使用script标记在HTML中引用该文件：

<script src="yourfile.js"></script>

（您在开始和结束标记之间放置的任何内容都将被浏览器完全忽略。）

类似地，对于CSS（扩展.css）：

<link rel="stylesheet" href="yourfile.css">

如果您有JSON（正如Felix所指出的，您没有这个问题），那么它通常会放在一个扩展名为.json的文件中，您可以通过XHR（ajax）加载它。但通常情况下，如果您有要在JavaScript中使用的静态数据，您只需直接声明JavaScript变量等。

我明白了为什么它不起作用。我需要将指向外部文件的链接放在</body>之前的页面底部。

谢谢大家的帮助！我爱这个社区。

相关文章：