vue前端使用富文本时提交表单报json解析错误

最新推荐文章于 2024-04-26 16:47:03 发布
最新推荐文章于 2024-04-26 16:47:03 发布
阅读量1.8k 收藏 1
点赞数
文章标签： vue.js json 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TheShield/article/details/131003932
版权

这个例子的富文本中包含了文本、视频、图片，由于出现'\'的原因导致在提交时出现如下错误：

JSON parse error: 
Unexpected character ('\' (code 92)): was expecting comma to separate Object entries; nested exception is com.fasterxml.jackson.core.JsonParseException: 
Unexpected character ('\' (code 92)): was expecting comma to separate Object entries

解决方法：

在提交之前，对表单中的富文本字段进行采用

encodeURIComponent()方法进行处理，处理掉参数中的`\`
但是这种方法在回显时，需要对数据进行
decodeURIComponent()处理

可能还有其他方式能够解决，希望前端大佬指正告知。

TheShield
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue富文本框自定义上传编辑图片, 监听鼠标指针上传
12-08
是一个自由度很高的富文本, 可以基于一个页面多个富文本不串门, 任意上传图片
vue使用百度富文本（可直接直接使用）
10-30
vue使用百度富文本（可直接直接使用）
记录:JSON parse error: Unexpected character (‘a‘ (code 97))...【解决方案】
**My Coding Family**
05-30 3402
记录:JSON parse error: Unexpected character ('a' (code 97))...【解决方案】
[已解决]HttpMessageNotReadableException: JSON parse error: Unexpected character:解析JSON时出现异常的问题分析与解决方案
猫头虎：授渔优于赠鱼，兴趣引领智慧，探索之乐尤显珍贵。商务合作：Libin9iOak，共赴知识与乐趣的探索之旅！
07-20 1万+
在本篇博客中，我们讨论了在Spring框架应用程序中解析JSON时出现的异常，并分析了异常信息及其原因。为了解决这个问题，我们提供了相应的解决方案，并介绍了如何避免类似问题的措施。同时，我们强烈建议升级至IDEA 2023或更新版本，以确保应用程序能够正确处理JSON数据，并避免类似的解析异常。通过遵循良好的JSON数据生成和验证实践，以及使用可靠的JSON库，您可以提升开发效率和代码质量，避免潜在的编码问题。另外，使用Postman的美化功能也可以帮助您在调试和测试阶段更轻松地处理JSON数据。
若依微服务版本JSON.parse: unexpected character错误排查
ARUNNE的博客
01-09 609
，若依这里是采用在配置文件当中填写具体信息的方式，来配置是否启用xss，是否是白名单，是否是匹配链接。按照后台填写的数据处理请求，如果是不启用或者是该请求为白名单，就直接将请求放过如果不通过就交给XssFilter来处理。若依框架在网关采用配置拦截器的方式来处理XSS攻击，一旦请求被过滤器拦截，就会转入到自定义的拦截器XssFilter当中，首先解决的就是判断是否启用XSS拦截器和是否需要拦截(在网关配置Xss过滤白名单接口。
vue集成百度UEditor富文本编辑器使用教程
10-17
主要为大家详细介绍了vue集成百度UEditor富文本编辑器的使用教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JSON.stringify()之转义符(反斜杠)解决办法
热门推荐
zmx1358228852的博客
06-01 3万+
JSON.stringify（）出现转义符无法发送请求到后端的解决方法 话不多说，直接上报错代码。 16:10:43.326 [http-nio-8888-exec-23] ERROR com.platform.utils.RRExceptionHandler - JSON parse error: Unexpected character ('\' (code 92)): was expecting comma to separate Object entries; nested exception is
“JSON parse error: Unexpected character (‘\“‘ (code 34)): was expecting comma to separate Object ent
weixin_43997319的博客
03-09 1万+
报错"JSON parse error: Unexpected character ('\"' (code 34)): was expecting comma to separate Object entries; nested exception is com.fasterxml.jackson.core.JsonParseExc 只需要看这个'\"'，代表换行符报错，缺少换行分隔符的含义 JSON parse error: Unexpected end-of-input: expected cl
使用JSON.parse()出现的一些SyntaxError异常报错问题
notbaldness的博客
06-15 4156
1、用法：用于将已序列化的json字符串解析成js的值或对象，这一过去称为反序列化，但是在使用的时候有时候会出现SyntaxError(语法)的错误，这是因为有些数据不能被反序列化。reviver：可以传入一个函数，在解析出来之前可以对解析过程中对数据进行处理。常见报错的内容有：""(空字符串)，undefined，一些不符合规范的json字符串，等等。参数：text：要解析的js值或json字符串（json字符串需满足json规范）json规范比较多，一个一个判断太麻烦，
vue富文本编辑器插入图片提交报错问题
Khan的博客
02-07 727
富文本编辑器
java json数据转换 Unexpected character (‘，‘ (code 65292 / 0xff0c))
weixin_44496919的博客
07-01 1710
今天实现json转换相应的功能时遇到了这样一个错误 was expecting comma to separate Object entries 刚开始还以为 没有用UTF-8 无BOM格式编码 最后试了试不行 才发现把英文逗号打成中文的了 写json数据的时候一定要细心啊 ...
vue quill editor 使用富文本添加上传音频功能
10-15
vue-quill-editor 是vue项目中常用的富文本插件，其功能能满足大部分的项目需求。这篇文章主要介绍了vue-quill-editor 富文本添加上传音频功能,需要的朋友可以参考下
vue-tinymce 富文本编辑器自定义图片上传
11-24
vue-tinymce 封装了el-upload 控件，支持富文本编辑器自定义图片上传整合。 复制到vue的src/components文件夹下 详情博文介绍见：https://xingyun.blog.csdn.net/article/details/102492921
Vue3使用富文本框tinymce
06-21
tinymce的静态文件，包括样式以及js等
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 435
步骤很详细，直接上教程……
vue echarts 柱状图 堆叠柱状图
Z18834071903的博客
04-26 231
vue echarts 柱状图 堆叠柱状图
vue 实现级联选择器功能
清音的博客
04-22 539
数组包含了级联选择器的数据源，其中每个对象表示一个选项，包括。组件来实现级联选择器功能,下面是一个示例代码，演示如何使用。组件初始化级联选择器，并设置默认值为单位。对象用于指定数据结构中的属性名，以便。上，可以在初始化时选中指定的值。使用 Element UI 的。中设置初始选中值为单位。组件正确地解析数据。
vue-manage-system 更新，后台管理系统开发更简单
林鑫
04-22 431
近期进行了一次版本升级，主要是支持了更多功能、升级依赖版本和优化样式，并且上线了网站，大部分功能都有文档或者使用示例，更加适合新手上手开发，只需要根据实际业务简单修改，就可以完成产品需求。
vue+element 树形结构 改成懒加载模式(原理element有),这里只做个人理解笔记
xu_duo_i的博客
04-25 299
vue+element 树形结构 改成懒加载模式(原理element有),这里只做个人理解笔记
分别使用vue、vuex实现表单提交json数据
06-07
好的，我可以为您解答这个问题。 首先，使用Vue实现表单提交JSON数据的步骤如下： 1. 在Vue组件中，使用v-model指令绑定表单输入框的值，例如： ```html <template> <div> <input type="text" v-model="form.name" /> <input type="text" v-model="form.email" /> <button @click="submitForm">提交</button> </div> </template> <script> export default { data() { return { form: { name: '', email: '', }, }; }, methods: { submitForm() { // 将表单数据转为JSON格式 const formData = JSON.stringify(this.form); // 将JSON数据提交到后端 // ... }, }, }; </script> ``` 2. 在submitForm方法中，将表单数据转为JSON格式，然后将JSON数据提交到后端。 接下来，使用Vuex实现表单提交JSON数据的步骤如下： 1. 在Vuex store中定义一个表单数据状态，例如： ```js // store.js export default new Vuex.Store({ state: { formData: { name: '', email: '', }, }, mutations: { updateFormData(state, formData) { state.formData = formData; }, }, actions: { submitForm({ state }) { // 将表单数据转为JSON格式 const formData = JSON.stringify(state.formData); // 将JSON数据提交到后端 // ... }, }, }); ``` 2. 在表单组件中，使用mapState和mapMutations将表单数据状态映射到组件中，并使用mapActions将submitForm方法映射到组件中，例如： ```html <template> <div> <input type="text" v-model="formData.name" /> <input type="text" v-model="formData.email" /> <button @click="submitForm">提交</button> </div> </template> <script> import { mapState, mapMutations, mapActions } from 'vuex'; export default { computed: { ...mapState({ formData: state => state.formData, }), }, methods: { ...mapMutations({ updateFormData: 'updateFormData', }), ...mapActions({ submitForm: 'submitForm', }), }, }; </script> ``` 3. 在表单输入框中，使用v-model指令绑定formData中对应字段的值，并在输入框值改变时，调用updateFormData方法更新formData状态，例如： ```html <input type="text" v-model="formData.name" @input="updateFormData({ name: $event.target.value })" /> <input type="text" v-model="formData.email" @input="updateFormData({ email: $event.target.value })" /> ``` 这样，当用户点击提交按钮时，会触发submitForm方法将表单数据转为JSON格式并提交到后端。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值