【前端实现页面总结二】--获取本地json文件中的数据上传到页面【已实现】

最新推荐文章于 2024-04-21 22:15:16 发布

牛小小小婷～

最新推荐文章于 2024-04-21 22:15:16 发布

阅读量891

点赞数 4

分类专栏： # ajax 文章标签：前端 html css json ajax

本文链接：https://blog.csdn.net/hannah2233/article/details/121365747

版权

ajax 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

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

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

请添加图片描述

二、 html文件

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<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="https://cdn.bootcss.com/jquery/2.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数据渲染到页面上

牛小小小婷～

关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【前端实现页面总结二】--获取本地json文件中的数据上传到页面【已实现】

只能使用webstorm打开，问就是不知道！离谱事件好吧，其实我知道原因：跨域问题，一会儿我截屏证明但是webstorm会自动在本地文件前添加localhost网上大多方法我都试过，只有这个最实用，而且完全不影响项目放在线上有其他方法的童鞋萌，也不要忘记分享一下哦！！！嘻嘻PS：本篇博客只能理解，粘代码运行不太行哦，文章末尾的参考博客也很可文章目录一、首先，动图证明“修改json数据之后，刷新页面发生变化”二、 html文件三、 `/json/products.json`文件一、首.
复制链接

扫一扫