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

时间:2014-10-22 15:52:45

标签: javascript json

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

以下示例是我正在运行的测试,以确保数据被拉入。一旦我开始添加实际数据,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>

2 个答案:

答案 0 :(得分:1)

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

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

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

类似于CSS(扩展名.css):

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

如果你有JSON(你没有问题,正如Felix指出的那样),那通常会放在一个.json扩展名的文件中,你可以通过XHR(ajax)加载它。但通常如果您想在JavaScript中使用静态数据,则只需直接声明JavaScript变量等。

答案 1 :(得分:0)

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

谢谢大家的帮助!我喜欢这个社区。