动态添加“<input onclick=“‘+json+‘“>“元素传参时不识别json的bug问题解决

2023-11-10

问题描述:

var json = {a:1};
在html中使用js方法动态添加

"<input οnclick="functiona(\''+json+\'')">"

元素时不识别json数据

问题分析:

json在传参时,json为json格式的数据,传入后调用onclick方法只会显示未识别.

var json2 = JSON.stringify(json);

将json2传入后调用会在遇到json2数据中的第一个双引号后戛然而止,因为动态添加的方法在传入json2字符串数据后会有双引号{“a”:1},会与

"<input οnclick="functiona(\''+json+\'')">"

中出现的双引号产生冲突

问题解决:

将json数据string化后再将双引号全部转化为\'反斜杠单引号再进行动态添加元素

var data2 = JSON.stringify(json).replace(/\"/g,"\\\'");
"<input οnclick="functiona(\''+json+\'')">"

导入的结果可以正常读取

function functiona(data){
	//将反斜杠去掉再将单引号变成双引号
	var list = data.replace(/\\/g,"").replace(/\'/g,"\"");
	//将list转化为json格式的数据
	var data2 = {"ids": id,"list":[JSON.parse(list)]};
	//如果data2需要提交给后台的话需要将data2转换为string化的数据
	//注意使用data2.toString()的结果为"[object Object]"
	//只能使用JSON.stringify(data2)进行转string化
	//ajax中的 dataType: "json",contentType: 'application/json;charset=UTF-8',
	//springboot后台接收要加@RequestBody接收像这种Vo类型的数据,不加@RequestBody会报错
}

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

动态添加“<input onclick=“‘+json+‘“>“元素传参时不识别json的bug问题解决 的相关文章

  • java中删除字符串中的特殊字符?

    如何删除字符串中除 之外的特殊字符 现在我用 replaceAll w s 它删除了所有特殊字符 但我想保留 谁能告诉我我该怎么办 Use replaceAll w s 我所做的是将下划线和连字符添加到正则表达式中 我添加了一个 连字符之前
  • HDFS:使用 Java / Scala API 移动多个文件

    我需要使用 Java Scala 程序移动 HDFS 中对应于给定正则表达式的多个文件 例如 我必须移动所有名称为 xml从文件夹a到文件夹b 使用 shell 命令我可以使用以下命令 bin hdfs dfs mv a xml b 我可以
  • 使用 :hover 作为元素的内联样式(使用 HTML/CSS/php)[重复]

    这个问题在这里已经有答案了 可能的重复 如何将 a hover 规则嵌入到文档中间的样式属性中 https stackoverflow com questions 131653 how do i embed an ahover rule i
  • Java 页面爬行和解析之 Crawler4j 与 Jsoup

    我想获取页面的内容并提取其中的特定部分 据我所知 此类任务至少有两种解决方案 爬虫4j https github com yasserg crawler4j and Jsoup http jsoup org 它们都能够检索页面的内容并提取其
  • OnClick 事件中的 finish() 如何工作?

    我有一个Activity一键退出Activity 通过layout xml我必须设置OnClick事件至cmd exit调用 this finish 效果很好 public void cmd exit View editLayout thi
  • Prim 的迷宫生成算法:获取相邻单元格

    我基于 Prim 算法编写了一个迷宫生成器程序 该算法是 Prim 算法的随机版本 从充满墙壁的网格开始 选择一个单元格 将其标记为迷宫的一部分 将单元格的墙壁添加到墙壁列表中 While there are walls in the li
  • 迁移到 java 17 后有关“每个进程的内存映射”和 JVM 崩溃的 GC 警告

    我们正在将 java 8 应用程序迁移到 java 17 并将 GC 从G1GC to ZGC 我们的应用程序作为容器运行 这两个基础映像之间的唯一区别是 java 的版本 例如对于 java 17 版本 FROM ubuntu 20 04
  • 在具有相同属性名称的不同数据类型上使用 ModelMapper

    我有两节课说Animal AnimalDto我想用ModelMapper将 Entity 转换为 DTO 反之亦然 但是对于具有相似名称的一些属性 这些类应该具有不同的数据类型 我该如何实现这一目标 动物 java public class
  • 如何将文件透明地传输到浏览器?

    受控环境 IE8 IIS 7 ColdFusion 当从 IE 发出指向媒体文件 例如 mp3 mpeg 等 的 GET 请求时 浏览器将启动关联的应用程序 Window Media Player 我猜测 IIS 提供文件的方式允许应用程序
  • 从 android 简单上传到 S3

    我在网上搜索了从 android 上传简单文件到 s3 的方法 但找不到任何有效的方法 我认为这是因为缺乏具体步骤 1 https mobile awsblog com post Tx1V588RKX5XPQB TransferManage
  • Outlook 2013 渲染问题:嵌套表格截断相邻文本

    在开发 html 电子邮件通讯时 我经常使用类似于以下的结构 table width 244 border 0 cellpadding 0 cellspacing 0 tr td table border 0 align left tbod
  • 如何为 TBODY 应用垂直滚动条

    我的表中有 4 列和 5 行数据 我必须为 TBODY 应用垂直滚动条 TH 标题内容不应滚动 我对场景进行了编码 并且在我将滚动类应用于 TBODY 之前它工作正常 一旦我将滚动样式类应用于 TBODY 它就会破坏之前的对齐方式 任何人都
  • org.jdesktop.application 包不存在

    几天以来我一直在构建一个 Java 桌面应用程序 一切都很顺利 但是今天 当我打开Netbeans并编译文件时 出现以下编译错误 Compiling 9 source files to C Documents and Settings Ad
  • Android JNI C 简单追加函数

    我想制作一个简单的函数 返回两个字符串的值 基本上 java public native String getAppendedString String name c jstring Java com example hellojni He
  • 如何测试 spring-security-oauth2 资源服务器安全性?

    随着 Spring Security 4 的发布改进了对测试的支持 http docs spring io spring security site docs 4 0 x reference htmlsingle test我想更新我当前的
  • 水平对齐输入字段

    我正在尝试获取一个输入字段 并且它与同一水平线上的关联提交按钮相关 但事实证明这是一个挑战 这是我的代码
  • AngularJS 在指令运行之前通过 AJAX 检索数据

    我正在使用 AngularUIuiMap http angular ui github com directives map实例化谷歌地图的指令 uiMap 指令非常适合处理硬编码数据 mapOptions and myMarkers 但是
  • KeyPressed 和 KeyTyped 混淆[重复]

    这个问题在这里已经有答案了 我搜索过之间的区别KeyPressedand KeyTyped事件 但我仍然不清楚 我发现的一件事是 Keypressed 比 KeyTyped 首先被触发 请澄清一下这些事件何时被准确触发 哪个适合用于哪个目的
  • 用javascript调用外部网页(跨域)

    我正在尝试使用以下网络服务来验证提要这个问题 https stackoverflow com questions 11996430 check if a url is a valid feed 但浏览器不允许我向另一台服务器发送 ajax
  • Jackson 将单个项目反序列化到列表中

    我正在尝试使用一项服务 该服务为我提供了一个带有数组字段的实体 id 23233 items name item 1 name item 2 但是 当数组包含单个项目时 将返回该项目本身 而不是包含一个元素的数组 id 43567 item

随机推荐

  • 生成csv

    package com study csv import java io File import java io FileNotFoundException import java io FileOutputStream import ja
  • python 行转列与气泡图,echarts玫瑰图画图

    原数据 stack data stack to frame head 10 unstack data pd read excel Users bella Desktop 考研 xlsx dropna data data set index
  • 经典坐标变换案例代码剖析

    题目 设有小萝卜一号和小萝卜二号位于世界坐标系中 记世界坐标系为W 小萝卜们的坐标系为R1和 R2 小萝卜一号的位姿为q2 0 35 0 2 0 3 0 1 T t1 0 3 0 1 0 1 T 小萝卜二号的位姿为q2 0 5 0 4 0
  • 镜像下载网站(全网最全)

    几家企业提供的镜像站 阿里云开源镜像 http mirrors aliyun com 搜狐开源镜像 http mirrors sohu com 网易开源镜像 http mirrors 163 com LUPA http mirror lup
  • Vue的详细教程--基础语法【上】

    Welcome Huihui s Code World 接下来看看由辉辉所写的关于Vue的相关操作吧 目录 Welcome Huihui s Code World 一 插值 1 文本 2 html 3 属性 class绑定 style绑定
  • 西门子200SMART(四) 程序块

    程序块是显示当前项目包含的程序列表 一般初始状态共有三个 主程序 子程序和中断程序 如下图 当然 鼠标右键选择某一个程序块 可以重命名 支持中文 然而一个项目中 只能有一个主程序 也必须有一个主程序 所以主程序是无法删除的 在初始状态下 想
  • 用pm2在本地部署服务器node项目,全栈实用技能,pm2部署node应用到服务器

    好东西就要拿来分享 不管你的目标是前端还是全栈 都值得一看 背景介绍 一般的 我们开发一个前端项目通常是在本地通过Node js搭一个服务器 所有的开发测试过程基本上都是在本地搞定 有时候 我们需要把我们的作品上线 好让更多的人能够访问到
  • 某网站hexin-v的解决方法,hexin-v的解密方法,hexin-v的生成方法

    前段时间做的项目 一直运行比较稳定 最近几天运行过程中异常退出 结果发现是某网站接口有变 使用谷歌chrome 对原网站进行调试 结果发现某个js页面有变化 以原有的hexin v生成方法 已经不能适用于最新的算法 本想偷偷懒从网络上找一下
  • Map和Set

    Map和Set是集合中的两个接口 Set实现了Collection接口 而Map没有实现 Map下面又有很多子类 我们主要研究HashMap和TreeMap Set同样有很多子类 主要研究HashSet和TreeSet 在理解掌握它们之前
  • FTP命令使用实例

    ftp命令是标准的文件传输协议的用户接口 ftp是在TCP IP网络上的计算机之间传输文件的简单有效的方法 它允许用户传输ASCII文件和二进制文件 在ftp会话过程中 用户可以通过使用ftp客户程序连接到另一台计算机上 从此 用户可以在目
  • LR.net敏捷软件开发平台核心功能详解

    软件开发 程序员就是不断地跟变量 方法 类 接口这些东西打交道 随着开发经验的积累 很多程序员会发现 虽然最终开发出来的软件每个都不一样 但是在开发过程中用到的很多东西却又是相通的 例如 每个软件的底层差不多都需要进行增删改查 文件操作 权
  • State 模式

    有限状态机 FSM Finite state machine 例子 1 若状态机在Locked状态收到了一个coin事件 则迁移到Unlocked状态并执行unlock动作 2 若状态机在UnLocked状态收到了一个pass事件 则迁移到
  • 基于Spark MLlib平台的协同过滤算法---电影推荐系统

    说到推荐系统 大家可能立马会想到协同过滤算法 本文基于Spark MLlib平台实现一个向用户推荐电影的简单应用 其中 主要包括三部分内容 协同过滤算法概述 基于模型的协同过滤应用 电影推荐 实时推荐架构分析 一 协同过滤算法概述 本人对算
  • npm安装Electron解决方案

    npm安装Electron解决方案 Electron使用npm安装时 因为是国外的镜像源 所以速度会非常慢 而使用cnpm如下命令进行安装时 又会出现安装失败的问题 npm install electron g execute post i
  • 第一阶段-第四章 Python的循环语句

    目录 前言 1 循环语句的运行方式 2 为什么要学习循环语句 3 本章的安排 一 while循环的基础语法 1 学习目标 2 while循环语句 3 本节的演示 4 while循环的注意点 5 本小节的总结 6 课后练习 二 while循环
  • 【JavaEE初阶】第三节.多线程基础篇

    作者简介 大家好 我是未央 博客首页 未央 303 系列专栏 JavaEE初阶 每日一句 人的一生 可以有所作为的时机只有一次 那就是现在 目录 文章目录 前言 一 认识线程 二 多线程程序 2 1 第一个Java多线程程序 2 2 怎么样
  • 6.1 什么是面向对象以及类和对象的区别

    什么是面向对象 面向对象 面向对象编程的简称 Object Oriented Programming OOP 是一种对现实世界理解和抽象的方法 是计算机编程技术发展到一定阶段后的产物 早期的计算机编程是面向过程的 典型的代表是 C 语言 解
  • Redis数据类型及编码格式——Hash篇

    写在前面 以下的知识都是建立在目前线上稳定版6 2 6版本的 而目前github上的redis源代码又更新优化了许多 譬如 hash数据类型默认的编码格式已经被替换为listpack hashtable数据结构也被重新优化 哈希表对象dic
  • python/matlibplot绘制多条曲线图

    这里我利用的是matplotlib pyplot plot的工具来绘制折线图 这里先给出一个段代码和结果图 coding UTF 8 import numpy as np import matplotlib as mpl import ma
  • 动态添加“<input onclick=“‘+json+‘“>“元素传参时不识别json的bug问题解决

    问题描述 var json a 1 在html中使用js方法动态添加