不用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 testAJAX(@RequestBody TestDomain t){

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

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

  System.out.println(t);

  ListL=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 testAJAX( HttpServletRequest request) {

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

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

  ListL=new ArrayList<>();

  L.add("ok");

  return L;

}

  request.getParmameter(“k”)是用于获取key的名字为“k”的值的函数。

  同时我们再修改一下前端的ajax请求,把contentType去掉,顺便把data里用来把键值对json化的Json.stringfy去掉,代码会变成如下:

$.ajax({

    url:"test",

    type:"post",

    data:{

        "k":"123",

        "heihei":text

    },

    dataType:"json",

    async:true,

    success:function(data){

        alert(data);

    },

    error(data){

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

    }

});

  我们可以发现值也被传过来了

  那我们为什么要修改前端的ajax请求呢?目的是让前端不再以把数据变成json再发送,在有@RequestBody的时候,这个注解会帮助我们解析json。可是如今我们没有这个注解了,自己无法解析json,应该让前端传过来普通的数据。

你可能感兴趣的:(不用jsp怎么实现前后端交互?给萌新后端的ajax教程(2))