首页 > > 程序设计 > Java技术 >

使用Servlet处理AJAX请求

2019-12-28 11:56:23来源：博客园 阅读 ()

新老客户大回馈,云服务器低至5折

使用Servlet处理AJAX请求

 

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

 

 

 

ajax常用的请求数据类型

  • text    纯文本字符串
  • json    json数据

 

 

 

 

 

使用ajax获取text示例

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

 

前端页面

<body>
  <form>
    学号：<input type="text" id="no"><br />
    姓名：<input type="text" id="name"><br />
    <button type="button" id="btn">查询成绩</button>
  </form>
  <p id="score"></p>

  <script src="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可以是多种数据类型，如果是字符串，需要引起来。

 

 

 

后台

@WebServlet("/servlet/HandlerServlet")
public class HandlerServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");

        //获取ajax传递的参数，和获取表单数据的方式一样
        String no=request.getParameter("no");
        String name=request.getParameter("name");

        //此处省略连接数据库查询，直接返回成绩
        PrintWriter writer = response.getWriter();
        writer.write(name+"同学，你的总分是：600");
    }
}

 

 

 

说明

  •  ajax请求的的url要和servlet配置的urlPatterns对应，这个地方很容易出错
  • servlet返回响应时，不管write()多少次，都只组成一个响应返回。
      PrintWriter writer = response.getWriter();
      writer.write("中国");
      writer.write("北京");
      PrintWriter writer = response.getWriter();
      writer.write("中国北京");

 

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

 

 

 

 

 

 

使用ajax获取json对象示例

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

 

前端

<body>
<form>
    学号：<input type="text" id="no"><br />
    <button type="button" id="btn">查询学生信息</button>
</form>
<p id="show"></p>

<script src="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对象，可通过.调用属性
                var info = "姓名：" + data.name + ",年龄：" + data.age + "，成绩：" + data.score;
                $("#show").text(info);
                console.log(data);
            }
        })
    });
</script>
</body>

 

 

 

后台

@WebServlet("/servlet/HandlerServlet")
public class HandlerServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");

        //获取ajax传递的参数，和获取表单数据的方式一样
        String no=request.getParameter("no");

        //现在很多持久层框架都是把数据库返回的记录转化为JavaBean处理
        //此处省略连接数据库查询，得到Student类实例
        Student student = new Student(1, "张三", 20, 100);

        //使用fastjson将java对象转换为json字符串
        String jsonStr = JSON.toJSONString(student);

        PrintWriter writer = response.getWriter();
        writer.write(jsonStr);
    }
}

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

 

 

 

 

 

 

使用ajax获取json数组

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

 

前端

<body>
  <button type="button" id="btn">查询学前三个学生的信息</button>
  <div id="show"></div>

  <script src="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 (var i=0;i<data.length;i++){
            //从json数组得到json对象
            var student = data[i];
            var info = "姓名：" + student.name + ",年龄：" + student.age + "，成绩：" + student.score;
            $("#show").append("<p>" + info + "</p>");
          }
        }
      })
    });
  </script>
  </body>

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

 

 

后台

@WebServlet("/servlet/HandlerServlet")
public class HandlerServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");

        //获取ajax传递的参数，和获取表单数据的方式一样
        String no=request.getParameter("no");

        //现在很多持久层框架都是把数据库返回的记录转化为JavaBean处理
        //此处省略连接数据库查询，得到Student类的多个实例
        Student student1 = new Student(1, "张三", 20, 100);
        Student student2 = new Student(2, "李四", 19, 80);
        Student student3 = new Student(3, "王五", 20, 90);
        ArrayList<Student> list = new ArrayList<>();
        list.add(student1);
        list.add(student2);
        list.add(student3);

        //使用fastjson将java对象转换为json字符串
        String jsonStr = JSON.toJSONString(list);

        PrintWriter writer = response.getWriter();
        writer.write(jsonStr);
    }
}

 

 

 

 

 

 

使用ajax获取map类型的json数据

使用场景：前端向后台查询多个信息，这些信息不是同一实体类的实例。比如要查询考生人数、最高分考生的信息，考生人数是int型，最高分考生信息是Student类的实例。

 

前端

<body>
  <button type="button" id="btn">查询考生人数、最高分考生信息</button>
  <div id="show"></div>

  <script src="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);
          $("#show").append("<p>考生人数："+data.amount+"</p>");
          var student = data.student;
          var info = "姓名：" + student.name + "，年龄：" + student.age + "，成绩：" + student.score;
          $("#show").append("<p>最高分考生信息：" + info + "</p>");
        }
      })
    });
  </script>
  </body>

以  data.key  的方式获取对应的value。

 

 

后台

@WebServlet("/servlet/HandlerServlet")
public class HandlerServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");

        //获取ajax传递的参数，和获取表单数据的方式一样
        String no=request.getParameter("no");

        //现在很多后台框架都是把数据库返回的记录转化为JavaBean处理
        //此处省略连接数据库查询，得到Student类实例
        HashMap<String, Object> map = new HashMap<>();
        map.put("amount", 3000);
        map.put("student", new Student(1, "张三", 20, 680));


        //使用fastjson将java对象转换为json字符串
        String jsonStr = JSON.toJSONString(map);

        PrintWriter writer = response.getWriter();
        writer.write(jsonStr);
    }
}

 

map和json对象十分相似：都是以键值对的形式保存数据，key是String，value是Object。

所以后台map类型的数据可以以json的形式传给前端。

 

 

 

 

 

 

说明

  • 前端使用了jq的ajax()方法，所以需要把jq的库文件包含进来
  • 后台向前端传json数据时，使用了阿里巴巴的fastjson库，需要自己下载引入fastjson.jar
  • ajax还有一个常用选项 async：boolean，是否异步请求数据，默认为true  异步请求

 

async：true    异步，ajax向后台请求数据时，用户仍可以在页面上进行操作

async：false   同步，ajax向后台请求数据，浏览器锁定页面，用户不能在页面上进行操作，直到请求完成


原文链接:https://www.cnblogs.com/chy18883701161/p/11431231.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：如何更优雅地对接第三方API

下一篇：Java自学-集合框架 ArrayList和LinkedList的区别

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签