AJAX
携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情
1.初识Ajax
熟悉Ajax的四个步骤，前后端配合
前端代码 index.jsp
<%-- Created by IntelliJ IDEA. --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title></title>
</head>
<body>
<h1 id="title" >hello</h1>
<button id="btn" >go</button>
<script>
//获取对象
var title = document.getElementById("title");
var btn = document.getElementById("btn");
btn.onclick=function () {
//1.创建对象
var req = new XMLHttpRequest();
//2.连接服务器（请求方式，地址）
req.open('get','/cms/ajax') //注意cms前面有/
//3.发送请求
req.send(null);
//4.事件监听
req.onreadystatechange=function (){
if (req.status==200&&req.readyState==4){
var data = req.responseText;//后端返回的数据
console.log(data);
title.innerHTML=data;
}
}
}
</script>
</body>
</html>
后端代码 AjaxController类
package asjy.controller;
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("/ajax")
public class AjaxController extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
System.out.println("ajax............");//测试是否连接到后台
response.getWriter().print("哈哈");
//传到前台的数据，后面不能再重定向和请求转发，不能写成println
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
}
效果
hello=》哈哈
进入页面后直接跳转到哈哈，只需要把ajax写在前面即可
2.表单中使用ajax
前端代码 index.jsp
<%-- Created by IntelliJ IDEA. --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title></title>
</head>
<body>
<center>
<form method="get" action="/cms/ajax" onsubmit="return show()">
<table id="">
<tr>
<td>姓名</td>
<td><input type="text" name="username" id="username">
<span id="errorName"> </span>
</td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="password" id="password"> </td>
</tr>
</table>
</form>
</center>
<script>
var username = document.getElementById("username");
var errorName = document.getElementById("errorName");
username.onblur=function () { //失去焦点事件
// alert(1234);
var req = new XMLHttpRequest();
//连接数据库
req.open("get","/cms/ajax?username="+username.value); //获取表单name为username的value值
req.send(null);
req.onreadystatechange=function () {
if (req.status=200&&req.readyState==4){
var data=req.responseText;
console.log(data);
if (data =="no"){
errorName.innerHTML="用户已存在,重新注册";
}else{
errorName.innerHTML="可以注册";
}
}
}
}
function show(){
//验证 各个表单的值
return false;
}
</script>
</body>
</html>
后端代码 AjaxController类
package asjy.controller;
import asjy.service.UserService;
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("/ajax")
public class AjaxController extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
// System.out.println("ajax............");
String username = request.getParameter("username"); //从前台传到后台
// System.out.println("username="+username);
UserService userService = new UserService();
boolean flag = userService.findUserByName(username);
if(flag){
//用户名已存在
response.getWriter().print("no"); //从后台传到前台
}else{
//用户名不存在
response.getWriter().print("ok");//从后台传到前台
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
}
效果
3.下拉列表中使用Ajax
前端代码 index.jsp
<%-- Created by IntelliJ IDEA. --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title></title>
</head>
<body>
<select name="cap" id="cap">
<option value="-1">请选择省会</option>
<option value="0">黑龙江</option>
<option value="1">辽宁</option>
</select>
<select name="city" id="city">
<option>请选择城市</option>
</select>
<script>
var cap = document.getElementById("cap");
var city = document.getElementById("city");
//ajax
cap.onchange=function(){
city.innerHTML="<option>请选择城市</option>"
var req=new XMLHttpRequest();
req.open("get","/cms/ajax?cap="+cap.value);
req.send(null);
req.onreadystatechange=function () {
if (req.status ==200&&req.readyState==4){
var data =req.responseText;
console.log(data);
//先把字符串转成数组
var arr = data.substring(1,data.length-1).split(", ");
//注意substring（）和substr（）的区别，前者第二个参数是索引值，后者第二个参数是字符串长度
console.log(arr);
//遍历数组
for (var i=0;i<arr.length;i++){
//渲染option，拼option
city.innerHTML+="<option>"+arr[i]+"</option>";
}
}
}
}
</script>
</body>
</html>
后端代码AjaxController
package asjy.controller;
import asjy.service.UserService;
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.Arrays;
import java.util.List;
@WebServlet("/ajax")
public class AjaxController extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
// System.out.println("ajax............");
String cap = request.getParameter("cap");
System.out.println("cap="+cap);
// dao准备数组
//黑龙江
List<String> heiList= Arrays.asList("哈尔滨","齐齐哈尔","牡丹江","佳木斯");
//辽宁
List<String> liaoList= Arrays.asList("沈阳","大连","鞍山","锦州");
if("0".equals(cap)){
response.getWriter().print(heiList);
}else if ("1".equals(cap)){
response.getWriter().print(liaoList);
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
}
