【前端实现页面总结二】

阅读: 评论:0

【前端实现页面总结二】

【前端实现页面总结二】

只能使用webstorm打开,问就是不知道!离谱事件

  • 好吧,其实我知道原因:跨域问题,一会儿我截屏证明
  • 但是webstorm会自动在本地文件前添加localhost
  • 网上大多方法我都试过,只有这个最实用,而且完全不影响项目放在线上
  • 有其他方法的童鞋萌,也不要忘记分享一下哦!!!嘻嘻
  • PS:本篇博客只能理解,粘代码运行不太行哦,文章末尾的参考博客也很可

文章目录

  • 一、 首先,动图证明“修改json数据之后,刷新页面发生变化”
  • 二、 html文件
  • 三、 `/json/products.json`文件

一、 首先,动图证明“修改json数据之后,刷新页面发生变化”

二、 html文件

<!DOCTYPE html>
<html xmlns=""><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><script src=".0.2/jquery.min.js" type="text/javascript"></script>
</head>
<body><div class="products_lg"><!-- 通过模板字符串上传的json数据将放置在这个位置 -->
<div>
</body>
</html>
<script type="text/javascript" src="../lib/undescore.js"></script>
<script type="text/template" id="template"><% for(var i=0; i<data.length; i++){ %><div style="margin: 2px; width: 126px; float: left; height: 160px"><table border="0" cellpadding="0" cellspacing="0" width="1%"><tbody><tr><td><table bgcolor="#e9e9e9" border="0" cellpadding="3" cellspacing="1" width="100%"><tbody><tr><td bgcolor="#ffffff" height="106" width="130"><table bgcolor="#e9e9e9" border="0" cellpadding="0" cellspacing="0" width="100"><tbody><tr><td align="middle" bgcolor="#ffffff" height="100" valign="center" width="100"><span><a href="<%= data1[i].a_href%>"><img border="0" height="100" src="<%=data1[i].img_href%>" width="111" /></a></span></td></tr></tbody></table></td></tr></tbody></table></td><td valign="bottom">&nbsp;</td></tr><tr><td colspan="2"><table border="0" cellpadding="0" cellspacing="2" width="100%"><tbody><tr><td align="middle" height="20"><span><a href="<%=data1[i].a_href%>"><%= data1[i].print_type%></a></span></td></tr><tr><td align="middle" height="20"></td></tr></tbody></table></td></tr></tbody></table></div><% } %>
</script>
<script type="text/javascript">function ajax_request(new_old) {$.ajax({url: "/json/products.json", // 存储json数据的文件,该目录可以改变type: "GET",dataType: "json",success: function(data) {// console.log(new_old)var temp = $("#template").html();var html = _.template(temp);var tep = html({data[0].products_lg})$(".products_lg").html(tep_lg);}})}
</script>

三、 /json/products.json文件

[{"products_intro": [{"a_href": "./Products/P8CH3.html","img_href": ".././image/products/img.png","print_type": "普印力P8CH3"},{"a_href": "./Products/P8CH6.html","img_href": ".././image/products/img.png","print_type": "普印力P8CH6"},{"a_href": "./Products/P8CH8.html","img_href": ".././image/products/img.png","print_type": "普印力P8CH8"}, {"a_href": "./Products/P8PH3.html","img_href": ".././image/products/img.png","print_type": "普印力P8PH3"}, {"a_href": "./Products/P8PH6.html","img_href": ".././image/products/img.png","print_type": "普印力P8PH6"}, {"a_href": "./Products/P8ZH3.html","img_href": ".././image/products/img.png","print_type": "普印力P8ZH3"}]}]


参考: 通过ajax展示本地json数据,为什么显示跨域

如何将json数据渲染到页面上

本文发布于:2024-01-28 13:33:57,感谢您对本站的认可!

本文链接:https://www.4u4v.net/it/17064200427772.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:页面
留言与评论(共有 0 条评论)
   
验证码:

Copyright ©2019-2022 Comsenz Inc.Powered by ©

网站地图1 网站地图2 网站地图3 网站地图4 网站地图5 网站地图6 网站地图7 网站地图8 网站地图9 网站地图10 网站地图11 网站地图12 网站地图13 网站地图14 网站地图15 网站地图16 网站地图17 网站地图18 网站地图19 网站地图20 网站地图21 网站地图22/a> 网站地图23