目录
一、AJAX概述
二、AJAX快速入门
<script>
//1. 创建核心对象
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//2. 发送请求
xhttp.open("GET", "http://localhost:8080/ajax-demo/ajaxServlet");
xhttp.send();
//3. 获取响应
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
alert(this.responseText);
}
};
</script>三、案例——使用AJAX验证用户名是否存在
SelectUserSevlet伪代码：
@WebServlet("/selectUserServlet")
public class SelectUserServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1. 接收用户名
String username = request.getParameter("username");
//2. 调用service查询User对象
boolean flag = true;//模拟用户名存在
//3. 响应标记
response.getWriter().write("" + flag);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
}register.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎注册</title>
<link href="css/register.css" rel="stylesheet">
</head>
<body>
<div class="form-div">
<div class="reg-content">
<h1>欢迎注册</h1>
<span>已有帐号？</span> <a href="login.html">登录</a>
</div>
<form id="reg-form" action="#" method="get">
<table>
<tr>
<td>用户名</td>
<td class="inputs">
<input name="username" type="text" id="username">
<br>
<span id="username_err" class="err_msg" style="display: none">用户名已存在</span>
</td>
</tr>
<tr>
<td>密码</td>
<td class="inputs">
<input name="password" type="password" id="password">
<br>
<span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
</td>
</tr>
<tr>
<td>验证码</td>
<td class="inputs">
<input name="checkCode" type="text" id="checkCode">
<img src="imgs/a.jpg">
<a href="#" id="changeImg">看不清？</a>
</td>
</tr>
</table>
<div class="buttons">
<input value="注 册" type="submit" id="reg_btn">
</div>
<br class="clear">
</form>
</div>
<script>
//1. 给用户名输入框绑定 失去焦点事件
document.getElementById("username").onblur = function () {
//2. 发送ajax请求
// 获取用户名的值
var username = this.value;
//2.1. 创建核心对象
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.2. 发送请求
xhttp.open("GET", "http://localhost:8080/ajax-demo/selectUserServlet?username="+username);
xhttp.send();
//2.3. 获取响应
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
//alert(this.responseText);
//判断
if(this.responseText == "true"){
//用户名存在，显示提示信息
document.getElementById("username_err").style.display = '';
}else {
//用户名不存在 ，清除提示信息
document.getElementById("username_err").style.display = 'none';
}
}
};
}
</script>
</body>
</html>四、Axios框架
Servlet：
@WebServlet("/axiosServlet")
public class AxiosServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("get...");
//1. 接收请求参数
String username = request.getParameter("username");
System.out.println(username);
//2. 响应数据
response.getWriter().write("hello Axios~");
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("post...");
this.doGet(request, response);
}
}HTML页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="js/axios-0.18.0.js"></script>
<script>
// //1.get
// axios({
// method:"get",
// url:"http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan"
// }).then(function (resp){
// alert(resp.data);
// })
//1.post
axios({
method:"post",
url:"http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan",
data:"username=zhangsan"
}).then(function (resp){
alert(resp.data);
})
</script>
</body>
</html>
五、JSON
5.1 JSON概述
5.2 JSON基础语法
5.3 JSON数据和Java对象转换
public class FastJsonDemo {
public static void main(String[] args) {
//1.将Java对象转为JSON字符串
User user = new User();
user.setId(1);
user.setUsername("zhangsan");
user.setPassword("123");
String jsonString = JSON.toJSONString(user);
System.out.println(jsonString);
//2.将JSON字符串转为Java对象
User u = JSON.parseObject("{\"id\":1,\"password\":\"123\",\"username\":\"zhangsan\"}",User.class);
System.out.println(u);
}
}5.4 案例——查询所有（AJAX、JSON）
Servlet：
@WebServlet("/selectAllServlet")
public class SelectAllServlet extends HttpServlet {
private BrandService brandService = new BrandService();
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.调用Service查询
List<Brand> brands = brandService.selectAll();
//2.将集合转换为JSON数据 序列化
String jsonString = JSON.toJSONString(brands);
//3.响应数据
response.setContentType("text/json;charset=utf-8");
response.getWriter().write(jsonString);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
}brand.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="addBrand.html"><input type="button" value="新增"></a><br>
<hr>
<table id="brandTable" border="1" cellspacing="0" width="100%">
<!-- <tr align="center">-->
<!-- <td>1</td>-->
<!-- <td>三只松鼠</td>-->
<!-- <td>三只松鼠</td>-->
<!-- <td>100</td>-->
<!-- <td>三只松鼠，好吃不上火</td>-->
<!-- <td>启用</td>-->
<!-- <td><a href="#">修改</a> <a href="#">删除</a></td>-->
<!-- </tr>-->
<!-- <tr align="center">-->
<!-- <td>2</td>-->
<!-- <td>优衣库</td>-->
<!-- <td>优衣库</td>-->
<!-- <td>10</td>-->
<!-- <td>优衣库，服适人生</td>-->
<!-- <td>禁用</td>-->
<!-- <td><a href="#">修改</a> <a href="#">删除</a></td>-->
<!-- </tr>-->
<!-- <tr align="center">-->
<!-- <td>3</td>-->
<!-- <td>小米</td>-->
<!-- <td>小米科技有限公司</td>-->
<!-- <td>1000</td>-->
<!-- <td>为发烧而生</td>-->
<!-- <td>启用</td>-->
<!-- <td><a href="#">修改</a> <a href="#">删除</a></td>-->
<!-- </tr>-->
</table>
<script src="js/axios-0.18.0.js"></script>
<script>
//1.当页面加载完成后，发送AJAX请求
window.onload = function (){
//2.发送ajax请求
axios({
method:"get",
url:"http://localhost:8080/brand-demo/selectAllServlet"
}).then(function (resp){
//获取数据
let brands = resp.data;
let tableData = "<tr>\n" +
" <th>序号</th>\n" +
" <th>品牌名称</th>\n" +
" <th>企业名称</th>\n" +
" <th>排序</th>\n" +
" <th>品牌介绍</th>\n" +
" <th>状态</th>\n" +
" <th>操作</th>\n" +
" </tr>";
for (let i = 0; i < brands.length; i++) {
let brand = brands[i];
tableData +=" <tr align=\"center\">\n" +
" <td>"+(i+1)+"</td>\n" +
" <td>"+brand.brandName+"</td>\n" +
" <td>"+brand.companyName+"</td>\n" +
" <td>"+brand.ordered+"</td>\n" +
" <td>"+brand.description+"</td>\n" +
" <td>"+brand.status+"</td>\n" +
"\n" +
" <td><a href=\"#\">修改</a> <a href=\"#\">删除</a></td>\n" +
" </tr>"
}
//设置显示表格数据
document.getElementById("brandTable").innerHTML = tableData;
})
}
</script>
</body>
</html>5.5 案例——新增品牌
Servlet：
@WebServlet("/addServlet")
public class AddServlet extends HttpServlet {
private BrandService brandService = new BrandService();
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1. 接收数据,request.getParameter 不能接收json的数据
/* String brandName = request.getParameter("brandName");
System.out.println(brandName);*/
// 获取请求体数据
BufferedReader br = request.getReader();
String params = br.readLine();
// 将JSON字符串转为Java对象
Brand brand = JSON.parseObject(params, Brand.class);
//2. 调用service 添加
brandService.add(brand);
//3. 响应成功标识
response.getWriter().write("success");
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
}html页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加品牌</title>
</head>
<body>
<h3>添加品牌</h3>
<form action="" method="post">
品牌名称：<input id="brandName" name="brandName"><br>
企业名称：<input id="companyName" name="companyName"><br>
排序：<input id="ordered" name="ordered"><br>
描述信息：<textarea rows="5" cols="20" id="description" name="description"></textarea><br>
状态：
<input type="radio" name="status" value="0">禁用
<input type="radio" name="status" value="1">启用<br>
<input type="button" id="btn" value="提交">
</form>
<script src="js/axios-0.18.0.js"></script>
<script>
//1.给button按钮绑定单击事件
document.getElementById("btn").onclick = function (){
//将表单数据转为json
var formData = {
brandName: "",
companyName: "",
ordered: "",
description: "",
status: ""
}
//获取表单数据
let brandName = document.getElementById("brandName").value;
//设置数据
formData.brandName = brandName;
//获取表单数据
let companyName = document.getElementById("companyName").value;
//设置数据
formData.companyName = companyName;
//获取表单数据
let ordered = document.getElementById("ordered").value;
//设置数据
formData.ordered = ordered;
//获取表单数据
let description = document.getElementById("description").value;
//设置数据
formData.description = description; //获取表单数据
let status = document.getElementsByName("status");
for (let i = 0; i < status.length; i++) {
if (status[i].spellcheck){
//
formData.status = status[i].value;
}
}
console.log(formData);
//2.发送ajax请求
axios({
method:"post",
url:"http://localhost:8080/brand-demo/addServlet",
data:formData
}).then(function (resp){
//判断响应数据是否为success
if (resp.data == "success"){
//成功则跳转到品牌列表
location.href = "http://localhost:8080/brand-demo/brand.html"
}
})
}
</script>
</body>
</html>