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

使用Servlet处理AJAX请求的更多相关文章

  1. Servlet处理原生Ajax请求

    萌新小白人生中的第一篇博客,难免会有差错,还望各位大佬多多包涵. 1. Ajax技术简介      Ajax(Asynchronous JavaScript and XML,异步JavaScript和 ...

  2. java Servlet Filter 拦截Ajax请求

    /** * 版权:Copyright 2016-2016 AudaqueTech. Co. Ltd. All Rights Reserved. * 描述: * 创建人:赵巍 * 创建时间:2016年1 ...

  3. ajax请求、servlet返回json数据

    ajax请求.servlet返回json数据 1.方式一 response.setcontenttype("text/html;charset=utf-8"); response. ...

  4. 解决Ajax请求后台Servlet接口拿不到JSON数据问题

    前端Ajax请求代码如下: window.onload=function() { var url='http://127.0.0.1:8080/testpj/ErrorlogServlet'; $.a ...

  5. java Servlet Filter 拦截Ajax请求,统一处理session超时的问题

    后台增加filter,注意不要把druid也屏蔽了 import java.io.IOException; import javax.servlet.Filter; import javax.serv ...

  6. Servlet处理(jQuery)Ajax请求

    1. jQuery     jQuery是一个JavaScript函数库,极大的简化了JavaScript编程,很容易学习.jQuery是目前最流行的开源js框架,并且提供了大量的扩展. 2. Aja ...

  7. 原生js发送ajax请求

    堕落了一阵子了,今天打开博客,发现连登录的用户名和密码都不记得了.2016年已过半,不能再这么晃荡下去了. 参加了网易微专业-前端攻城狮 培训,目前进行到大作业开发阶段,感觉举步维艰.但是无论如何,不 ...

  8. 如何在Crystal Portlet中正确返回JSON数据给AJAX请求?

    当Crystal Portlet中需要采用Ajax请求,并让后台返回Json数据时,如何才能正确.方便的返回Json数据呢? 以下两种方法均可: 方法一:Ajax请求时,采用RenderURL,对应P ...

  9. extjs ajax请求与struts2进行交互

    sencha extjs 5 增加一个struts2的配置,这样可以在设置好前台布局之后,与后台交互获取数据显示.现在有一个问题是struts2对于url的跳转action支 持比较良好,但是对于像E ...

随机推荐

  1. HDU 1326 Box of Bricks(思维)

    Little Bob likes playing with his box of bricks. He puts the bricks one upon another and builds stac ...

  2. 吴裕雄 python 机器学习——人工神经网络感知机学习算法的应用

    import numpy as np from matplotlib import pyplot as plt from sklearn import neighbors, datasets from ...

  3. 【C语言】创建一个函数,利用该函数将两个字符串连接起来

    代码: #include<stdio.h> ], ]) { int i, j; ; c[i] != '\0'; i++); ; d[j] != '\0'; j++) { c[i++] = ...

  4. [Jenkins] TestComplete 使用Jenkins进行持续集成测试

    1.安装正确的TestComplete插件 在Jenkins里面搜索TestComplete,找到正确的插件然后安装,可以重启jenkins或者选择不重启 在Install Tab 下面可以查看到正确 ...

  5. 聊聊、Spring自动扫描

    一.PathMatchingResourcePatternResolver 二.SimpleMetadataReaderFactory 三.实现(核心代码) private static final ...

  6. Linux创建连接命令 ln -s创建软连接

    ln -s 是linux中一个非常重要命令,一定要熟悉.它的功能是为某一个文件在另外一个位置建立一个同不的链接,这个命令最常用的参数是-s, 具体用法是:ln -s 源文件 目标文件. 当 我们需要在 ...

  7. 城市间紧急救援 Dijkstra

    作为一个城市的应急救援队伍的负责人,你有一张特殊的全国地图.在地图上显示有多个分散的城市和一些连接城市的快速道路.每个城市的救援队数量和每一条连接两个城市的快速道路长度都标在地图上.当其他城市有紧急求 ...

  8. eclipse中使用maven update project功能后,默认又回到了jre 1.5的解决方案

    在maven项目中的pom.xml中添加以下节点,进行jre版本的配置,配置完后再进行项目更新后,并不会自动切换到jre1.5 添加在pom的url标签后面 <build>         ...

  9. 微信小程序中promise的使用

    简介 相信看到这篇文章的同学,都已经对微信小程序的api文档有所了解了,也都经历了微信小程序api回调函数嵌套的痛苦,才会想要通过Promise解决回调地狱这个问题,我下面就直接介绍怎么在小程序中使用 ...

  10. 学习笔记(23)- plato-准备中文语料

    以plato使用的metalwoz数据集的INSURANCE为例,进行语料的汉化过程. 1. 下载数据集 微软的数据集,下载地址:https://www.microsoft.com/en-us/res ...