Javascript中如何动态的加载文件,并将文件嵌入到当前页面的HTML中?

jaryyy2000 2013-02-21 11:00:37
我用js的模版来组织页面结构,客户端请求的页面只有一个index.html,其他的想都通过模版来动态加载。
模版的语法结构如下:
<script id="t_ul" type="text/html">
<ul>
<% for (i = 0; i < num; i++) { %>
<li><a href="<%= list[i].href %>" ><%= list[i].title %></a></li>
<% } %>
</ul>
</script>


这段代码可以放到整个页面代码的任何部分,除<script></script>标签里面。
模版的起始结束标签script中,id="t_ul"特别重要,必须有它才能被模版加载模块加载;
而type="text/htm" 也必不可少,有这个声明在,浏览器的js解释器才不会解释这里面的代码。

我该如何来用js动态加载?
...全文
3155 18 打赏 收藏 转发到动态 举报
写回复
用AI写文章
18 条回复
切换为时间正序
请发表友善的回复…
发表回复
jaryyy2000 2013-02-22
  • 打赏
  • 举报
回复
引用 10 楼 zhang_7150 的回复:
哥们,不是JS的错,是你用的不对。 js不是服务器端语言,它只是用来做客户端的,你所谓include作用,那是服务端语言完成的,跟js有个毛关系。 你可以使用ajax请求一个服务用来处理模板,动态加载到你需要的页面中来。
语言弱智就是弱智,不是服务器语言就不能Include载入了?谁规定的?是可以用HTTP请求来动态获得数据,并用innerHTML的方法来嵌入到HTML文档树里,可是我从模版里定义的变量什么的都不能使用~ 这语言缺点也太多了,都说DOM强大,我看也不咋地,DOM操作连个<br />元素都不能创建~弱智的语言
ftiger 2013-02-22
  • 打赏
  • 举报
回复
嵌入的方法不对。inner.html之前要格式化模板,可以选在服务器格式化好还是客户端格式化。
jaryyy2000 2013-02-22
  • 打赏
  • 举报
回复
引用 6 楼 Mackz 的回复:
你知不知道什么叫服务端什么叫客户端?知不知道<script>的src属性是干嘛的? 模版肯定放服务器上处理好再给客户端效率高。
对不住了,这个模版如果链接在src里面无效~ 算了~不用再想了,刚刚我发现可以直接用url请求ajax然后返回这个文件的,之后我用inner.html写入文档树~结果模版还是不能被解析~看来嵌入的方法是不行的
菜牛 2013-02-22
  • 打赏
  • 举报
回复
你知不知道什么叫服务端什么叫客户端?知不知道<script>的src属性是干嘛的? 模版肯定放服务器上处理好再给客户端效率高。
javascript_2011 2013-02-22
  • 打赏
  • 举报
回复
楼主想要的是不是这种? http://blog.csdn.net/cyokin/article/details/171347
Kilin_Zhang 2013-02-22
  • 打赏
  • 举报
回复
哥们,不是JS的错,是你用的不对。 js不是服务器端语言,它只是用来做客户端的,你所谓include作用,那是服务端语言完成的,跟js有个毛关系。 你可以使用ajax请求一个服务用来处理模板,动态加载到你需要的页面中来。
jaryyy2000 2013-02-22
  • 打赏
  • 举报
回复
引用 17 楼 jaryyy2000 的回复:
引用 15 楼 zhu18 的回复:XXX.innerHTML = ajax请求回来的代码中的JS片断不会执行 使用JQUERY的 $(XXX).html(内容) 我想用YUI,能给我讲下YUI3中DOMContentLoaded事件的用法吗?
另外YUI里面的DOMContentLoaded兼容IE6、8浏览器吗?
jaryyy2000 2013-02-22
  • 打赏
  • 举报
回复
引用 15 楼 zhu18 的回复:
XXX.innerHTML = ajax请求回来的代码中的JS片断不会执行 使用JQUERY的 $(XXX).html(内容)
我想用YUI,能给我讲下YUI3中DOMContentLoaded事件的用法吗?
北京不不 2013-02-22
  • 打赏
  • 举报
回复
你是想做一个模板引擎吧。 否则的话没法实现。
zhu18 2013-02-22
  • 打赏
  • 举报
回复
XXX.innerHTML = ajax请求回来的代码中的JS片断不会执行 使用JQUERY的 $(XXX).html(内容)
jaryyy2000 2013-02-22
  • 打赏
  • 举报
