js onclick方法 传递json对象报错

最新推荐文章于 2023-03-30 15:37:44 发布
最新推荐文章于 2023-03-30 15:37:44 发布
阅读量5.7k 收藏
点赞数 4
文章标签： js的onclick方法传对象报错 


用拼接字符串的方式构建html，只能拼接字符串，对象是没办法拼接的。
如果row是数字或字符串，则拼接结果为
lookCard(1) 或 lookCard(a)
如果row是对象，则拼接结果为
lookCard([object Object])
这里[object Object]会引起 Uncaught SyntaxError: Unexpected identifier
ps：上面的lookCard(a)也会引起错误，正确方法还要给字符串类型添加引号，即lookCard("a")
解决方法：
（1）将row转换成json，拼接进去，后面在函数里面再转换回来。
（2）拆开row，把row的多个属性逐一作为参数传递给函数。

（3）保存row为全局，传递row的凭证给函数，函数拿着凭证去全局取row对象。


转自：http://zhidao.baidu.com/link?url=4avbcOGmN60J_tSuCUNcHK5TIxfrADkeQfQHjwmT0ih2Xn4vdfCc-2xcO79Pz7dYNgK_fw3gyOGItENpWJYEtUvr5t-4ZmOiIviRvZceT9K
Inuyasha1121
关注
  • 4
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html对象参数传递
踏风追梦
07-20 4316
场景：html里面的onClick函数，在传递参数的时候，如果是简单的字符串，是没问题的；而如果传的是一个对象的时候，大部分都是JSON对象或则数组对象，这个时候会出现一些问题。针对JSON：如果直接传递的话，然后在方法里面获取的时候，会报undefined。 原因分析：在JavaScript里，在接受到JSON对象的时候，会自动转换成对于的js对象；而在html里面，对象的传递必须进行处理，转...
对象作为参数提示[object Object]
dai_yanxia的博客
04-26 3461
坑人的[object Object],有时候为了逻辑处理起来更方便，我们可能需要给某一个函数传一个对象，这样操作可以省去我们的数据遍历，但是每次操作都是报错[obj,obj],吃了几次亏，这次打算找一下原因，不然每次都要为了避免出现这样的错误而改为用其他方式来实现，这不是一个明智的选择。 首先给函数传一个对象作为参数，代码如下： <body> <div class="smal...
html拼接时onclick事件传递json对象
FaxBoy的博客
06-13 1万+
如：想ss('obj')结果变成了ss('[onject object]')这样的情况处理办法 1.先JSON.stringify(json) 2.将双引号变成单引号replace(/\"/g,"'") 3.将括号里的单引号除掉 4.function 直接获取到json对象，且不需要evel 例如： 拼接html部分： btn += ''； 函数部分 function d
js中onclick传json数据所遇到的问题
sjszscx的博客
04-07 2707
写前端时发现当我用onclick传json数据后，发现函数接收数据为[object object]，无法取到值。 页面打印查看，json未传时能正确取值，传值后json为空值。 然后就查找资料详细了解下 [object Object] 是怎么出来的。 js 中 toString 方法的作用是返回一个反映这个对象的字符串，可参考下表： 所以为什么传值后是[object Obje...
javascript对于onclick事件传值不可以直接传对象的解决办法
sky21sjwzk的博客
03-30 1298
我们可以使用内置的json处理函数进行处理 JSON.stringify(obj).replace(/“”/g,“'”),经过这样处理函数接受到就会变成对象进行处理。Js在渲染 Dom 节点的时候，是要用的字符串拼接形式,所以在对于onlcick事件参数，我们应该转化为字符串的形式进行拼接。我们要将传递的参数先转化为一个json的字符串，并且若在需要的时候再吧json字符串用双引号转化为单引号即可。javascript对于onclick事件传值不可以直接传对象的解决办法。
js中onClick([object object])的传参问题
热门推荐
java程序员笔记
12-10 1万+
js中onClick([object object])的传参问题 同事找到一个 js 树形 table 的插件，通过阅读源码，发现该插件实现的主要原理就是对树结构的数据进行遍历，然后字符串拼接 html 标签，最后显示在页面上。对于table肯定是有行操作的，所以我们在拼接按钮代码处添加了一个 run 方法，并且传递了一个对象。但是，当页面加载 dom 元素后，发现 run 方法中的参数居然是 o...
Html —— 在字符串中传递实体显示为[Object， Object]
看了就会暴富的博客！
10-26 1305
问题 在html中一字符串形式进行参数传递，传递一个实体类时应该如何处理？ 解决 使用JSON进行包裹，代码如下。 htmlListStr += " <div class=\"a-b-c fs16\" onclick='func(this, "+JSON.stringify(item)+" )'>" ...
A标签中通过href和onclick传递的this对象实现思路
12-03
解决这个问题的一个方法是保持使用`onclick`事件，但避免使用`href`来执行JavaScript代码。可以将`href`设置为`#`或`javascript:void(0)`来防止页面跳转，同时确保`onclick`事件正常工作。例如： ```html ...
JavaScript onclick事件使用方法详解
11-20
JavaScript中的`onclick`事件是网页交互的核心组成部分，它允许开发者定义当用户点击DOM元素时执行的特定功能。本文将深入探讨`onclick`事件的工作原理、使用方法以及几个实用示例。 `onclick`事件是一个内联事件...
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
11-27
总之，JavaScript提供了强大的能力来增强网页的交互性，通过`onclick`事件和`window.open()`方法，我们可以轻松地实现在页面上点击图片后在新窗口查看图片的功能。这只是一个简单的示例，实际开发中还可以结合其他...
Ajax 传递JSON实例代码
10-20
**Ajax 传递JSON实例代码详解** 在现代Web开发中，Ajax（Asynchronous JavaScript and XML）是一种常见的技术，用于实现页面的局部更新，提高用户体验。尽管其名称中含有XML，但在实际应用中，JSON（JavaScript ...
js修改onclick动作的四种方法(推荐)
11-24
在JavaScript中，修改元素的`onclick`事件处理程序有多种方式，主要分为两种浏览器兼容模式：标准模式（W3C）和旧版IE模式。以下是对四种方法的详细解释： 1. **直接赋值函数表达式** 这是最简单直接的方式，直接...
JS：object.onclick 传值
海天鹰
05-20 381
for (var i = 0; i < 5; i++) { var button = document.createElement('button'); button.textContent = i; button.value = i; button.onclick = function(){ console.log(button.value); }; document.getElementById('nav').appendChild(button); } .
关于onclick="open([Object obj],[Object obj])"的问题
weixin_43735267的博客
11-15 794
这里写自定义目录标题欢迎使用Markdown编辑器 欢迎使用Markdown编辑器 最近做项目的时候，需要在一个js里面进行字符拼接，并给onclick的方法传值，碰到浏览器报Unexpected end of input 这个错误，试了很多方法，在网上也查了一下。 代码如下： ```javascript var prizeMap = giftList.slice(8); giftStr += ...
(问题)调用JS函数，传过去的参数为什么变成了[OBJECT]
awangwu的博客
09-28 8188
--页面元素代码 &lt;tr&gt;&lt;td&gt;&lt;input type="button" name="addElement" onclick="addElement('String','form1','text','string','y','','y')" value="添加String"/&gt;&lt;/td&gt; 这里错了 var _m
js中拼接的html代码中的onclick事件解析错误
守护大白菜的博客
07-25 1万+
js代码: html+=''; html+='课程'; html+='训练营'; web端展示形式: 课程<a class="kc_btn" href="javascript:void(0)" onclick="playv1(" 1","1","1");"="">训练营付费 结果:onclick事件后面多了个  "=""  多余代码
js中onclick传json数据
冲出仁川，走出马德里，故事还会再继续
01-18 1097
js中onclick传json数据 现在要在onclick事件中传递对象参数，由于我们是通过字符串拼接传的，那我们传之前用JSON.stringify(value)先将JSON对象转为JSON字符串，传之后再用eval(value)将JSON字符串转为JSON对象。(当然了，方法很多，这只是其中一种) ...
onclick 如何传递json
最新发布
07-28
在onclick事件中传递JSON对象，可以通过将JSON对象转换为JSON字符串，然后在传递之前使用JSON.stringify(value)方法进行转换。传递后，可以使用eval(value)方法将JSON字符串转换回JSON对象。这是一种常见的方法，但也有其他方法可以实现相同的功能。\[1\] 例如，在JavaScript中，可以使用以下方式传递JSON对象： ``` var json = { "key": "value" }; var jsonString = JSON.stringify(json); var onClickFunction = "myFunction(" + jsonString + ")"; ``` 然后，在HTML中，可以将onClickFunction作为onclick事件的值： ``` <button onclick="eval(onClickFunction)">Click me</button> ``` 在这个例子中，当点击按钮时，myFunction函数将被调用，并且传递的参数将是JSON对象。在函数内部，可以使用传递的参数进行相应的操作。 需要注意的是，使用eval函数可能存在安全风险，因此在实际应用中，最好使用更安全的方法来处理JSON对象的传递。 #### 引用[.reference_title] - *1* [js中onclick传json数据](https://blog.csdn.net/qq_43753724/article/details/112770175)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [Onclick传递JSON对象时候出现的问题](https://blog.csdn.net/weixin_33688840/article/details/93125474)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [js中onclick传json数据所遇到的问题](https://blog.csdn.net/sjszscx/article/details/89066725)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值