springmvc,通过ajax方式提交页面数据,后台返回json数据中文信息乱码

本人刚开始接触springmvc,项目搭建参照https://my.oschina.net/gaussik/blog/385697。在用IDEA写登录注册的时候,想通过ajax方式提交数据到后台,然后遇到如题所述的乱码问题,然后度娘了好多,终于解决了。废话不多说,直接上代码。

首先是登录页面login.jsp

 1 <%--
 2   Created by IntelliJ IDEA.
 3   User: PENG027
 4   Date: 2016/11/11
 5   Time: 15:48
 6   To change this template use File | Settings | File Templates.
 7 --%>
 8 <%@ page contentType="text/html;charset=UTF-8" pageEncoding="utf-8" language="java" %>
 9 <html>
10 <head>
11     <title>index</title>
12     <script type="text/javascript" src="/js/jquery.min.js"></script>
13     <script type="text/javascript">
14         function login() {
15             var name=$("#id1").val();
16             var pwd=$("#id2").val();
17             $.ajax({
18                 url:‘/login‘,
19                 type:‘post‘,
20                 contentType:‘application/json‘,
21                 data:JSON.stringify({‘username‘:name,‘password‘:pwd}),
22                 dataType:‘json‘,
23                 async:false,
24                 success:function (msg) {
25 //                    alert("页面内容改变");
26 //                    $("#p").text(msg.msg);
27                     window.location.href="success.jsp?id="+Math.random();
28                 },
29                 error:function () {
30                     alert("failure");
31                 }
32             });
33         }
34     </script>
35 </head>
36 <body>
37 <form>
38     username:<input id="id1" type="text" name="username"/><br>
39     password:<input id="id2" type="password" name="password"/><br>
40     <input id="id3" type="button" value="登录" onclick="login()"/><br>
41     <%--<p id="p">点击登录之后我会改变</p>--%>
42 </form>
43 </body>
44 </html>

然后是后台Java代码

 1 package controller;
 2
 3 import org.json.JSONException;
 4 import org.json.JSONObject;
 5 import org.springframework.stereotype.Controller;
 6 import org.springframework.ui.Model;
 7 import org.springframework.web.bind.annotation.RequestMapping;
 8 import org.springframework.web.bind.annotation.ResponseBody;
 9
10 @Controller
11 public class MainController {
12     @ResponseBody
13     /*
14     注意了,就是这儿。我之前是这么写的。修改之后记得重启服务器。
15     @RequestMapping("/login")
16      */
17     @RequestMapping(value = "/login", produces = {"text/html;charset=UTF-8;"})
18     public String hello(Model model) {
19         JSONObject jsonObject = new JSONObject();
20         try {
21             jsonObject.put("msg","中文乱码");
22         } catch (JSONException e) {
23             e.printStackTrace();
24         }
25         return jsonObject.toString();
26 //        return "success";
27     }
28 }

修改之后记得重启服务器
修改之后记得重启服务器
修改之后记得重启服务器重要的事说三遍,修改的地方就加上
produces = {"text/html;charset=UTF-8;"}这几个字,但是没有重启服务器,搞了四个小时。


时间: 2024-10-08 09:29:42

springmvc,通过ajax方式提交页面数据,后台返回json数据中文信息乱码的相关文章

用ajax获取后台数据,返回json数据,怎么在前台使用?

用ajax获取后台数据,返回json数据,怎么在前台使用呢? 后台 C# code ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 if (dataType == "SearchCustomer")                 {                     int ID;                     if (Int32.TryParse(CustomerID, out ID))                     {    

AJAX向服务器发送请求并返回json数据

这里想实现的功能大概是这样:类似注册时,用户名已经被注册了的情况.当用户失去焦点的时候利用AJAX发送请求到服务器端,服务器端进行数据库查询,如果有相同的用户名则页面提示用户名已被注册了,不能用,否则就通过注册. 这里用的是Jquery AJAX以及SSH框架,下面是我的实现步骤: 先引入struts-json的jar包 1.注册页面中添加JS方法调用 <span id="tip" style="color:red"></span> <

ajax实现二级联动(服务器端返回json数据)

实现效果为上图 HTML 代码: 1 省份:<select id="province" onchange="getCity();"> 2 <option >请选择--</option> 3 </select> 4 城市:<select id="city"> 5 <option>请选择--</option> 6 </select> xmlHttp.js

如何在Crystal Portlet中正确返回JSON数据给AJAX请求?

当Crystal Portlet中需要采用Ajax请求,并让后台返回Json数据时,如何才能正确.方便的返回Json数据呢? 以下两种方法均可: 方法一:Ajax请求时,采用RenderURL,对应Portlet类中采用ajax(data)方法返回Java对象即可: 方法二:Ajax请求时,采用ResourceURL,对应Portlet类中采用ajax(data,response)方法将Java对象直接输出到Response流中:(推荐使用此方法) 分步指南 方法一: Ajax请求时,url采用

jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表

对于问题从后台获取json数据,将内容填充到下拉列表,代码非常简单,具体过程请看下面代码. 需求:url:链接     par:ID       sel:下拉列表选择器 function BuildSelectBox(url, par, sel) {  $(sel).empty();  $.getJSON(url, { id: par }, function (json, textStatus) {   for (var i = json.length - 1; i >= 0; i--) {  

jquery用ajax方式从后台获取json数据,将内容填充到下拉列表。

从后台获取json数据,将内容填充到下拉列表. url:链接 par:ID sel:下拉列表选择器 //获取下拉列表 function BuildSelectBox(url, par, sel) { $(sel).empty(); $.getJSON(url, { id: par }, function (json, textStatus) { for (var i = json.length - 1; i >= 0; i--) { $(sel).prepend('<option value=

jquery.form.js实现将form提交转为ajax方式提交的使用方法

本文实例讲述了jquery.form.js实现将form提交转为ajax方式提交的方法.分享给大家供大家参考.具体分析如下: 这个框架集合form提交.验证.上传的功能. 这个框架必须和jquery完整版结合,否则使用min则无效. 原理:利用js进行对form进行组装成ajax的url和data,原理还是用ajax来提交,其实这完全可以自己写,但是有这个框架可能会更简单. 一.最简单例子: 第一步:引用js <!--这里的min是自己用js压缩工具对完整版进行的压缩 并不是真正的min,所以好

form表单提交转为ajax方式提交

在做项目的过程中遇到要将form表单提交转为ajax方式提交,下面是我总结的如何把form表单提交无缝转为ajax方式提交的方法. 原先的form表单长这样: <form action="xxx" method="get"> //action的值是请求的url地址 <div class="form-group"> <label for="name">姓名</label> <

Ajax方式提交表单的常见编码类型总结

用Ajax方式提交表单,决定编码类型的是请求头中Content-Type,不同的值对应不同的提交和回调处理方式.而且,在项目中我们会用到前端的库或者框架,他们对于不同的Content-Type也有不同的参数写法,本文将以jQuery和AngularJS,加上XMLHttpRequest共三种方式为例,详细介绍不同Content-Type的发送请求的方式.本文考虑的Content-Type类型,共有如下几种: application/x-www-form-urlencoded multipart/