如何使用Servlet处理AJAX请求

魁首哥

作者

如何使用Servlet处理AJAX请求

本文小编为大家详细介绍“如何使用Servlet处理AJAX请求”，内容详细，步骤清晰，细节处理妥当，希望这篇“如何使用Servlet处理AJAX请求”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

AJAX用于异步更新页面的局部内容。

如何使用Servlet处理AJAX请求

ajax常用的请求数据类型

text 纯文本字符串
json json数据

使用ajax获取text示例

此种方式常用于前端向后台查询实体的一个属性（字段），比如查询总分。

前端页面

<body><form>学号：<inputtype="text"id="no"><br/>姓名：<inputtype="text"id="name"><br/><buttontype="button"id="btn">查询成绩</button></form><pid="score"></p><scriptsrc="js/jquery-3.4.1.min.js"></script><script>$("#btn").click(function(){$.ajax({url:"servlet/HandlerServlet",//请求地址type:"get",//请求方法data:{"no":$("#no").val(),"name":$("#name").val()},//要发送的数据,相当于表单提交的数据，json形式。dataType:"text",//期待返回的数据类型，也可以理解为请求的数据类型error:function(){//发生错误时的处理},success:function(data){//成功时的处理。参数表示返回的数据$("#score").text(data);}})});</script></body>

这里使用了jq提供的ajax方法，所以要用<script>将jq的库文件包含进来。

json的key只能是字符串，标准写法要引，实际上不引也可以，会自动转换为字符串。

json的value可以是多种数据类型，如果是字符串，需要引起来。

后台

说明

ajax请求的的url要和servlet配置的urlPatterns对应，这个地方很容易出错
servlet返回响应时，不管write()多少次，都只组成一个响应返回。

PrintWriterwriter=response.getWriter();writer.write("中国");writer.write("北京");

PrintWriterwriter=response.getWriter();writer.write("中国北京");

这2种方式完全等效，浏览器接受到的都是“中国北京”，“中国”“北京”之间没有空格。

使用ajax获取json对象示例

此种方式常用于后台向前端传送一个实体|JavaBean（一个实体的多个字段），比如查询一个学生的信息。

前端

<body><form>学号：<inputtype="text"id="no"><br/><buttontype="button"id="btn">查询学生信息</button></form><pid="show"></p><scriptsrc="js/jquery-3.4.1.min.js"></script><script>$("#btn").click(function(){$.ajax({url:"servlet/HandlerServlet",type:"post",data:{},dataType:"json",error:function(){console.log("ajax请求数据失败！");},success:function(data){//浏览器把接受到的json数据作为js对象，可通过.调用属性varinfo="姓名："+data.name+",年龄："+data.age+"，成绩："+data.score;$("#show").text(info);console.log(data);}})});</script></body>

后台

@WebServlet("/servlet/HandlerServlet")publicclassHandlerServletextendsHttpServlet{protectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{doGet(request,response);}protectedvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{request.setCharacterEncoding("utf-8");response.setContentType("text/html;charset=utf-8");//获取ajax传递的参数，和获取表单数据的方式一样Stringno=request.getParameter("no");//现在很多持久层框架都是把数据库返回的记录转化为JavaBean处理//此处省略连接数据库查询，得到Student类实例Studentstudent=newStudent(1,"张三",20,100);//使用fastjson将java对象转换为json字符串StringjsonStr=JSON.toJSONString(student);PrintWriterwriter=response.getWriter();writer.write(jsonStr);}}

JSON.toJSONString()使用的是阿里的fastjson.jar，需要自己下载添加这个jar。

使用ajax获取json数组

此种方式用于后台向前端返回同一实体类的多个实例，比如查询总分大于600的学生的信息，可能有多条记录满足要求。

前端

<body><buttontype="button"id="btn">查询学前三个学生的信息</button><divid="show"></div><scriptsrc="js/jquery-3.4.1.min.js"></script><script>$("#btn").click(function(){$.ajax({url:"servlet/HandlerServlet",type:"post",data:{},dataType:"json",error:function(){console.log("ajax请求数据失败！");},success:function(data){console.log(data);//遍历json数组for(vari=0;i<data.length;i++){//从json数组得到json对象varstudent=data[i];varinfo="姓名："+student.name+",年龄："+student.age+"，成绩："+student.score;$("#show").append("<p>"+info+"</p>");}}})});</script></body>

使用data[下标].字段名的方式获取属性值。

后台

@WebServlet("/servlet/HandlerServlet")publicclassHandlerServletextendsHttpServlet{protectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{doGet(request,response);}protectedvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{request.setCharacterEncoding("utf-8");response.setContentType("text/html;charset=utf-8");//获取ajax传递的参数，和获取表单数据的方式一样Stringno=request.getParameter("no");//现在很多持久层框架都是把数据库返回的记录转化为JavaBean处理//此处省略连接数据库查询，得到Student类的多个实例Studentstudent1=newStudent(1,"张三",20,100);Studentstudent2=newStudent(2,"李四",19,80);Studentstudent3=newStudent(3,"王五",20,90);ArrayList<Student>list=newArrayList<>();list.add(student1);list.add(student2);list.add(student3);//使用fastjson将java对象转换为json字符串StringjsonStr=JSON.toJSONString(list);PrintWriterwriter=response.getWriter();writer.write(jsonStr);}}