页面之间url传值,传循环数据里的值成功传值成功接收(动态数据传值)

qianfeng 发布于2019-08-22 18:22 / 1937人阅读

摘要：参考页面之间传参方式集合实现思想涉及知识点效果图及实现的代码贴重点传值的页面实战传参接收的页面实战详情页代码实战传参商品页手机型号这个手机的系统是供应商手机特色卖的手机类型实战详情页定义一个函数里面放置方法从服务器拿数据回本地还是

参考

js页面之间传参方式集合

实现思想:window.location 涉及知识点:escape(),unescape(),split() 效果图及实现的代码(贴重点):

传值的页面(实战传参.html):

接收的页面(实战详情页1.html):

代码

//实战传参.html




    
        
        
    

    

        商品页
        
        
        
            
                
                    手机型号: {{ item.desc }}
                    这个手机的系统是: {{ item.ua }}
                    供应商:{{item.expect.vendor}}
                    手机特色卖的:{{item.expect.model}}
                    手机类型:{{item.expect.type}}

//实战详情页1.html

如何接收?

通过window.location.seach接收

传的参数key是desc, value是:

//data.json

[{
        "desc": "Asus Nexus 7",
        "ua": "Mozilla/5.0 (Linux; Android 4.4.2; Nexus 7 Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1700.99 Safari/537.36",
        "expect": {
            "vendor": "Asus",
            "model": "Nexus 7",
            "type": "tablet"
        }
    },
    {
        "desc": "Asus Padfone",
        "ua": "Mozilla/5.0 (Linux; Android 4.1.1; PadFone 2 Build/JRO03L) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.117 Safari/537.36",
        "expect": {
            "vendor": "Asus",
            "model": "PadFone",
            "type": "tablet"
        }
    },
    {
        "desc": "Desktop (IE11 with Tablet string)",
        "ua": "Mozilla/5.0 (Windows NT 6.3; WOW64; Trident/7.0; .NET4.0E; .NET4.0C; .NET CLR 3.5.30729; .NET CLR 2.0.50727; .NET CLR 3.0.30729; Tablet PC 2.0; GWX:MANAGED; rv:11.0) like Gecko",
        "expect": {
            "vendor": "undefined",
            "model": "undefined",
            "type": "undefined"
        }
    },
    {
        "desc": "HTC Evo Shift 4G",
        "ua": "Mozilla/5.0 (Linux; U; Android 2.3.4; en-us; Sprint APA7373KT Build/GRJ22) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0",
        "expect": {
            "vendor": "HTC",
            "model": "Evo Shift 4G",
            "type": "mobile"
        }
    },
    {
        "desc": "HTC Nexus 9",
        "ua": "Mozilla/5.0 (Linux; Android 5.0; Nexus 9 Build/LRX21R) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.143 Mobile Crosswalk/7.36.154.13 Safari/537.36",
        "expect": {
            "vendor": "HTC",
            "model": "Nexus 9",
            "type": "tablet"
        }
    },
    {
        "desc": "Huawei Honor",
        "ua": "Mozilla/5.0 (Linux; U; Android 2.3; xx-xx; U8860 Build/HuaweiU8860) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1",
        "expect": {
            "vendor": "Huawei",
            "model": "U8860",
            "type": "mobile"
        }
    }
]

GPU服务器云服务器页面之间传值 java日期传值问题 java中文传值乱码 jsp页面传值

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95788.html

微信小程序学习与wepy框架的使用详解

摘要：，至此咱们的微信小程序的简单使用及了解算是分享完了，毕竟个人也是道行有限，没有钻研太深，这些只是本人在实际项目开发过程中用到和总结的经验，有太多不足或不对的地方，希望大家多多给予指出与改正，咱们一起来共同学习与进步微信小程序是一种不需要下载安装即可使用的应用，在国内它在企业推广中的受欢迎度以及就这两年的使用及普及热度，然而就是因为它的备受欢迎度以及越来越被企业所重视，也就形成了咱们开...

sf190404 2019-08-29 16:09 评论0 收藏0
微信小程序学习与wepy框架的使用详解

摘要：，至此咱们的微信小程序的简单使用及了解算是分享完了，毕竟个人也是道行有限，没有钻研太深，这些只是本人在实际项目开发过程中用到和总结的经验，有太多不足或不对的地方，希望大家多多给予指出与改正，咱们一起来共同学习与进步微信小程序是一种不需要下载安装即可使用的应用，在国内它在企业推广中的受欢迎度以及就这两年的使用及普及热度，然而就是因为它的备受欢迎度以及越来越被企业所重视，也就形成了咱们开...

stormjun 2019-08-23 10:24 评论0 收藏0
微信小程序学习与wepy框架的使用详解

摘要：，至此咱们的微信小程序的简单使用及了解算是分享完了，毕竟个人也是道行有限，没有钻研太深，这些只是本人在实际项目开发过程中用到和总结的经验，有太多不足或不对的地方，希望大家多多给予指出与改正，咱们一起来共同学习与进步微信小程序是一种不需要下载安装即可使用的应用，在国内它在企业推广中的受欢迎度以及就这两年的使用及普及热度，然而就是因为它的备受欢迎度以及越来越被企业所重视，也就形成了咱们开...

xiao7cn 2019-08-02 11:02 评论0 收藏0
VUE知识点集锦

摘要：载入前后在阶段，实例的和都初始化了，但还是挂载之前为虚拟的节点，还未替换。类似于，不同在于提交的是，而不是直接变更状态可以包含任意异步操作。 vue基础 1、 router 路由与 a 标签的区别：https://www.jianshu.com/p/34b...2、 VUE双向绑定的原理：答：VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个...

Tecode 2019-08-23 16:02 评论0 收藏0
VUE知识点集锦

摘要：载入前后在阶段，实例的和都初始化了，但还是挂载之前为虚拟的节点，还未替换。类似于，不同在于提交的是，而不是直接变更状态可以包含任意异步操作。 vue基础 1、 router 路由与 a 标签的区别：https://www.jianshu.com/p/34b...2、 VUE双向绑定的原理：答：VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个...

APICloud 2019-08-02 14:34 评论0 收藏0