目录
什么是Ajax
Ajax是Asynchronouns JavaScript and XML的缩写(异步的 JavaScript 和 XML)
Ajax是一种在无需重新加载整个网页的情况下,能够与服务器交换数据并更新部分网页的技术
Ajax最大的优点是页面无刷新,用户的体验非常好。并且使用异步方式与服务器通信,具有更加迅速的响应能力
使用Ajax实现无刷新登录
servlet.java
/**
* 处理登录功能
**/
@WebServlet("/login.do")
public class LoginServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req,resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//获取表单数据
String account = req.getParameter("account");
String password = req.getParameter("password");
//调用biz去数据库做验证
PrintWriter out = resp.getWriter();
if("root".equals(account)&&"root123".equals(password)){
out.println("yes");
}else{
out.println("no");
}
}
}
index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<div>
<p><input id="account" name="account"></p>
<p><input id="password" name="password"></p>
<button onclick="login()">登录</button>
</div>
<script>
function login() {
//取到页面的值
let account = $("#account").val()
let password = $("#password").val()
//通过jquery来发送请求ajax去后台 login.do
//1.使用ajax方法:get,post都支持
$.ajax({
url:"login.do",//访问地址
data:{account,password},//携带的数据
dataType:"text",//希望后台给你什么样子的数据
type: "get",//什么请求类型
success(resp){
if (resp.trim() === "yes") {
alert("登陆成功")
location.href = "index.jsp"
} else {
alert("登陆失败")
}
},//成功
error(){
}//错误
})
//2,使用get请求(更方便),get请求同理
/**
$.get(
//请求地址
"login.do",
//携带过去的数据 直接放数据,名字就是数据的名字
{account, password},
//回调函数 请求之后会调用这个函数
//resp就是后台给我的值
function (resp) {
//trim 去空格
//contains 包含
if (resp.trim() === "yes") {
alert("登陆成功")
location.href = "index.jsp"
} else {
alert("登陆失败")
}
},
"text" //希望后台给我的是普通的文本
)
**/
使用Ajax实现实时检查注册时用户名是否重复
FindServlet.java
@WebServlet("/find.do")
public class FindServlet extends HttpServlet {
//数据库中存在的名字
List<String> list = new ArrayList<String>();
{
list.add("小明");
list.add("小黄");
list.add("小黑");
list.add("小紫");
list.add("小绿");
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//去数据库查询
String name = req.getParameter("name");
boolean f=false;
for (String n : list) {
if(n.equals(name)){
f=true;
break;
}
}
//需要把结果告诉前台
PrintWriter out = resp.getWriter();
out.println(f);
}
}
regiest.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="js/jquery-3.3.1.js"></script>
<style>
#tip{
color: red;
}
</style>
</head>
<body>
<p><input id="name" onkeyup="yz()" type="text" placeholder="请输入你的用户名"><span id="tip"></span></p>
<button id="register">去注册</button>
<script>
function yz(){
//获取数据
let name=$("#name").val()
//发送请求
$.get("find.do",{name},(resp)=>{
if(resp.trim()==="true"){
$("#tip").text("用户名已经存在")
$("#register").prop("disabled",true)
}else{
$("#tip").text("")
$("#register").prop("disabled",false)
}
},"text")
}
</script>
</body>
</html>
使用Ajax实现搜索自动提示
SearchServlet.java
@WebServlet("/search.do")
public class SearchServlet extends HttpServlet {
// 数据库中存在的商品名字
List<String> list = new ArrayList<String>();
{
list.add("嘿嘿");
list.add("嘿哈");
list.add("苹果");
list.add("平安");
list.add("安乐");
list.add("呵呵");
list.add("哈哈");
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 去数据库查询 select * from goods where name like '%key%'
String keyWord = req.getParameter("keyWord");
// 新建一个集合
List<String> ns = new ArrayList<>();
for (String n : list) {
if (n.contains(keyWord)) {
ns.add(n);
}
}
// 设置响应的编码
resp.setCharacterEncoding("utf-8");
// 需要把结果告诉前台
PrintWriter out = resp.getWriter();
// 需要将集合变成json
// 1.需要获取转换对象
ObjectMapper mapper = new ObjectMapper();
// 2.调用方法
String str = mapper.writeValueAsString(ns);
out.println(str);
}
}
search.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
🔍<input id="keyWord" name="keyWord" onkeyup="search()">
<ul id="list">
</ul>
<script>
function search(){
//得到输入框的值
let keyWord=$("#keyWord").val()
//发送到负责检索商品名称的servlet
$.get("search.do",{keyWord},(resp)=>{
//清空原来的选项
$("#list").empty()
//resp现在是从字符串变成了数组
for(let n of resp){//foreach
$("#list").append("<li>"+n+"</li>")
}
},"json");
}
//json
//对象的字符串格式,json有固定的格式
//将对象变成json
//将json还原为对象
</script>
</body>
</html>
你要尽全力保护你的梦想。那些嘲笑你梦想的人,他们注定失败,他们想把你变成和他们一样。我坚信,只要心中有梦想,我就会与众不同。你也是。