JavaScript中onclick事件传递数组参数时接收的是[object,object],需要转为字符串传递

 问题描述

在JavaScript中定义button的onclick点击事件,传递参数的时候,某个参数是数组,在方法体里面接收到的值是[object,object]。

一开始在网上找解决办法,使用JSON.stringify(arr)传递数组参数,还是不行,出现解析失败问题。

直到看到下面这篇博文的时候解决了问题:

js中onclick事件中传入object对象参数,将object对象转成字符串_js click传递object-CSDN博客

var data = {"report_file_name":"128_20180601152433_Report_gl5lmm.pdf",
"downCount":27,
"userCount":45,
"role_id":1,
"report_id":1
};
var dom = '<li οnclick=‘'+
+'"readPdf(' + JSON.stringify(data).replace(/"/g, '&quot;')+')">';原文链接:https://blog.csdn.net/lanfwq/article/details/80570530

解决办法

使用JSON.stringify(arr).replace(/"/g, '&quot;')传递数组参数,示例:
我传递了两个参数给点击事件方法modifyFunc,第一个参数是字符串,第二个参数是数组。

let str= 'tabTest';
let arr= [];//数组,这里用空数组代指,比如从后台返回的List
let html = '<button onclick="modifyFunc(\''+str+'\', '+JSON.stringify(arr).replace(/"/g,'&quot;')+')">修改</button>';
$("#dsDiv")..append(html);
function modifyFunc(str, arr) {var arr= arr; //这里的arr是字符串数组,而不是[object,object]......
}

问题分析

将数组参数转换为JSON字符串是一个很好的做法,这样可以确保数组中的数据以正确的格式传递给函数。然而,如果你在转换过程中遇到问题,可能是因为字符串中的某些特殊字符没有被正确解析处理。

使用replace(/"/g, '&quot;')是一个很好的解决方案,它可以将双引号(")替换为转义的双引号(&quot;),这样可以确保字符串在传递时不会被错误地解析。

如果你在函数中接收的arr参数仍然是数组,那么你可能需要使用JSON.parse()将字符串转换回数组。例如:

function modifyFunc(str, arr) { var arr= JSON.parse(arr); // 然后你可以像平常一样使用arr数组 
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/649627.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Ubuntu20.04配置grub ,不必每次都输入 nomodeset

一、查看原来的grub配置&#xff1a; grep menuentry /boot/grub/grub.cfg 重点注意以下类似的核心版本号 gnulinux-5.15.0-92-generic-advanced-86a86651-8070-4338-92ee-8a1a13a98a05 gnulinux-5.15.0-67-generic-advanced-86a86651-8070-4338-92ee-8a1a13a98a05 …

首发:2024全球DAO组织发展研究

作者&#xff0c;张群&#xff08;专注DAO及区块链应用研究&#xff0c;赛联区块链教育首席讲师&#xff0c;工信部赛迪特邀资深专家&#xff0c;CSDN认证业界专家&#xff0c;微软认证专家&#xff0c;多家企业区块链产品顾问&#xff09; DAO&#xff08;去中心化自治组织&am…

03-Redis缓存高可用集群

文章目录 1、Redis集群方案比较2、Redis高可用集群搭建redis集群搭建Java操作redis集群 4、Redis集群原理分析槽位定位算法跳转重定位Redis集群节点间的通信机制gossip通信的10000端口网络抖动 Redis集群选举原理分析集群脑裂数据丢失问题集群是否完整才能对外提供服务Redis集群…

LC 2846. 边权重均等查询

2846. 边权重均等查询 难度&#xff1a; 困难 题目大意&#xff1a; 现有一棵由 n 个节点组成的无向树&#xff0c;节点按从 0 到 n - 1 编号。给你一个整数 n 和一个长度为 n - 1 的二维整数数组 edges &#xff0c;其中 edges[i] [ui, vi, wi] 表示树中存在一条位于节点 …

Android studio环境搭建过程异常

异常1 e: file:///D:/project/AndroidProject/settings.gradle.kts:5:21: Unexpected tokens (use ; to separate expressions on the same line) dependencyResolutionManagement {repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)repositories { // …

6JS对象

对象简介 对象是JavaScript的基本数据类型。对象是一种复合值&#xff1a;它将很多值&#xff08;原始值或者其他对象&#xff09;聚合在一起&#xff0c;可通过名字访问这些值。对象也可看做是属性的无序集合&#xff0c;每个属性都是一个名/值对。属性名是字符串&#xff0c…

Java 基础 - Java抽象类的使用示例

引言 在面向对象编程中,抽象类是一种重要的概念,它提供了一种用于建模共性和规范子类的方式。本文将通过一个简单的Java示例来介绍抽象类的基本使用,以及抽象类与具体类的关系。 抽象类的定义 在示例中,我们定义了一个抽象类 Shape,它包含了一个抽象方法 calculateArea…

第16章_网络编程(网络通信要素,TCP与UDP协议,网络编程API,TCP网络编程,UDP网络编程,URL编程)

文章目录 第16章_网络编程本章专题与脉络1. 网络编程概述1.1 软件架构1.2 网络基础 2. 网络通信要素2.1 如何实现网络中的主机互相通信2.2 通信要素一&#xff1a;IP地址和域名2.2.1 IP地址2.2.2 域名 2.3 通信要素二&#xff1a;端口号2.4 通信要素三&#xff1a;网络通信协议…

BLIP-2: 基于冻结图像编码器和大型语言模型的语言-图像预训练引导

BLIP-2: 基于冻结图像编码器和大型语言模型的语言-图像预训练引导 项目地址BLIP-2的背景与意义BLIP-2的安装与演示BLIP-2模型库图像到文本生成示例特征提取示例图像-文本匹配示例性能评估与训练引用BLIP-2Hugging Face集成 在语言-图像预训练领域&#xff0c;BLIP-2的出现标志着…

提高多旋翼无人机的悬停控制精度

要提高多旋翼无人机的悬停控制精度&#xff0c;可以从以下几个方面进行优化&#xff1a; 优化传感器配置&#xff1a;选用高精度的传感器&#xff0c;如激光雷达、红外传感器等&#xff0c;可以提供更准确的姿态和位置信息。同时&#xff0c;对传感器进行定期标定和校准&#…

利用SPI,结合数据库连接池durid进行数据服务架构灵活设计

接着上一篇文章业务开始围绕原始凭证展开,而展开的基础无疑是围绕着科目展开的。首先我们业务层面以财政部的小企业会计准则的一级科目引入软件中。下面我们来考虑如何将科目切入软件更加灵活,方便业务扩展、维护与升级。 SPI是首先想到的数据服务方式 为什么会想到它呢?首…

深度学习分类问题之Logistic Regression

逻辑回归模型&#xff0c;虽然名字是回归&#xff0c;但是是解决分类问题。 在线性回归里面&#xff0c;我们根据有效信息&#xff0c;预测下一个由已知信息得到的数值&#xff0c;叫做回归问题&#xff0c;但是在机器学习里面&#xff0c;常见的是分类问题。最常见的就是MNIS…

React16源码: React中commitAllHostEffects内部的commitDeletion的源码实现

commitDeletion 1 &#xff09;概述 在 react commit 阶段的 commitRoot 第二个while循环中调用了 commitAllHostEffects&#xff0c;这个函数不仅仅处理了新增节点&#xff0c;更新节点最后一个操作&#xff0c;就是删除节点&#xff0c;就需要调用 commitDeletion&#xff0…

《动手学深度学习(PyTorch版)》笔记4.5

注&#xff1a;书中对代码的讲解并不详细&#xff0c;本文对很多细节做了详细注释。另外&#xff0c;书上的源代码是在Jupyter Notebook上运行的&#xff0c;较为分散&#xff0c;本文将代码集中起来&#xff0c;并加以完善&#xff0c;全部用vscode在python 3.9.18下测试通过。…

掌握可视化大屏:提升数据分析和决策能力的关键(下)

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

(大众金融)SQL server面试题(3)-客户已用额度总和

今天&#xff0c;面试了一家公司&#xff0c;什么也不说先来三道面试题做做&#xff0c;第三题。 那么&#xff0c;我们就开始做题吧&#xff0c;谁叫我们是打工人呢。 题目是这样的&#xff1a; DEALER_INFO经销商授信协议号码经销商名称经销商证件号注册地址员工人数信息维…

three.js 鼠标选中模型弹出标签

效果&#xff1a;请关注抖音 代码&#xff1a; <template><div><el-container><el-main><div class"box-card-left"><div id"threejs" style"border: 1px solid red;position: relative;"></div><…

202410读书笔记|《半小时漫画青春期》——成为自己世界的星星,这才是最要紧的事儿

202410读书笔记|《半小时漫画青春期&#xff1a;心理篇》——成为自己世界的星星&#xff0c;这才是最要紧的事儿 一、一到考试就焦虑&#xff0c;怎么办&#xff1f;二、以前情绪挺淡定&#xff0c;现在咋动不动就爆发&#xff1f;三、追星那么开心&#xff0c;为啥还要我小心…

ajax点击搜索返回所需数据

html 中body设置&#xff08;css设置跟进自身需求&#xff09; <p idsearch_head>学生信息查询表</p> <div id"div_1"> <div class"search_div"> <div class"search_div_item"> …

数据库设计的一些原则

文章目录 数据库设计原则表之间的关系一对一关系&#xff08;了解&#xff09;一对多&#xff08;多对一&#xff09;多对多联合主键和复合主键 数据库设计准则-范式1、函数依赖2、完全函数依赖3、部分函数依赖4、传递函数依赖5、码 第一范式第二范式第三范式第三范式 数据库设…