欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

使用Servlet处理Ajax请求

程序员文章站 2022-10-24 19:44:22
AJAX用于异步更新页面的局部内容。 ajax常用的请求数据类型 text 纯文本字符串 json json数据 使用ajax获取text示例 此种方式常用于前端向后台查询实体的一个属性(字段),比如查询总分。 前端页面
学号:

 

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向后台请求数据,浏览器锁定页面,用户不能在页面上进行操作,直到请求完成