回复
引用 8 楼 ftiger 的回复:
嵌入的方法不对。inner.html之前要格式化模板,可以选在服务器格式化好还是客户端格式化。
打错,是 XXX.innerHTML = XXX
「已注销」 2013-02-22
  • 打赏
  • 举报
回复
引用 12 楼 jaryyy2000 的回复:
引用 10 楼 zhang_7150 的回复:哥们,不是JS的错,是你用的不对。 js不是服务器端语言,它只是用来做客户端的,你所谓include作用,那是服务端语言完成的,跟js有个毛关系。 你可以使用ajax请求一个服务用来处理模板,动态加载到你需要的页面中来。 语言弱智就是弱智,不是服务器语言就不能Include载入了?谁规定的?是可以用HTTP请求来动态……
LZ这话说的有点不太理性,相信很多人都看的不舒服(包括我也一样),你有什么问题可以提出来,大家一起 解决。JS是有缺点,但是它的优点可以弥补它的缺点。何必盯着缺点不放呢。
Kilin_Zhang 2013-02-22
  • 打赏
  • 举报
回复
引用 12 楼 jaryyy2000 的回复:
引用 10 楼 zhang_7150 的回复:哥们,不是JS的错,是你用的不对。 js不是服务器端语言,它只是用来做客户端的,你所谓include作用,那是服务端语言完成的,跟js有个毛关系。 你可以使用ajax请求一个服务用来处理模板,动态加载到你需要的页面中来。 语言弱智就是弱智,不是服务器语言就不能Include载入了?谁规定的?是可以用HTTP请求来动态……
等你分清客户端和服务端的时候再来讨论这个问题
jaryyy2000 2013-02-21
  • 打赏
  • 举报
回复
引用 4 楼 jaryyy2000 的回复:
引用 2 楼 yangyi22 的回复:不太明白你的意思,截取一段供参考 JavaScript code?12345678910111213<script language="javascript"> var groupName='${item.item}'; var result = jsonrpc.ajax.getItemsByGroupName……
javascript这种语言真垃圾,竟然没有require和include语句……那些喊他好用的人我看都够瞎的。
jaryyy2000 2013-02-21
  • 打赏
  • 举报
回复
引用 2 楼 yangyi22 的回复:
不太明白你的意思,截取一段供参考 JavaScript code?12345678910111213<script language="javascript"> var groupName='${item.item}'; var result = jsonrpc.ajax.getItemsByGroupName(groupName); var……
不是这个意思,我是说我上面给出的代码是一个单独的文件,这个文件就是模版文件。 我的页面只有一个index.html,我希望在需要模版文件的时候把模版文件写入到index.html中。 用innerHTML和document.write不是不可以,但问题是我的模版都是文件 上面我给出的只是示例的一小段,为了说明一下模版文件起始的两个<script>标签。实际的模版文件要复杂并且大很多,我不可能直接从后台用print的方式传输给前台index.html文件。 所以我想要求一个方法,可以直接把后台的模版文件嵌入到index.html文件中的方法
jaryyy2000 2013-02-21
  • 打赏
  • 举报
回复
引用 1 楼 calmcrime 的回复:
参考下 http://heeroluo.net/Article/Detail/73
好像没有我要的动态加载方面的东西啊
yangyi22 2013-02-21
  • 打赏
  • 举报
回复
不太明白你的意思,截取一段供参考
<script language="javascript">
     var groupName='${item.item}';
     var result = jsonrpc.ajax.getItemsByGroupName(groupName);
     var item;
     var itemValue
     for (var i=0;i<result.length;i++){
	if(result[i][0]!=""&&result[i][1]!=""){
	   item = result[i][0];
           itemValue = result[i][1];
	   document.write("<tr><td align='center' width='68'><input type='checkbox' id='"+itemValue+"' name='_${item.item}' value='"+itemValue+"' onclick='setTableNames(this);'/></td><td> "+item+"</td></tr>");                                         
	}
     }
</script>
001007009 2013-02-21
  • 打赏
  • 举报
回复
参考下 http://heeroluo.net/Article/Detail/73
通过JavaScript的对象或现代的fetch API,动态加载外部HTML内容,插入到页面某个元素内部。这种技术允许开发者以类似“拼接”内容的方式实现页面模板化。标签可以嵌入外部资源,包括HTML文件。基本用法类似于