一、Ajax
二、代码
1.地区的选择案例:
area.jsp:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>区域展示</title>
<script src="/ajax/js/jquery-3.3.1.min.js"></script>
</head>
<body>
<select name="" id="prov">
<option value="-1">--请选择省份--</option>
</select>
<select name="" id="city">
<option value="-1">--请选择城市--</option>
</select>
<select name="" id="area">
<option value="-1">--请选择区--</option>
</select>
</body>
<script>
//1.填充省份
$.get("/ajax/area",{pid:0},function (data) {
console.log(data)
data.forEach(function (e,i) {
$('#prov').append('<option value="'+e.id+'">'+e.name+'</option>')
})
},"json")
//2.根据选中的某个省份,填充相应的城市
$("#prov").change(function () {
//清空上次的操作的结果
$('#city').html('<option value="-1">--请选择城市--</option>')
$.get("/ajax/area",{pid:this.value},function (data) {
data.forEach(function (e,i) {
$('#city').append('<option value="'+e.id+'">'+e.name+'</option>')
})
},"json")
})
//3.根据选中的某个城市,填充相应的区县
$("#city").change(function () {
//清空上次的操作的结果
$('#area').html('<option value="-1">--请选择区--</option>')
$.get("/ajax/area",{pid:this.value},function (data) {
data.forEach(function (e,i) {
$('#area').append('<option value="'+e.id+'">'+e.name+'</option>')
})
},"json")
})
</script>
</html>
servlet:
package com.web;
import com.alibaba.fastjson.JSON;
import com.c3p0.pojo.Area;
import com.c3p0.service.IAreaService;
import com.c3p0.service.impl.AreaServiceImpl;
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.List;
@WebServlet("/area")
public class AreaServlet extends HttpServlet {
private IAreaService service=new AreaServiceImpl();
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.获取参数pid
String pid = request.getParameter("pid");
//2.查询数据库中
List<Area> areas=service.findArea(pid);
System.out.println(areas);
//3.使用fastJson工具包,将集合数据转换成json数据
String areas_json = JSON.toJSONString(areas);
System.out.println(areas_json);
//4.response响应json数据
response.setContentType("application/json;charset=UTF-8");
response.getWriter().write(areas_json);
}
}
AjaxServlet:
package com.web;
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;
@WebServlet("/AjaxServlet")
public class AjaxServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String name = req.getParameter("name");
//设置响应编码
resp.setContentType("text/html;charset=UTF-8");
if (name.equals("tom")){//用户名已存在
resp.getWriter().write("用户名已存在");
}else {//用户名正常
resp.getWriter().write("用户名正常");
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String name = request.getParameter("name");
//设置响应编码
response.setContentType("text/html;charset=UTF-8");
if (name.equals("tom")){//用户名已存在
response.getWriter().write("{\"msg\":\"用户名已存在\",\"color\":\"red\"}");
}else {//用户名正常
response.getWriter().write("{\"msg\":\"用户名正常\",\"color\":\"green\"}");
}
}
}
js实现Ajax:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>用户注册</title>
</head>
<body>
<form action="">
姓名: <input type="text" name="name" value="" onblur="checkName(this.value)">
<span id="sp"></span><br>
年龄: <input type="text" name="age"><br>
邮箱: <input type="text" name="email"><br>
<input type="submit" value="注册">
</form>
</body>
<script>
function checkName(name) {
//1.创建一个可以发送异步请求的js对象
var req = new XMLHttpRequest();
//2.发送请求 get
/*req.open("GET","/ajax/AjaxServlet?name="+name);
req.send();*/
req.open("POST","/ajax/AjaxServlet?name="+name);
req.setRequestHeader("Content-type","application/x-www-form-urlencoded");
req.send("fname=Bill&lname=Gates");
//3.请求到达服务器,服务器处理请求并响应数据
//4.等到服务器响应就绪,接收响应数据
req.onreadystatechange=function (ev) {
if (req.readyState==4&&req.status==200){
document.getElementById("sp").innerText=req.responseText;
}
}
}
</script>
</html>
jq实现Ajax:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>使用jq来实现ajax</title>
</head>
<script src="/ajax/js/jquery-3.3.1.min.js"></script>
<body>
<form action="">
姓名: <input type="text" name="name" value="" onblur="checkName(this.value)">
<span id="sp"></span><br>
年龄: <input type="text" name="age"><br>
邮箱: <input type="text" name="email"><br>
<input type="submit" value="注册">
</form>
</body>
<script>
function checkName(v) {
/* $.ajax({
url:'/ajax/AjaxServlet',
data:'name='+v,
type:'GET',
success:function (msg) {
$('#sp').text(msg)
},
error:function () {
console.log('异步请求发送失败')
}
})*/
$.get('/ajax/AjaxServlet',{name:v},function (date) {
$('#sp').text(date.msg).css("color",date.color)
},"json")
}
</script>
</html>
总结
以上就是Ajax的全部内容,主要是分为js和jq两种方式来进行异步请求的。