参考

js页面之间传参方式集合

实现思想:window.location

涉及知识点:escape(),unescape(),split()

效果图及实现的代码(贴重点):

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

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

代码

//实战传参.html

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><h1>商品页</h1><hr /><div id="app"><div v-for="item in myData" @click="cctz(item.desc)"><p>手机型号: {{ item.desc }}</p><p>这个手机的系统是: {{ item.ua }}</p><p>供应商:{{item.expect.vendor}}</p><p>手机特色卖的:{{item.expect.model}}</p><p>手机类型:{{item.expect.type}}</p><hr /></div></div><script src="vue.min.js" type="text/javascript" charset="utf-8"></script><script src="jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">new Vue({el: '#app',data: {msg: 'hsaljfl',myData: '',url: '实战详情页1.html?'},methods: {getData() { //定义一个函数getData() , 里面放置$ajax方法let self = this;//从服务器拿数据回本地$.ajax({type: "GET", //GET还是POST,不是必须url: "data.json",// dataType: "json",//要求服务端返回的数据类型,不是必须//async: true,//同步还是异步,不是必须success: function(data) {console.log(data);//将拿到的数据赋值给vue实例的数据里的变量self.myData = data;}});},cctz (canshu) { //canshu是形参,在实际调用里实参是cctz(item.desc)里的item.desc// escape将字符串转化成编码格式,接收页面倒是后再转回来var url = '实战详情页1.html?' + 'desc=' + escape(canshu);window.open(url);}},created: function() { //vue的生命周期函数 , 里面执行函数getData()this.getData();}})</script></body></html>

//实战详情页1.html

<html><head><meta charset="UTF-8"><title></title></head><body><p>如何接收?</p><p>通过window.location.seach接收</p><div id="div1"></div><p>传的参数key是desc, value是:</p><h2 id='desc'></h2><script type="text/javascript">var url=location.search,obj={};if(url.indexOf("?")!=-1){var str = url.substr(1)strs= str.split("&");for(var i=0;i<strs.length;i++){obj[strs[i].split("=")[0]]=unescape(strs[ i].split("=")[1]);}}console.log(obj.desc);document.getElementById('desc').innerHTML = obj.desc;</script></body></html>

//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"}}
]

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

  1. 页面之间跳转传参数不使用cookie和url的方法,sessionStorage,localStorage

    页面之间跳转传参数不使用cookie和url的方法,sessionStorage,localStorage 刚步入工作不久的小白,最近在做一个传感器网站项目的时候是用cookie存取数据,因为网站面向 ...

  2. pandas使用replace函数替换dataframe中的值：replace函数对dataframe中指定数据列的值进行替换、替换具体数据列的相关值

    pandas使用replace函数替换dataframe中的值:replace函数对dataframe中指定数据列的值进行替换.替换具体数据列的相关值 目录

  3. 联邦学习【分布式机器学习技术】【①各客户端从服务器下载全局模型；②各客户端训练本地数据得到本地模型；③各客户端上传本地模型到中心服务器；④中心服务器接收各方数据后进行加权聚合操作，得全局模型】

    随着计算机算力的提升,机器学习作为海量数据的分析处理技术,已经广泛服务于人类社会. 然而,机器学习技术的发展过程中面临两大挑战: 一是数据安全难以得到保障,隐私数据泄露问题亟待解决: 二是网络安全隔离 ...

  4. 上海临港新片区：新建数据中心CPUE值≤1.25 正建国际互联网数据专用通道

    近日,上海自贸区临港新片区表示,经工信部批准,正在建设国际互联网的数据专用通道. 在12月28日的上海市政府新闻发布会上,临港新片区管委会专职副主任武伟接受记者提问时表示,临港新片区在跨境数据方面进行 ...

  5. 前端页面之间url传参

    function getUrlParam(name){var reg = new RegExp("(^|&)" + name + "=([^&]*)(&a ...

  6. 在两个页面之间互相写其控件内的值

    定义A页面,定义TextBox id="TextBox1"和Button id="Button1" 后台代码: private void Page_Load(o ...

  7. eChats折线图更新数据不自然，要闪一下，动态数据解决

    使用eCharts动态更新数据功能的时候,更新时动画会不自然,原因不知道,不过通过设置series值的方式就可以解决 chartRow.data.forEach((item) => {// ch ...

  8. python爬虫爬网站数据登录_使用webdriver+urllib爬取网页数据(模拟登陆，过验证码)...

    urilib是python的标准库,当我们使用Python爬取网页数据时,往往用的是urllib模块,通过调用urllib模块的urlopen(url)方法返回网页对象,并使用read()方法获得ur ...

  9. 使用动态数据进行数据分页

    目录 介绍 动态数据 数据分页 填充数据源 页面切换 结论 下载资料库 介绍 如果您有一个大的数据集合,那么用集合中的所有数据填充项目控件就变得不切实际,更不用说用户不友好了.最好的方法是对数据进行分 ...

最新文章

  1. 为你解读7大类深度CNN架构创新综述（附论文）
  2. 前端基础知识 - 收藏集 - 掘金
  3. NuGet的本地服务器安装与Package的发布（呕吐）
  4. 用内存流 文件流 资源生成客户端(Delphi开源)
  5. 计算机知识竞赛主持人开场词,护理竞赛主持人台词:主持人开场白台词
  6. c语言中 数组 左移,如何将一个数组的元素循环左移？
  7. 常见的爬虫分析库（1）-Python3中Urllib库基本使用
  8. python查找指定文件夹并重命名_python获取指定文件夹下的所有文件名，并删选指定类型文件进行重命名以及撤销重命名...
  9. java声明代码是什么_java安全编码指南之:声明和初始化说明
  10. PHP printf()函数格式化使用详解
  11. 剑指offer(C++)-JZ24：反转链表(数据结构-链表)
  12. Java之添加环境变量
  13. Brocade博科光纤交换机之 常用命令
  14. ps考证电脑怎么改卷
  15. c++算法解决力扣跳步问题
  16. 数据库基础学习-计划内容 For 小样儿
  17. 指挥调度中心大屏幕用液晶拼接屏还是DLP大屏？
  18. C++ DISALLOW_COPY_AND_ASSIGN宏的作用
  19. 每个架构师都应该了解的理论：康威定律
  20. Algorithms and Data Structures I

热门文章

  1. 麦克纳姆轮运动原理_【带字幕视频】麦克纳姆轮你了解多少？ESP32的WIFI信号，居然能覆盖10公里？...
  2. thymeleaf 使用页面报错_异常处理-SpringBoot中thymeleaf对应前台页面大于号\小于号使用问题...
  3. 电大在线计算机考试,最新电大《计算机》考试题.doc
  4. php如何word转html格式文件,PHP将上传word文件，转化为Html格式，(多种转换方式)
  5. linux卸载kodi,如何在Ubuntu上安装Kodi 18 Beta
  6. Paddle内置的网络模型
  7. 基于ESP32的竞赛裁判系统功能调试-硬件修改建议
  8. LED，硅光电池的光能-电能转换是可逆的吗？
  9. ULC2003达林顿管阵列STC8K28驱动电路模块
  10. mysql实例和数据的安全_数据库安全--案例篇