首页 > 其他分享 >js 时间数组如何url传参 和接收参数

js 时间数组如何url传参 和接收参数

时间:2024-03-06 17:33:24浏览次数:13  
标签:传参 url js URL JSON 参数 数组 字符串 let

在JavaScript中,如果你想通过URL传递一个时间数组,你需要先将数组转换成字符串格式,因为URL参数只能传输字符串。有多种方式可以实现这个转换,例如使用JSON.stringify()将数组转换成JSON字符串。

下面是一个示例,展示了如何将时间数组转换成URL参数,并在另一个页面接收这些参数:

发送时间数组
假设你有一个时间数组:

let timeArray = ["2023-01-01", "2023-02-02", "2023-03-03"];

你可以将这个数组转换成JSON字符串,并添加到URL的查询参数中:

// 转换数组为JSON字符串  
let timesJson = JSON.stringify(timeArray);  
  
// 假设当前页面的URL是https://example.com/page1  
let url = 'https://example.com/page2?times=' + encodeURIComponent(timesJson);  
  
// 跳转到新页面,并带上参数  
window.location.href = url;

这里使用了encodeURIComponent()函数来确保JSON字符串中的特殊字符被正确编码,以便能在URL中安全传输。

接收时间数组
在接收参数的页面(例如https://example.com/page2),你可以从URL中提取参数,并解析回数组:

// 获取URL中的参数  
let urlParams = new URLSearchParams(window.location.search);  
  
// 获取时间参数的JSON字符串  
let timesJson = urlParams.get('times');  
  
// 解析JSON字符串为数组  
let timeArray = JSON.parse(decodeURIComponent(timesJson));  
  
console.log(timeArray); // 输出: ["2023-01-01", "2023-02-02", "2023-03-03"]

这里使用了URLSearchParams对象来解析URL中的查询参数,并使用decodeURIComponent()来解码之前编码过的JSON字符串。最后,使用JSON.parse()将字符串转换回数组。

请注意,如果时间数组中包含的对象更复杂(例如,每个时间对象包含日期和时间),你可能需要更复杂的序列化和反序列化逻辑来处理这些对象。此外,如果时间数组很大,将其放入URL可能会导致URL变得非常长,这可能会影响性能或受到浏览器对URL长度的限制。在这种情况下,考虑使用其他方法,如POST请求来发送数据。

 

标签:传参,url,js,URL,JSON,参数,数组,字符串,let
From: https://www.cnblogs.com/kpengfang/p/18057106

相关文章

  • React jsx 语法解析 & 转换原理
    jsx介绍jsx是一种JavaScript的语法扩展(eXtension),也在很多地方称之为JavaScriptXML,因为看起就是一段XML语法,用于描述UI界面,并且可以和JavaScript代码结合使用。比起vue中的模板语法,更加灵活,且不需要学习模板语法中的特定标签,比如:v-if、v-for、v-bind等,而是直接使用JavaScript语......
  • three.js简单实践
    1.引入yarnaddthree2.vue页面引入 <divid="container"></div>import*asTHREEfrom'three'import{OrbitControls}from'three/examples/jsm/controls/OrbitControls.js'import{createMultiMaterialObject}from&......
  • Three.js_解决谍影闪烁重影模型的方法
    renderer=newTHREE.WebGLRenderer({antialias:true,logarithmicDepthBuffer:true,});logarithmicDepthBuffer,官方解释:是否使用对数深度缓存。如果要在单个场景中处理巨大的比例差异,就有必要使用,默认是false。使用了会带来额外的开销,但是效果会变好.原因......
  • 2024-03-06 Module '"@nestjs/platform-express"' has no exported member 'Expr
    问题描述:nestjs后端开发,遇到跨域问题,打算用express来配合处理,结果引入express的一个模块失败。app.modules.tsimport{MiddlewareConsumer,Module,NestModule}from'@nestjs/common';import{AppController}from'./app.controller';import{AppService}from'.......
  • 2024-03-06 NestJs学习日志之跨域
    新建一个跨域中间件(如:cors.middleware.ts),并把它导入到项目根目录的app.modules.ts里面使用。中间件代码如下:import{Injectable,NestMiddleware}from"@nestjs/common";@Injectable()//跨域中间件exportclassCorsMiddlewareimplementsNestMiddleware{use(r......
  • php发送curl请求
    收藏地址https://blog.csdn.net/lmp5023/article/details/102585153get请求//初始化$curl=curl_init();//设置抓取的urlcurl_setopt($curl,CURLOPT_URL,'http://www.baidu.com');//设置头文件的信息作为数据流输出curl_setopt($curl,CURLOPT_HEADER,1);//设......
  • c++中nlohmann json的基本使用教程
    摘自:https://www.jb51.net/article/261677.htm 一.json.hpp库下载及安装1.1开源地址及引入方法nlohmannjson的开源项目地址,其中有对json使用方法的详细说明:https://github.com/nlohmann/json#serialization–deserialization对于我们项目中要使用nlohmannjson工具,只......
  • 2024-03-05 NestJs学习日志之新建nest项目,运行启动命令nest start报错:Could not find
    如题,低级错误。具体报错:CouldnotfindTypeScriptconfigurationfile"tsconfig.json".Please,ensurethatyouarerunningthiscommandintheappropriatedirectory(insideNestworkspace)找不到TypeScript配置文件“tsconfig.json”。请确保您在适当的目录(Nest工作......
  • NewtonJson
    Newtonsoft.Json.xml<membername="M:Newtonsoft.Json.JsonConvert.SerializeObject(System.Object)"><summary>SerializesthespecifiedobjecttoaJSONstring.</summary><param......
  • JS字符串、数组 常用方法
    字符串字符串增:1、+拼接2、concat()例:leta='hello'  letb=a.concat('word')  console.log(b) // "helloworld" 字符串删:1、slice(star,end)  从原始字符串中提取一个子字符串,并返回一个新的字符串,而不改变原字符串。start(必需):起始位置。如果是正数,则......