利用js传递对象

最新推荐文章于 2021-08-01 09:33:51 发布
最新推荐文章于 2021-08-01 09:33:51 发布
阅读量9.7k 收藏 1
点赞数
CC 4.0 BY-SA版权
文章标签： function object action 报表 list
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ykdsg/article/details/3889916
本文介绍了一种使用JavaScript将页面上的多个字段整理为对象列表的方法，并将其传递给后端进行处理的技术。此外，还详细解释了如何在后端将接收到的对象列表转化为DTO对象，以便进一步的数据操作。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 如果页面上有很多字段要传递到后台action，可能数据是零散的，直接通过get和post传递就很麻烦。这时可以通过js拼装成对象或对象列表。

 

 

出入后台后将是一个object List需要将object转成相应的dto，dto中字段的定义要与js方法中MaterialSub定义的一致

ykdsg
关注
js方法function中传递的参数是对象
wanlchen的博客
06-10 4844
首先js中的参数不能是对象，所以要把对象转成json字符串才能传。 第一种情况，传递的对象是js的var对象，那么使用JSON.stringify()可以转换成json字符串，使用JSON.parse()可以重新转换成对象。 第二种情况，在jsp之类的页面上要调用js的function方法，参数是对象，对象是用el表达式表示的。简单的解决方法是不传对象。 比如要传递的对象是 class Student{ String name; int age; } js方法 funct...
JavaScript中的对象和参数传递
Spike的博客
08-20 246
1.前言 最近写了个微信小游戏，于是学习了一下JavaScript，作为一门动态语言，对于习惯C++和C#这样的静态语言的我，JavaScript有很多让人非常不舒服的地方，比如定义一个对象的成员变量： C++/C#： class myclass{ int memeber; } 而在JavaScript里： function myclass(){         this.name...
浅析 Javascript 对象传递
逍湘子
11-29 511
在Js中基本数据类型(也叫原始数据类型：String, Boolean, Number, null, underfined, Symbol(es6新增))都是传值，而非原始类型（也叫引用类型：Object, Array, Function）都是引用类型，传递的都是对象的引用 ：Reference. Pass by Reference Object in JavaScript passes by...
js 方法传递对象参数
易的博客
01-07 5819
js 方法传递对象参数 2017年12月06日 16:35:39 qq_26676207 阅读数：7696  版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.youkuaiyun.com/qq_26676207/article/details/78732117 第一步：   //通过JSON.stringify()方法 将对象转换成json字符串 v...
js对象引用传递
weixin_33757609的博客
06-24 213
今天写接口测试demo，发现js值引用问题 js 普通变量为值传递 js 对象为为引用传递 var a = 123; undefined var b=a; undefined a 123 b 123 b =234 234 a 123 a = 456 456 b 234 var o = {name:'lxb',age:21} undefin...
js 对象的值传递
weixin_30580341的博客
12-18 197
一、变量赋值的不同 1、原始值 在将一个保存着原始值的变量复制给另一个变量时，会将原始值的副本赋值给新变量，此后这两个变量是完全独立的。 2、引用值： 在将一个保存着对象内存地址的变量复制给另一个变量时，会把这个内存地址赋值给新变量， 也就是说这两个变量都指向了堆内存中的同一个对象，他们中任何一个作出的改变都会反映在另一个身上。 二、参数传递的不同 首先我们应该明确...
javascript setTimeout()传递函数参数(包括传递对象参数)
12-07
在给定的示例中，作者遇到的问题是如何在`setTimeout`中传递对象参数。常规的做法是直接传递函数名和参数，但这在需要传递对象时会变得复杂。作者尝试了一种方法，将函数和参数用字符串拼接，如`setTimeout("fun(" +...
spring mvc利用ajax向controller传递对象的方法示例
08-29
【Spring MVC 利用Ajax向Controller传递对象】在开发Web应用时，经常需要在前端与后端之间交换数据。Spring MVC框架提供了多种方式来处理这种交互，尤其是通过Ajax进行异步通信时。本文将深入探讨如何使用Ajax向...
JS函数动态传递参数的方法分析【基于arguments对象】
12-12
js函数体内可以通过arguments对象来接收传递进来的参数，利用这一对象属性可以动态传参。 function box() { return arguments[0]+' | '+arguments[1]; //得到每次参数的值 } alert(box(1,2,3,4,5,6)); //...
jquery对象和javascript对象即DOM对象相互转换
12-09
如果你已经有一个DOM对象，你可以通过将它传递给jQuery函数来转换成jQuery对象。例如： ```javascript var v = document.getElementById("v"); // DOM对象 var $v = $(v); // 转换为jQuery对象 ``` 现在，你...
window.top[_CACHE]实现多个jsp页面共享一个js对象
10-25
然而，当涉及到在同一浏览器窗口内的不同JSP页面（如框架或者弹出窗口）之间共享JavaScript对象时，我们可以利用`window.top`对象及其属性来达到目的。本文将详细讲解如何利用`window.top[_CACHE]`来实现多个JSP页面...
JS基础之传参（值传递、对象传递）
maogugu0319的博客
05-06 1550
一、概念 　　我们需了解什么是按值传递(call by value)，什么是按引用传递(call by reference)。在计算机科学里，这个部分叫求值策略(Evaluation Strategy)。它决定变量之间、函数调用时实参和形参之间值是如何传递的。 按值传递 VS. 按引用传递 　　按值传递(call by value)是最常用的求值策略：函数的形参是被调用时所传实参的副本。...
java中模拟js中方法传递对象
yilu_beiyu的博客
08-01 365
import com.google.gson.Gson; /** * js方法中传递对象，是在方法中每次都是一个新的对象 * java方法中传递list，是所有的方法都是同一个list */ public class JavaJSTest { /** * 并不是k-v对 * 而是，第一个值，第二个值 */ private class Pair { // public Object key; // public Object.
js传递对象
晓剑
09-10 5975
方法一：
关于js中funtion传递对象剖析
Tiger_hulei的博客
03-26 415
需求：在js中需要将某个对象作为入参传递 应用场景：动态编辑表格中某条数据或者跳转其他页面需要获取表格中某行的数据 活不多说，直接上代码 function formatProc(value,row,index){ comrow = row; procStr ="<a href='javascript:(0)' onclick='work_showObj...
js中传递对象的键名的方法
hjh15827475896的博客
10-12 993
起因，我们在小程序中经常会设置或更改 data 中的变量 （我这里只考虑每次只修改一个变量的情况） 代码是这样写的 this.setData({ currentIndex:e.detail.currentIndex }) 基本上每个方法中都有改变变量的值 这个代码要三行，看着不爽，于是我就想在 app.js中定义一个公用的函数 因为每个页面上都有 app=getApp(...
对于JavaScript中对象参数的传递方式的浅析
非動ご博客
06-27 978
本文章主要是想探索一下JavaScript中，对象类型的参数的传递方式 背景: 按值传递(call by value)是最常用的求值策略：函数的形参是被调用时所传实参的副本。修改形参的值并不会影响实参。 按引用传递(call by reference)时，函数的形参接收实参的隐式引用，而不再是副本。这意味着函数形参的值如果被修改，实参也会被修改。同时两者指向相同的值。 let ...
javascrip将对象转换成json字符串
littlehow的专栏
07-13 1248
将javascript对象转换成json字符串，扩展了Object的方法。 资源下载地址： http://download.youkuaiyun.com/detail/w172087242/9575125 下面是代码： /** * 对js对象的json序列化 * @author littlehow * @time 2016/7/13 11:49 */ var littlehow =
js中对象参数的传递
yihanzhi的博客
03-28 5492
js中对象参数传递都是按值传递，当参数为对象时，传递的是对象指针，函数中改变对象参数的值时，会影响函数外的该对象。但为对象参数重新赋值时，相当于改变了其指针指向，将其指向了其它内存地址，故自然不会影响函数外的同名对象。 示例1：函数内改变对象参数的值，会影响到函数外该对象 var person = { name: "Lucy" } function fn(obj){ obj.name = "Lilei" } fn(person); console.log(person.name); // 输
利用params怎么传递对象
最新发布
05-30
<think>好的，我现在需要帮助用户解决如何在Vue Router中使用params传递对象或数组的问题。用户之前已经询问过关于query传递对象的情况，现在转向params的情况。我需要结合之前的回答和用户提供的引用内容来给出正确的指导。首先，根据引用[1]和[2]，使用params传参需要配合路由的name属性，并且需要在路由配置中定义参数。例如，路径需要类似'/second/:id/:name'。但这里用户想传递的是对象或数组，而不是简单的字符串参数。直接传递对象可能有问题，因为params本身处理的是路径参数，通常用于简单类型。接着，引用[3]和[4]提到使用JSON.stringify和JSON.parse来处理对象和数组的传递，这在query参数中是有效的。但params是否也能这样处理呢？根据Vue Router的文档，params参数在传递时如果是动态路由参数，会被编码到URL中，但如果是未在路由中定义的参数，刷新页面后这些参数会丢失，这和引用[4]中的问题类似。因此，可能需要将对象转换为字符串，并通过路由的动态段来传递。用户的问题是如何用params传递对象或数组。可能的解决方案是：将对象或数组通过JSON.stringify转换为字符串，然后在路由配置中添加一个动态参数，比如path: '/target/:data'，传递时将这个字符串作为params的参数，接收时解析。需要考虑的是，params参数如果不在路由路径中定义，刷新页面会丢失数据，这点和query不同。因此，必须将参数包含在路由路径中，否则会有问题。例如，在路由配置中定义动态字段来接收这个字符串化的参数。然后，在传递时，将对象转换为JSON字符串，并作为params的一个参数传递，同时确保路由配置中有对应的参数占位符。接收时，使用JSON.parse解析该参数。需要注意特殊字符的问题，可能需要使用encodeURIComponent和decodeURIComponent来处理，避免URL中出现非法字符导致解析失败。同时，参数长度限制也是一个问题，过长的URL可能被浏览器截断。 另外，用户之前的问题中提到过使用query传递时的处理方式，现在需要对比params和query的不同，特别是在传递对象时的处理步骤。例如，params需要预先定义路由参数，而query不需要，但都需要序列化和反序列化。最后，需要给出具体的步骤，包括路由配置、传递参数的方法、接收时的解析方法，以及注意事项，如刷新后的参数保留、长度限制、特殊字符处理等。同时，生成相关问题，帮助用户进一步了解相关知识点。</think>### 使用`params`传递对象/数组参数的方法 #### 核心原理 Vue Router的**`params`参数支持复杂数据类型传递**，但需要满足两个条件： 1. 路由配置中必须声明动态参数占位符 2. 传递对象/数组时必须使用`JSON.stringify()`序列化[^2][^4] --- ### 具体实现步骤 #### 1. 路由配置 ```javascript // router.js { path: '/target/:data', // 动态参数占位符 name: 'TargetPage', component: () => import('./views/TargetPage.vue') } ``` #### 2. 传递对象/数组 ```javascript // 传递对象 this.$router.push({ name: 'TargetPage', // 必须使用name导航 params: { data: JSON.stringify({ name: 'Anna', skills: ['Vue', 'React'] }) } }); // 传递数组（同理） this.$router.push({ name: 'TargetPage', params: { data: JSON.stringify([1, 2, 3]) } }); ``` #### 3. 接收参数 ```javascript // 目标组件中（Vue3示例） import { useRoute } from 'vue-router'; export default { setup() { const route = useRoute(); const receivedData = JSON.parse(route.params.data); console.log(receivedData); // 完整对象/数组 } } ``` --- ### 关键注意事项 1. **路由配置限制**： - 必须预先定义动态参数（如`:data`） - 未声明的参数在页面刷新后会丢失[^4] 2. **特殊字符处理**： ```javascript // 传递时编码特殊字符 params: { data: encodeURIComponent(JSON.stringify(obj)) } // 接收时解码 JSON.parse(decodeURIComponent(route.params.data)) ``` 3. **数据类型验证**： ```javascript try { const data = JSON.parse(route.params.data); if(!Array.isArray(data) && typeof data !== 'object') { throw new Error('Invalid data type'); } } catch(e) { console.error('参数解析错误', e); } ``` 4. **参数长度限制**： - 建议单个参数值不超过2000字符 - 复杂数据建议使用Vuex或sessionStorage --- ### 对比`params`与`query`传参 | 特性 | params | query | |--------------------|--------------------------|---------------------------| | URL显示 | 路径参数（更美观） | URL查询参数（可见） | | 刷新保留 | 需声明动态路由 | 自动保留 | | 数据类型支持 | 需要手动序列化 | 需要手动序列化 | | 参数长度限制 | 受URL总长度限制 | 同params | | 路由配置要求 | 必须预先声明参数 | 无需特殊配置 | ---
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值