遇到的问题是: 前台利用Ajax, get方式向后台发送中文数据出现乱码.

解决办法是前台两次编码, 后台一次解码即可.

前台jsp文件

1 var text = "张三";
3 var username = encodeURI(encodeURI(text));

后台servlet代码

 String username =URLDecoder.decode("对应字段","utf-8");

简单登录校验案例.

案例说明:为验证Ajax请求后端控制台中文乱码问题是否解决.

简单登录界面, 用户输入用户名登录. 若用户名未输入用户名则提示"用户名不能为空";若用户名输入为"张三"则提示用户名已被占用.其它均无提示.

前台页面index.jsp

 <%--
Created by IntelliJ IDEA.
User: hejjon
Date: 2019/6/3
Time: 10:19
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<html>
<head>
<base href="<%=basePath%>">
<title>用户登录界面</title>
<script type="text/javascript">
var xhr;
function change() { var val = document.getElementById("uname").value;
var uname = encodeURI(encodeURI(val)); if (uname === "") {
document.getElementById("namespan").innerHTML = "用户名不能为空";
} else {
// 创建xhr对象
xhr = new XMLHttpRequest();
// 与服务器建立连接
xhr.open("get", "servlet/login?uname=" + uname, true);
// 执行回调函数
xhr.onreadystatechange = process;
// 发送数据
xhr.send(null);
} } function process() {
if (xhr.readyState == 4 && xhr.status == 200) {
// 接收后台响应
var text = xhr.responseText;
document.getElementById("namespan").innerHTML = text;
}
}
</script>
</head>
<body>
<p>
用户: <input type="text" name="uname" id="uname" onblur="change()"/><span id="namespan"></span>
</p>
<p>
密码: <input type="password" name="pwd" id="pwd"/>
</p>
</body>
</html>

后台LoginServlet.java

 import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.net.URLDecoder; @WebServlet("/servlet/login")
public class LoginServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 设置后台响应文本格式
resp.setContentType("text/html;charset=utf-8");
// 接收前台请求
String uname = URLDecoder.decode(req.getParameter("uname")); // System.out.println(uname); PrintWriter out = resp.getWriter();
if ("张三".equals(uname)) {
out.print("用户名已被占用");
} else {
out.print("用户名可用");
}
}
}

解决Ajax前台中文传到后台出现中文乱码的更多相关文章

  1. 解决Spring boot中读取属性配置文件出现中文乱码的问题

    问题描述: 在配置文件application.properties中写了 server.port=8081 server.servlet.context-path=/boy name=张三 age=2 ...

  2. 如何解决jQuery easyui中locale文件下easyui-lang-zh_CN中文乱码问题

    1.在保存eclipse项目的目录下找到引入easyui-lang-zh_CN.js 2.用记事本打开该js文件,若打开后的中文正常,直接复制,粘贴到项目中的该js文件中,保存 3.若打开后中文出现乱 ...

  3. resin后台输出中文乱码的解决办法!

    resin后台输出中文乱码的解决办法! 学习了:https://blog.csdn.net/kobeguang/article/details/34116429 编辑conf/resin.con文件: ...

  4. 解决ubuntu中zip解压的中文乱码问题

    转自解决ubuntu中zip解压的中文乱码问题 在我的ubuntu12.10中,发现显示中文基本都是正常的,只有在解压windows传过来的zip文件时,才会出现乱码.所以,我用另一个方法解决中文乱码 ...

  5. resin后台输出中文乱码的解决的方法!

    近期从tomcat移植到resin,发现这东西不错啊! 仅仅是后台输出时有时候中文会乱码. 如今找到resin后台输出中文乱码的解决的方法: 编辑conf/resin.con文件: <!--ja ...

  6. python基础系列教程——Python中的编码问题,中文乱码问题

    python基础系列教程——Python中的编码问题,中文乱码问题 如果不声明编码,则中文会报错,即使是注释也会报错. # -*- coding: UTF-8 -*- 或者 #coding=utf-8 ...

  7. iOS 中json解析数据出现中文乱码的问题

    一般服务器的编码格式都是UTF8,这样通过json解析下来的的数据,一般中文是不会出现乱码,但是如果服务器的编码格式不是UTF8,通过json解析的数据中的中文容易出现luan乱码,怎么解决这个问题呢 ...

  8. 解决 Ubuntu 下 gedit编辑器打开文件出现中文乱码问题

    解决 Ubuntu 中 gedit编辑器打开文件出现中文乱码问题 1. 问题分析 在 windows 系统下,.txt 文件默认编码方式为 gb18030 格式的中文编码,而 gedit 默认的编码方 ...

  9. 解决在Linux下安装Oracle时的中文乱码问题

    本帖最后由 TsengYia 于 2012-2-22 17:06 编辑 解决在Linux下安装Oracle时的中文乱码问题 操作系统:Red Hat Enterprise Linux 6.1数据库:O ...

随机推荐

  1. Guava Cache 参数配置说明

    系统中用到了了Guava Cache: private DriverInfoServiceImpl(DriverClientProxy driverClientProxy) { this.driver ...

  2. gradle/gradle plugin/Android studio关系

    gradle - 构建工具,存储于Users/stono/.gradle/wrapper/dists Adroid Studio- IDE Gradle plugin - 在AS中使用Gradle的插 ...

  3. python mysql数据库压力测试

    python mysql数据库压力测试 pymysql 的执行时间对比 1,装饰器,计算插入1000条数据需要的时间 def timer(func): def decor(*args): start_ ...

  4. 使用ES6删除对象中某些属性

    const form = { id: '011', name: '测试一', description: '测试demo' } // 目标: 取到删除description属性的对象, 即下文的data ...

  5. Gradle 教程: 教你配置全局国内仓库,解决新建项目卡顿,下载构建慢等问题

    想必各位从Maven 转过来的大佬们,对于maven中配置国内仓库的方法还记忆深刻.通过/用户目录下/.m2/settings.xml 局部配置或者修改全局配置.不过没有接触过maven 也不要紧,可 ...

  6. 012 webpack中的router

    一:准备工作 1.App.vue <template> <div> <h1>这是 App 组件</h1> </div> </templ ...

  7. kotlin基础 尾递归

    尾调用的重要性在于它可以不在调用栈上面添加一个新的堆栈帧——而是更新它,如同迭代一般. 尾递归因而具有两个特征: 调用自身函数(Self-called): 计算仅占用常量栈空间(Stack Space ...

  8. python开发笔记-Python3.7+Django2.2 Docker镜像搭建

    目标镜像环境介绍: 操作系统:ubuntu16.04 python版本:python 3.7.4 django版本:2.2 操作步骤: 1.  本地安装docker环境(略)2. 拉取ubunut指定 ...

  9. 使用python脚本批量设置nginx站点的rewrite规则

    一般情况下,配置rewrite重写规则使用shell脚本即可: 把url拼凑成1,2文件中中的格式,运行 chongxie.sh 即可生成我们需要的rewrite规则 [root@web01:/opt ...

  10. Python3基础 from...import...as 解决局部导入时的函数名重复问题

             Python : 3.7.3          OS : Ubuntu 18.04.2 LTS         IDE : pycharm-community-2019.1.3    ...