jquery form表单.serialize()序列化后中文乱码问题原因及解决

简介: jquery form表单.serialize()序列化后中文乱码问题原因及解决

有时候我们需要使用ajax提交去提交form的值,这样就需要使用serialize()去获取form的值,但这样获取的值如果有中文,会乱码,原因和解决方法如下:


原因:.serialize()自动调用了encodeURIComponent方法将数据编码了

解决方法:调用decodeURIComponent(XXX,true);将数据解码


如:

vardata=$('#addf').serialize();
data= decodeURIComponent(data,true);


这是网上的第一种常规做法,但是试了下,并不好用。



使用$(form).serialize()获得表单的所有信息:


我的设置:



1 工程编码,js,jsp,java设置为UTF-8


2 JSP页面编码:

<%@ page language="java" pageEncoding="UTF-8"contentType="text/html; charset=UTF-8"%> <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/>


3 JS中处理


encodeURI(encodeURI(data))  ///注意两次编码!!


4 Java类中处理


response.setCharacterEncoding("UTF-8");    //response.setContentType("text/html;charset=UTF-8"); //用于向页面输送中文字符串java.net.URLDecoder.decode((String)request.getParameter("username"),"UTF-8");

这是网上的第二种常规做法,也是一般的jsp基础编码设置。感觉主要是针对get方式提交表单,而我现在实在spring mvc中使用,要让提交的表单信息直接绑定要对象中。


但是缺出现了中文乱码的问题。


 源码:

$.ajax({
                           url:$("#form").attr("action"),
                            data:$('#form').serialize(),// 要提交的表单
                            dataType:'json',
                            success: function(data) {
                                     if(data){
                                               artDialog.alert(data.message);
                             if(data.succeed == true){
                                      gotoView('<%=path%>/userManage/getlist.do');
                            } 
                                     }  
                            }
                        });


出现乱码的原因是:使用ajax请求,当没有设定请求type时,默认采用的是get请求方式。而get请求方式的乱码处理要采用


(String)request.getParameter("username"),"UTF-8");方式对每个中文进行单独的转码才能避免乱码的问题。



解决方法:


  当使用ajax序列化提交表单时,一定要使用post请求方式提交表单,避免乱码问题。


$.ajax({
                            type: "POST",
                           url:$("#form").attr("action"),
                            data:$('#form').serialize(),// 要提交的表单
                            dataType:'json',
                            success: function(data) {
                                     if(data){
                                               artDialog.alert(data.message);
                             if(data.succeed == true){
                                      gotoView('<%=path%>/userManage/getlist.do');
                            } 
                                     }  
                            }
                        });
目录
相关文章
|
JSON 前端开发 Java
表单数据序列化,后台如何接收(java)
表单数据序列化,后台如何接收(java)
|
2月前
|
移动开发 JSON 数据可视化
精选八款包括可视化CMS,jquery可视化表单,vue可视化拖拉,react可视化源码
精选八款包括可视化CMS,jquery可视化表单,vue可视化拖拉,react可视化源码
60 0
|
3月前
|
存储 JavaScript 前端开发
使用jQuery实现Form表单提交
【9月更文挑战5天】
112 5
|
4月前
|
前端开发 JavaScript Java
SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
关于如何在SpringBoot项目中结合JQuery和Ajax实现表单数据的传输以及单文件或多文件上传的教程。文章提供了完整的前后端示例代码,包括项目的`pom.xml`依赖配置、SpringBoot的启动类`App.java`、静态资源配置`ResourceConfig.java`、配置文件`application.yml`、前端HTML页面(单文件上传和多文件上传加表单内容)以及后端控制器`UserController.java`。文章最后展示了运行结果的截图。
277 0
SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
|
4月前
|
Devops 持续交付 测试技术
JSF遇上DevOps:开发流程将迎巨变?一篇文章带你领略高效协同的魅力!
【8月更文挑战第31天】本文探讨了如何在JavaServer Faces(JSF)开发中融入DevOps文化,通过持续集成与部署、自动化测试、监控与日志记录及反馈机制,提升软件交付速度与质量。文中详细介绍了使用Jenkins进行自动化部署、JUnit与Selenium进行自动化测试、ELK Stack进行日志监控的具体方法,并强调了持续改进的重要性。
44 0
|
7月前
|
安全 JavaScript 数据安全/隐私保护
jQuery会员中心安全修改表单特效
jQuery实现的会员中心安全修改表单特效代码是一款实现了可以修改登录密码,交易密码,手机号码,实名认证,电子邮箱,安全设置表单,会员表单等设置效果的代码
48 4
jQuery会员中心安全修改表单特效
|
JavaScript 前端开发
前端基础 -JQuery之 表单选择器
前端基础 -JQuery之 表单选择器
52 0
|
7月前
|
JavaScript 前端开发 数据格式
2022年11月23日——jQuery——T1(基础选择器与表单选择器)
2022年11月23日——jQuery——T1(基础选择器与表单选择器)
83 0
|
JavaScript 前端开发
前端基础 - JQuery 简单的表单校验器
前端基础 - JQuery 简单的表单校验器
60 0
|
JavaScript 前端开发
Form表单利用Jquery Validate验证以及ajax提交
Form表单利用Jquery Validate验证以及ajax提交
95 0