/14 分钟/4 阅读/0 评论
Ajax概述
ASynchronous JavaScript And XML 异步的JavaScript 和 XML 在页面不刷新的情况下和服务器进行交互。获取服务器中的响应的数据。 异步：请求服务器 --- 等待服务器回应，但是在等待过程中后面如果有内
什么是Ajax
ASynchronous JavaScript And XML 异步的JavaScript 和 XML
Ajax 是一种异步刷新技术，用来在当前页面内响应不同的请求内容。
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
Ajax是前端的技术，由浏览器进行解析执行。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的 情况下，对网页的某部分进行更新。
传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。
提升用户的体验
Ajax技术：
主要是把html、css、js、dom、xml 技术结合在一起使用。
在页面不整个刷新的情况下，和后台的服务器，以及程序进行数据的传输。
页面不刷新：用户在操作页面的时候，当某个操作结束之后，使用AJAX技术和服务器进行交互，但是用户还可以继续再页面上进行其他的操作。用户并不会感觉到页面在和后台交互。
ajax常见应用：
地图、注册页面光标离焦之后验证某些数据是否可用等（用户可用，用户存在，都是到后台进行交互）。
ajax的作用
在页面不刷新的情况下和服务器进行交互。获取服务器中的响应的数据。
同步&异步
异步：请求服务器 --- 等待服务器回应，但是在等待过程中后面如果有内容继续操作 -- 处理完毕
同步：请求服务器 --- 等待服务器回应，如果没有回应会一直等待（回应的期间，客户端不能干任何事件）
Ajax快速入门案例
ajax和服务器交互的本质（原理）
原生js方式
获取XMLHttpRequest对象
XMLHttprequest对象是所有浏览器内置的对象。这个对象负责和服务器之间进行数据的交互。我们在JS代码中，先得到XMLhttprequest对象，然后通过这个对象的向服务器发送数据，同时还要使用这个对象接收服务器的响应数据，在获取到响应数据之后，使用JS和 解析技术，把数据添加到当前的页面上。
function createXMLHttp(){
var xmlhttp;
/*
在JS中所有的 非 零 、 非null 、 非undefined 都可以任务是 true
window.XMLHttpRequest 使用window对象，调用XMLHttpRequest，
如果当前window对象有XMLHttpRequest，这时就会得到XMLHttpRequest，
如果当前的window对象没有XMLHttpRequest，这时会得到undefined
*/
if (window.XMLHttpRequest){//如果能拿到就表示有这样一个对象、如果没有拿到就认为是nudinfed
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else{
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
建立连接
open方法中的第一个参数：
设置向服务器发送请求时提交数据的方式：get和post
open方法中的第二个参数：
本次请求的服务器的资源路径。
open方法的第三个参数：
true：表示页面的处理和后台发送请求是异步进行。设置true。
false：页面的处理和后台是同步。
xmlhttp.open("请求方式","请求路径",boolean);
发送请求
send是将请求的数据发送给服务器。
send方法中的参数，只有在post请求时才能书写。
如果get方式，直接书写send，括号中不要书写任何内容。
xmlhttp.send();
setRequestHeader方法
如果使用post方式和服务器交互，并且在send中携带参数，需要通过xmlhttprequest中的setRequestHeader设置请求头信息。
//post请求 1：设置请求头 2：在send（）方法中书写参数
xmlhttp.open("POST","ajaxServlet",true);
//post请求必须在发送服务器前设置请求头
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("username="+value);
代码实现
- xmlhttp.js
function createXMLHttp(){
var xmlhttp;
/*
在JS中所有的 非 零 、 非null 、 非undefined 都可以任务是 true
window.XMLHttpRequest 使用window对象，调用XMLHttpRequest，
如果当前window对象有XMLHttpRequest，这时就会得到XMLHttpRequest，
如果当前的window对象没有XMLHttpRequest，这时会得到undefined
*/
if (window.XMLHttpRequest){//如果能拿到就表示有这样一个对象、如果没有拿到就认为是nudinfed
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else{
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
- 发送请求
function demo() {
//拿到ajax对象
var xmlhttp = createXMLHttp();
//获取用户名的内容
var value = document.getElementById("username").value;
//向服务器发送请求
//get请求传参方式 url?username=jack&password=123&age=89
xmlhttp.open("GET", "ajaxServlet?username="+value, true);
xmlhttp.send();
//post请求 1：设置请求头 2：在send（）方法中书写参数
xmlhttp.open("POST","ajaxServlet",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("username="+value);
}
- 页面
<form action="ajaxServlet" method="get">
用户名：<input type="text" id="username" name="username" onblur="demo();" autocomplete="off">
<span id="myuserid"></span><br>
密码：<input type="text" name="password" autocomplete="off"> <br>
<input type="submit" value="注册">
</form>
- Servlet
@WebServlet(urlPatterns = "/ajaxServlet")
public class ajaxServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("------post-----");
//获取ajax传递的参数
String username = request.getParameter("username");
System.out.println(username);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("------get-----");
//获取ajax传递的参数
String username = request.getParameter("username");
System.out.println(username);
}
}
- 请求测试，查看是否能异步提交到后台
- 服务器响应
//获取服务器的响应结果
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("myuserid").innerHTML=xmlhttp.responseText;//接受服务器响应回来的数据
}
}
- 完整代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="/jQueryDemo/js/xmlhttp.js"></script>
<script>
function demo() {
//后台服务器 ， get post
//拿ajax对象
var xmlhttp = createXMLHttp();
//获取用户名的内容
var value = document.getElementById("username").value;
//get请求传参方式 url?username=jack&password=123&age=89
//xmlhttp.open("GET", "ajaxServlet?username="+value, true);
//xmlhttp.send();
//post请求 1：设置请求头 2：在send（）方法中书写参数
xmlhttp.open("POST","ajaxServlet",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("username="+value);
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("myuserid").innerHTML=xmlhttp.responseText;//接受服务器响应回来的数据
}
}
}
</script>
</head>
<body>
<form action="ajaxServlet" method="get">
用户名：<input type="text" id="username" name="username" onblur="demo();" autocomplete="off">
<span id="myuserid"></span><br>
密码：<input type="text" name="password" autocomplete="off"> <br>
<input type="submit" value="注册">
</form>
</body>
</html>
- 完整后台代码
@WebServlet(urlPatterns = "/ajaxServlet")
public class ajaxServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
String username = request.getParameter("username");
System.out.println(username);
if(username.equals("jack")){
response.getWriter().print("用户名已注册");
return;
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
String username = request.getParameter("username");
System.out.println(username);
//把username封装并传业务层--dao层
if(username.equals("jack")){
response.getWriter().print("用名已存在");
return;
}
}
}
小结
AJAX的编写的步骤:
* 第一步：创建一个异步对象.
* 第二步：设置对象状态改变触发一个函数.
* 第三步：设置向后台提交的路径
* 第四步：发送请求.
GET方式提交请求:
function ajax_get() {
// 1.创建异步对象
var xhr = createXMLHttp();
// 2.设置状态改变的监听 回调函数.
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){ // 请求发送成功 // 响应也成功
// 获得响应的数据:
var data = xhr.responseText;
// 将数据写入到DIV中:
document.getElementById("d1").innerHTML = data;
}
}
// 3.设置请求路径
xhr.open("GET","/day15/ServletDemo1?name=aaa&pass=123",true);
// 4.发送请求
xhr.send();
}
POST方式提交请求:
function ajax_post(){
// 创建异步对象:
var xhr = createXMLHttp();
// 设置监听:
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){ // 请求发送成功 // 响应也成功
// 获得响应的数据:
var data = xhr.responseText;
// 将数据写入到DIV中:
document.getElementById("d1").innerHTML = data;
}
}
// 打开路径:
xhr.open("POST","/day15/ServletDemo1",true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
// 发送请求 post携带参数:
xhr.send("name=张三&pass=123");
}
jQuery Ajax 编程
第一组：
$ .ajax%20%E6%98%AFjquery%E6%8F%90%E4%BE%9B%E6%9C%80%E5%9F%BA%E6%9C%ACajax%E7%BC%96%E7%A8%8B%E6%96%B9%E6%B3%95%EF%BC%8C%E5%8A%9F%E8%83%BD%E5%BC%BA%E5%A4%A7%EF%BC%8C%E4%BB%A3%E7%A0%81%E5%A4%8D%E6%9D%82%0A%E7%AC%AC%E4%BA%8C%E7%BB%84%EF%BC%9A%E4%B8%BA%E4%BA%86%E7%AE%80%E5%8C%96 $.ajax编程，提供了load、$ .get%E3%80%81 $.post
后台响应json
response.setContentType("application/json;charset=utf-8");
$.ajax()
语法
- $.ajax({
键名: 值,
.....
键名: 值
});
相关属性
| 键名 | 描述 |
|---|---|
| url | 请求路径 |
| type | 请求方式 |
| data | 请求参数{"username":"jack","age":23} |
| success | 响应成功，处理数据。需要定义回调函数 |
| error | 响应错误。需要定义回调函数 |
| dataType | 设置接受响应数据的格式 |
<script src="js/jquery-3.4.1.js"></script>
<script>
$(function () {
$("#pnum").blur(function () {
var $pnum = $("#pnum").val();
if( !$pnum.match("^1[35678]\\d{9}$")){
//如果不匹配就提示并显示
$("#pnumid").html("必须满足手机号11位！");
}else {
$.ajax({
type: "post",
url: "ajaxServlet",
data: {'pnum':$pnum},
dataType : "text",
success: function(data){
//把后台接受的数据写入span中
$("#pnumid").html(data);
},
error: function () {
$("#pnumid").html("出错了");
}
});
}
});
});
</script>
<form action="userServlet" method="post">
手机号：<input type="text" id="pnum" name="pnum"><span id="pnumid"></span><br>
昵称：<input type="text" id="nickname" name="nickname"><br>
密码：<input type="text" id="pwd" name="pwd"><br>
<input type="submit"><br>
</form>
@WebServlet(urlPatterns = "/userServlet")
public class userServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//设置响应的数据格式
response.setContentType("text/html;charset=utf-8");
//获取页面提交过来的数据
String pnum = request.getParameter("pnum");
System.out.println(pnum);
//传递 业务层，，，dao
if("13140009999".equals(pnum)){
response.getWriter().print("手机号已存在！");
}else{
response.getWriter().print("手机号可用！");
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
}
$.load()
Load的语法 ： jquery对象.load(url, param ,callback)
url :访问服务器地址
param :发送给服务器参数
callback :当正常返回后 执行回调函数
如果 param存在，以POST方式请求， 如果param 不存在，以GET方式请求
<script src="/jQueryDemo/js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
$("#username").blur(function () {
var value = $(this).val();
//post请求
var url = 'ajaxloadd';
var args = {"username": value};
$("#myuserid").load(url, args);
//get请求
var url = 'ajaxloadd?username='+value;
$("#myuserid").load(url);
});
});
</script>
</head>
<body>
<form action="" method="get">
用户名：<input type="text" id="username" name="username" autocomplete="off">
<span id="myuserid"></span><br>
密码：<input type="text" name="password" autocomplete="off"> <br>
<input type="submit" value="注册">
</form>
</body>
@WebServlet(urlPatterns = "/ajaxloadd")
public class ajaxloadd extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
String username = request.getParameter("username");
System.out.println(username);
if(username.equals("jack")){
response.getWriter().print("小可爱已存在哦");
}
}
$.get()
语法
- $.get(url, [data], [callback], [type])
相关属性
| 键名 | 描述 |
|---|---|
| url | 请求路径 |
| data | 请求参数{"username":"jack","age":23} |
| callback | 回调函数 |
| type | 响应结果的类型 |
<script src="/jQueryDemo/js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
$("#username").blur(function(){
var username = $("#username").val();
$.get("ajaxgetServlet",{'username':username},function(data){
//$.get("ajaxgetServlet?username="+username,function(data){
$("#myuserid").html(data);
},"text");
});
});
</script>
</head>
<body>
<form action="ajaxgetServlet" method="get">
用户名：<input type="text" id="username" name="username" autocomplete="off">
<span id="myuserid"></span><br>
密码：<input type="text" name="password" autocomplete="off"> <br>
<input type="submit" value="注册">
</form>
</body>
@WebServlet(urlPatterns = "/ajaxgetServlet")
public class ajaxgetServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
String username = request.getParameter("username");
if(username.equals("jack")){
response.getWriter().print("已存在");
}
}
}
$.post()
语法
- $.post(url, [param], [callback], [type])
相关属性
| 键名 | 描述 |
|---|---|
| url | 请求路径 |
| param | 请求参数{"username":"jack","age":23} |
| callback | 服务器返回客户端执行success函数 ，接收data参数（服务器返回数据） |
| type | 响应结果的类型 |
<script src="/jQueryDemo/js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
$("#username").blur(function () {
var username = $("#username").val();
alert(username);
$.post("ajaxgetServlet",{'username':username},function(result){
$("#myuserid").html(result);
},"text");
});
});
</script>
</head>
<body>
<form action="ajaxgetServlet" method="post">
用户名：<input type="text" id="username" name="username" autocomplete="off">
<span id="myuserid"></span><br>
密码：<input type="text" name="password" autocomplete="off"> <br>
<input type="submit" value="注册">
</form>
</body>
@WebServlet(urlPatterns = "/ajaxgetServlet")
public class ajaxgetServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
response.setContentType("text/html;charset=utf-8");
String username = request.getParameter("username");
System.out.println(username);
if(username.equals("jack")){
response.getWriter().print("已存在");
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}
serialize方法使用
问题： 如何将form的数据以Ajax方式发送到服务器
通过serialize 方法，将form参数转换 name=value&name=value 格式
<script src="/jQueryDemo/js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
$("#mybtn").click(function () {
var serialize = $("#myform").serialize();
$.post("ajaxgetServlet",serialize);
});
});
</script>
</head>
<body>
<form id="myform">
用户名 <input type="text" name="username" /><br/>
密码 <input type="password" name="password" /><br/>
爱好 <input type="checkbox" name="hobby" value="体育" />体育
<input type="checkbox" name="hobby" value="读书" />读书
<input type="checkbox" name="hobby" value="音乐" />音乐 <br/>
<input type="button" value="提交" id="mybtn" />
</form>
@WebServlet(urlPatterns = "/ajaxgetServlet")
public class ajaxgetServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
String username = request.getParameter("username");
String password = request.getParameter("password");
String[] hobbies = request.getParameterValues("hobby");
for(String hobby : hobbies){
System.out.println(hobby);
}
}
JSON概述
什么是JSON
JavaScript Object Notation JavaScript对象表示法
- json现在多用于存储和交换文本信息的语法
- 进行数据的传输
- JSON 比 XML 更小、更快，更易解析
JSON基础语法
json数据是由键值对构成的
- K:V
键用引号(单双都行)引起来
- "username":"zhangsan"'sex': '男''age':13
值得取值有如下类型
- 数字（整数或浮点数）字符串（在双引号中）逻辑值（true 或 false）数组对象null
数据由逗号分隔：多个键值对由逗号分隔
- "username":"zhangsan" , 'age':13
花括号保存对象：使用{}定义json 格式
- {"username":"zhangsan" , 'age':13}
方括号保存数组：[]
- ["张三","李四","王五","赵六"]
序列化JSON数据
后台响应
response.setContentType("application/json;charset=utf-8");
- 使jackson工具序列化json
java对象转换json格式
public class Person {
private int id;
private String name;
private String gender;
//提供get set方法
}
@WebServlet(urlPatterns = "/JsonServlet")
public class JsonServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Person p = new Person();
p.setId(12);
p.setName("jack");
p.setGender("郑州");
ObjectMapper objectMapper = new ObjectMapper();
//writeValueAsString() 将对象转成json字符串
String json = objectMapper.writeValueAsString(p);
System.out.println(json);//{"id":12,"name":"jack","gender":"郑州"}
response.setContentType("application/json;charset=utf-8");
response.getWriter().print(json);
//writeValue() 将数据写入p.txt中 {"id":12,"name":"jack","gender":"郑州"}
objectMapper.writeValue(new File("e://p.txt"),p);
}
json注解方式
@Setter
@Getter
@ToString
@NoArgsConstructor
@AllArgsConstructor
public class Person {
private int id;
// @JsonProperty("name")
private String name;
private String gender;
//解决password 不显示
@JsonIgnore//忽略此字段 如果转成json格式，把注解的属性忽略掉（不转成json,不带你玩）
private String password;
//日期格式化问题
@JsonFormat(pattern = "yyyy-MM-dd") ////1564035926050 转后 2019-07-25
private Date brithdy;
}
@WebServlet(urlPatterns = "/JsonServlet")
public class JsonServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//设置响应的数据格式 json
response.setContentType("application/json;charset=utf-8");
//把对象转成json数据格式
Person p = new Person();
p.setId(12);
p.setName("jack");
p.setGender("郑州");
p.setPassword("12345");
p.setBrithdy(new Date());
//首先创建转jackson的对象
ObjectMapper objectMapper = new ObjectMapper();
//通过jackson对象进行转对象
String s = objectMapper.writeValueAsString(p);
//把json串响应到浏览器上
//{"id":12,"name":"jack","gender":"郑州","brithdy":"2020-05-18"} 此时password已经没有了，日期也格式化了
response.getWriter().print(s);
}
}
list&map对象转换json
- list转json
@WebServlet(urlPatterns = "/listServlet")
public class listServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Person p = new Person();
p.setId(12);
p.setName("jack");
p.setGender("郑州");
p.setPassword("123");
p.setBrithdy(new Date());
Person p2 = new Person();
p2.setId(12);
p2.setName("jack");
p2.setGender("郑州");
p.setPassword("123");
p2.setBrithdy(new Date());
Person p3 = new Person();
p3.setId(12);
p3.setName("jack");
p3.setGender("郑州");
p.setPassword("123");
p3.setBrithdy(new Date());
List<Person> list = new ArrayList<>();
list.add(p);
list.add(p2);
list.add(p3);
//ajax请求后，要把list数据进行 响应
//设置响应的数据类型 -- json
response.setContentType("application/json;charset=utf-8");
//创建jackson对象
ObjectMapper objectMapper = new ObjectMapper();
//通过jackson工具类把list集合转成json
String s = objectMapper.writeValueAsString(list);
//响应的就是json数据格式
//[{},{}.{}]
//[{"id":12,"name":"jack","gender":"郑州","brithdy":"2020-05-18"},{"id":12,"name":"jack","gender":"郑州","brithdy":"2020-05-18"},{"id":12,"name":"jack","gender":"郑州","brithdy":"2020-05-18"}]
response.getWriter().print(s);
}
}
- map转json
@WebServlet(urlPatterns = "/mapServlet")
public class mapServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//设置响应数据格式
response.setContentType("application/json;charset=utf-8");
//把数据存在map中
Map<String,Object> map = new HashMap<>();
map.put("name","张三");
map.put("age",34);
map.put("sex","男");
//创建jackson对象
ObjectMapper objectMapper = new ObjectMapper();
//转换对象的方法
String s = objectMapper.writeValueAsString(map);
//把转换后的json串响应出去
//{"sex":"男","name":"张三","age":34}
response.getWriter().print(s);
}
}
Json转数据对象
@WebServlet(urlPatterns = "/JsonToperson")
public class JsonToperson extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//定义一个json串
String json = "{\"id\":12,\"name\":\"jack\",\"gender\":\"郑州\",\"brithdy\":\"2020-05-18\"}";
//创建jackson对象
ObjectMapper objectMapper = new ObjectMapper();
//把json串转成对象
Person person = objectMapper.readValue(json, Person.class);
//Person(id=12, name=jack, gender=郑州, password=null, brithdy=Mon May 18 08:00:00 CST 2020)
System.out.println(person);
}
}
解析JSON数据
解析单个对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.js"></script>
<script>
$.ajax({
type:"get",
url:"/personServlet",
dataType:"json",
success:function (data) {
//$.each(arr,function(index,item){})
$(data).each(function (i, person) {
$("#list").append(
"<tr>"
+"<td>"+person.id+"</td>"
+"<td>"+person.name+"</td>"
+"<td>"+person.password+"</td>"
+"<td>"+person.gender+"</td>"
+"<td>"+person.brithdy+"</td>" +
"</tr>"
);
}
);
},//success of end
error : function (arg) {
alert("加载数据失败");
console.log(arg);
}
})//$.ajax({}) of end
</script>
</head>
<body>
<center>
<table border="1px" cellpadding="10px" cellspacing="0px" >
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>密码</th>
<th>性别</th>
<th>生日</th>
</tr>
</thead>
<tbody id="list">
</tbody>
</table>
</center>
</body>
</html>
@WebServlet(urlPatterns = "/personServlet")
public class personServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//设置响应的数据格式 json
response.setContentType("application/json;charset=utf-8");
//把对象转成json数据格式
Person p = new Person();
p.setId(12);
p.setName("jack");
p.setGender("郑州");
p.setPassword("12345");
p.setBrithdy(new Date());
//首先创建转jackson的对象
ObjectMapper objectMapper = new ObjectMapper();
//通过jackson对象进行转对象
String s = objectMapper.writeValueAsString(p);
//把json串响应到浏览器上
//{"id":12,"name":"jack","gender":"郑州","brithdy":"2020-05-18"} 此时password已经没有了，日期也格式化了
response.getWriter().print(s);
}
解析集合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.js"></script>
<script>
$.ajax({
type:"get",
url:"/listServlet",
dataType:"json",//预期后台返回的数据格式为json
success:function (data) {
//$.each(arr,function(index,item){})
$(data).each(function (i,person) {
$("#list").append(
"<tr>"
+"<td>"+data[i].id+"</td>"
+"<td>"+data[i].name+"</td>"
+"<td>"+data[i].password+"</td>"
+"<td>"+data[i].gender+"</td>"
+"<td>"+data[i].brithdy+"</td>" +
"</tr>"
);
}
);
},//success of end
error : function (arg) {
alert("加载数据失败");
console.log(arg);
}
})//$.ajax({}) of end
</script>
</head>
<body>
<center>
<table border="1px" cellpadding="10px" cellspacing="0px" >
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>密码</th>
<th>性别</th>
<th>生日</th>
</tr>
</thead>
<tbody id="list">
</tbody>
</table>
</center>
</body>
</html>
package cn.yanqi.web;
import cn.yanqi.bean.Person;
import com.fasterxml.jackson.databind.ObjectMapper;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
/**
* @Auther: yanqi
* @Date:
* @Desc:
*/
@WebServlet(urlPatterns = "/listServlet")
public class listServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Person p = new Person();
p.setId(12);
p.setName("jack1");
p.setGender("郑州1");
p.setPassword("1231");
p.setBrithdy(new Date());
Person p2 = new Person();
p2.setId(13);
p2.setName("jack2");
p2.setGender("郑州2");
p.setPassword("1232");
p2.setBrithdy(new Date());
Person p3 = new Person();
p3.setId(14);
p3.setName("jack3");
p3.setGender("郑州3");
p.setPassword("1233");
p3.setBrithdy(new Date());
List<Person> list = new ArrayList<>();
list.add(p);
list.add(p2);
list.add(p3);
//ajax请求后，要把list数据进行 响应
//设置响应的数据类型 -- json
response.setContentType("application/json;charset=utf-8");
//创建jackson对象
ObjectMapper objectMapper = new ObjectMapper();
//通过jackson工具类把list集合转成json
String s = objectMapper.writeValueAsString(list);
//响应的就是json数据格式
//[{},{}.{}]
//[{"id":12,"name":"jack","gender":"郑州","brithdy":"2020-05-18"},{"id":12,"name":"jack","gender":"郑州","brithdy":"2020-05-18"},{"id":12,"name":"jack","gender":"郑州","brithdy":"2020-05-18"}]
response.getWriter().print(s);
}
}
案例-省市县级联
数据库准备
面页
<script src="js/jquery-3.3.1.js"></script>
<script>
$(function () {
//初始省的参数
loadArea(0,"s1");
//当省变化时 加载市
$("#s1").change(function () {
//清空市
$("#s2").empty();
$("#s2").append("<option value=''>--请选择市--</option>");
// 清空区县
$("#s3").empty();
$("#s3").append("<option value=''>--请选择区县--</option>");
var code = $(this).val();
loadArea(code,"s2");
});
//当市变化时 加载区县
$("#s2").change(function () {
// 清空区县
$("#s3").empty();
$("#s3").append("<option value=''>--请选择区县--</option>");
var code = $(this).val();
loadArea(code,"s3");
});
//首选加载省
function loadArea(pid,sid) {
$.post("getCityServlet",{pid:pid},function (data) {
$(data).each(function () {
var cityName = this.cityName;
var codeid = this.codeid;
var option = $("<option value='"+codeid+"'>"+cityName+"</option>");
$("#"+sid).append(option);
});
});
}
});
</script>
</head>
<body>
<select id="s1">
<option value="">---请选择省---</option>
</select>
<select id="s2">
<option value="">---请选择市---</option>
</select>
<select id="s3">
<option value="">---请选择县---</option>
</select>
</body>
</html>
Web层
@WebServlet(urlPatterns = "/getCityServlet")
public class getCityServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//设置响应数据格式
response.setContentType("application/json;charset=utf-8");
//获取页面上的提交过来的parentid=0
String pid = request.getParameter("pid");//0
int i = Integer.parseInt(pid);
//调用业务层
CityService service = new CityServiceImpl();
//调方法转pid
List<Province> list = service.queryById(i);
//创建json对象
ObjectMapper mapper = new ObjectMapper();
//响应给前端
mapper.writeValue(response.getOutputStream(),list);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
}
}
service层
public class CityServiceImpl implements CityService {
//注入
private CityDao dao = new CityDaoImpl();
@Override
public List<Province> queryById(int pid) {
return this.dao.queryById(pid);
}
}
dao层
public class CityDaoImpl implements CityDao {
//注入JdbcTemplate对象
private JdbcTemplate jdbcTemplate = new JdbcTemplate(JDBCUtils.getDataSource());
@Override
public List<Province> queryById(int pid) {
try {
String sql = "select * from province where parentid = ?";
return this.jdbcTemplate.query(sql,new BeanPropertyRowMapper<>(Province.class), pid);
} catch (DataAccessException e) {
e.printStackTrace();
throw new RuntimeException("查询失败！");
}
}
}
接口测试
