不用jsp怎么实现前后端交互？给萌新后端的ajax教程(2)

一、上一篇文章留下的问题

上一篇文章我们讲了一个AJAX请求的写法，还使用AJAX请求进行了前端向后端发送数据、后端向前端发送数据的演示。

但小伙伴还记不记得我们上次把dataType:”json”;这句话注释掉了呢？不妨试试去掉注释符号，看看加上这句话是什么结果。

我们可以发现前端的注释可以顺利传到后端，也打印出了该有的结果，但是前端的弹窗消失了，甚至打开浏览器的控制台也看不到报错信息，但是就是没有弹窗，这是为什么呢？

其实ajax请求不止包含一个success函数，还包含一个error函数。

我们去掉dataType前面的注释符号，然后在ajax请求里面加上一个error函数，并且测试一下弹窗：

function testajax() {

var text=document.getElementById("txt").value;

$.ajax({

url:"test",

contentType:"application/json;charset=UTF-8",

type:"post",

data:JSON.stringify({

"k":"123",

"heihei":text

}),

dataType:"json",

async:true,

success:function(data){

alert(data);

error(data){

alert("进入了error......");

}

});

运行我们的项目，会发现出现了这个弹窗

那么为什么明明没有报错，它却进入了error方法呢？

我们之前讲过，dataType规定的是后端向前端传递的是什么数据，那这是不是说明，我们回传的数据不符合json格式呢？

打开我们的Controller方法，我们发现我们写的返回值是String

原来，在ajax里，基本类型和String是不会被当成json来传递的，只有自定义的对象、List或Map等集合类才会被当成json传递。

我们来修改一下我们的代码：

public @ResponseBody List<String> testAJAX(@RequestBody TestDomain t){

System.out.println(t.getHeihei());

System.out.println(t.getK());

System.out.println(t);

List<String>L=new ArrayList<>();

L.add("ok");

return L;

}

我们修改了什么内容呢？我们把返回值变成了一个List，并且把“ok”这个字符串添加到了List里来返回了，哪怕它只有一个元素，它也是个List

我们来运行一下看看结果：

我们的success函数果然执行了，又出现了熟悉的ok弹窗。

因此如果你想返回一个基本类型的数据，想在success中执行，可以不加dataType。

二、非json传值方式的中文编码问题

可是此时如果我们把return “ok”改成return “好的”，给前端回传一个中文字符串呢？

我们试试。

诶，怎么变成问号了？大概是没能识别编码吧？该怎么做呢？

错误演示：

给dataType写成dataType:”charset=UTF-8”,然后你会发现它进入了error函数，甚至传给error的还是俩问号。

原因是dataType并不能帮助我们转换编码，它只是起到一个判断的作用，此处如果编码是UTF-8就执行success函数，如果不是UTF-8就执行error函数，显然这里的字符串不是UTF-8编码。

正确演示：

我们应该在后端设置返回的字符串的编码。设置方式是在@RequstMapping中加上produces属性，produces属性可以设置返回值的类型和返回的编码，修改后变成

@RequestMapping(value = "/test",produces = "text/html;charset=UTF-8")

执行后正确显示汉字：

另：调用response的setContentType方法和要返回的字符串通过getBytes()方式设置不可行。原因是返回的数据经过了@ResponseBody的处理又变成了ISO编码

另外返回json时中文编码是正常的，所以也可以选择返回一个只有一个字符串的List，然后设置dataType:”json”

三、后端获取AJAX从前端传递数据的其他方式

如果我们想做一个登录模块，就需要获取Session，或者我们仅仅只是想给Controller层的函数加上其他参数。那我们应该怎么做呢？我们只需要在Controller层的函数参数里加上request，然后调用request.getSession()方法就可以了。

如图，我们在给函数加上参数，并且打印一下获得的Session：

运行一下，点击前端的按钮：

我们成功获取到Session了

那我们每次接收数据，如果数据超过一对键值对，就要封装成对象，好麻烦啊，可不可以不用封装成对象直接接收呢？

答案当然是可以的。

@RequestBody，看名字就是请求体，如果你了解一点Http的相关知识（不了解也没关系，可以听我简要讲讲或者自己动动小手搜索一下），会知道Http请求由请求头、请求行、请求体三部分组成。我们从前端传回来的数据是装在请求体里的，而这个注解就是获取了请求的请求体，并且转换成已有的对象啦。

那我们在上上张图已经获取到了请求(request)，可以自己从请求体里面拿到发送的数据呀！

我们再修改一下Controller函数：

@RequestMapping("/test")

public @ResponseBody List<String> testAJAX( HttpServletRequest request) {

System.out.println(request.getParameter("k"));

System.out.println(request.getParameter("heihei"));