JS封装HTML <scrtpt type ="text/HTML"> JSPOP跨域请求
2017-02-25 11:48
531 查看
在实际开发过程中可能会遇到,用 Ajax或和JSOP(可跨域请求)后台数据,然后利用JSONP格式返回来后在前端显示,最笨的方法就是用一个
var html="<div>...</div>"
然后采用 $(".#id").append(html);的形式进行append到对应的容器当中去,这种方式比较死板,不利于templte的维护,下面介绍另外一种方法供参考(熟悉react的课绕道,大神亦可忽略)
上面是简化后的模板(仅供参考),注意[pid]是我最终需要用json里面的数据替换的
访问API获取数据(采用原生js,也可以用Jquery。都是一眼的)
最后插入到对应地方即可,欢迎提问
var html="<div>...</div>"
然后采用 $(".#id").append(html);的形式进行append到对应的容器当中去,这种方式比较死板,不利于templte的维护,下面介绍另外一种方法供参考(熟悉react的课绕道,大神亦可忽略)
<script type="text/html" id="relateProBox-tmpl"> <li style="float: left;"> <p class="catProCont"> <a href="" title="XXX"> <img id="triggerPicId"[pid] width="80" height="80" alt="" /> </a> </p> <a href="URL" title="Desc" class="proName">TTTTTTT<span class="hlNew"></span></a> </li>
上面是简化后的模板(仅供参考),注意[pid]是我最终需要用json里面的数据替换的
访问API获取数据(采用原生js,也可以用Jquery。都是一眼的)
window.onload=function(){ var s=document.createElement("script"); s.async=true; s.src="your api url here"; console.log(document.getElementsByTagName("script")); var s2=document.getElementsByTagName("script")[0]; s2.parentNode.insertBefore(s,s2); }; var array=new Array() //该函数的函数名必须与AIP返回来的callbackFunction名一致 function CLIENTCALLBACK(response) { console.log(response); var id; for (i = 0; i < response.length; i++) { Object obj = new Object; obj.id=response[i].id;//构造对象,将需要的数据组成成对象 array.push(obj);//此处为数组赋值 } } //主要用于遍历和替换 function replaceHtml(html,array){ var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm');//i g m是指分别用于指定区分大小写的匹配、全局匹配和多行匹配,此处将匹配[] var finalHtml = '' ; for (var i=0;i<array.length;i++ ){ finalHtml += html.replace(reg, function (node, key) { return { 'pid': array[i].id }[key]; }); //注意pid和需要替换的值 } return finalHtml; }$("#XX").append(replaceHtml(document.getElementById('relateProBox-tmpl').innerHTML,array));
最后插入到对应地方即可,欢迎提问
相关文章推荐
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />解释
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>意义
- 让HTML中的文本框<input type="text">中的文字垂直居中
- 让HTML中的文本框<input type="text">中的文字垂直居中
- 在JS里面,取struts的<html:form>标签里面的<html:text property="title"/>值
- <script type="text/html"></script> js模版使用
- <script type="text/html"></script> js模版使用
- <input type="text"> and <html:text> 禁止复制
- <%@page contentType="text/html;charset=gbk"%>与<meta http-equiv="Content-Type" content="text/html; ch
- 【HTML】明明加了<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />却还是乱码的可能原因
- <script type="text/html"></script> js模版使用
- <script type="text/javascript" src="<%=path %>/pages/js/arsis/area.js?v=1.01"></script> 为什么在最后加? v+1.01
- <script type="text/javascript">alert("hello world");</script>
- 如何改变<input type=”text" >输入框内的值
- meta name的含义:<META http-equiv=Content-Type content="text/html; charset=gb2312">
- 杜绝<script src="js/tool.js" type="text/javascript"/>这样写的习惯
- 使用<input type="text" value=<%=str%>>出现取值不全的问题
- html中类似 <input type=“text” name="username[]" value="1">中的方括号的含义
- 当<script>中的type等于text/html时,我们可以做很多事件!