一.理解Ajax
Ajax:简单概述一下就是不刷新整个界面,只刷新局部。
举例:列如进行登录时,假如输入密码或账号错误时,重新回到登录界面时,框内的值都会被清空,而Ajax就可以很好的解决这个问题。
好处:只更新部分界面,有效利用宽带,提高用户体验。
主要有三个方法:$.get $.post $.ajax,get和post只有单词不同
语法:$.get("url",data,fun(){},"text")
$.post("url",data,fun(){},"text")
$.ajax({
url:"",
type:"get|post",
data:{},
dataType:"",
success(){}
})
都需要导入jquery
二.代码展示
案例1.登录代码,$.Ajax和$.get方法
<body>
<p><input type="text" id="account" name="account"></p>
<p><input type="text" id="password" name="password"></p>
<button onclick="login()">登录</button>
<script>
//无刷新
function login(){
//取到页面的值
let account=$("#account").val()
let password=$("#password").val()
//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(){
}//代码错误时,基本上用不到
})
//get请求
//post请求,只需要改个单词
$.get(
//请求地址
"login.do",
//携带过去的数据,直接放数据,名字就是数据的名字
{account,password},
//回调函数,请求后会调用
//resp就是后台给我的值,resp可以随便给
function(resp){
//trim去空格
//contains
if(resp.trim()==="yes"){
alert("登陆成功")
location.href="index.jsp"
}else{
alert("登录失败")
}
},
"text"//希望后台给我的是文本
)
/**
$.get("url",data,fun(){},"text")
$.post("url",data,fun(){},"text")
$.ajax({
url:"",
type:"get|post",
data:{},
dataType:"",
success(){}
})
**/
}
</script>
</body>
过滤器代码展示filter
package filter;
import java.io.IOException;
import java.nio.charset.StandardCharsets;
import javax.servlet.FilterChain;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebFilter;
@WebFilter("/*")
public class Filter implements javax.servlet.Filter{
@Override
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
throws IOException, ServletException {
//使编码为中文
request.setCharacterEncoding("utf-8");
//如果上面语句不生效就用破碎重组
// String account=request.getParameter("account");
// account=new String(account.getBytes(StandardCharsets.ISO_8859_1),StandardCharsets.UTF_8);
// String password=request.getParameter("password");
// password=new String(password.getBytes(StandardCharsets.ISO_8859_1),StandardCharsets.UTF_8);
chain.doFilter(request, response);
}
}
sevlet代码展示
package Servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@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");
PrintWriter out = resp.getWriter();//通过响应获得输出对象
if("root".equals(account)&&"root123".equals(password)){
out.println("yes");
}else{
out.println("no");
}
}
}
案例2.注册功能代码
$("#register").prop("disabled",true),prop设置按钮是否禁用
<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>
sevlet代码展示
package Servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/find.do")
public class FindServlet extends HttpServlet{
//模拟数据库,往集合里面添加数据充当数据库
List<String> list=new ArrayList<>();
{
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");
PrintWriter out = resp.getWriter();
boolean f=false;
for (String n : list) {
if(n.equals(name)) {
f=true;
break;
}
}
out.print(f);//把值给到前台
}
}
案例3:搜索提示功能代码展示
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</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()
$.get(
"search.do",
{keyWord},
(resp)=>{
//清空框内值
$("#list").empty()
//resp加json可变为数组
for(let n of resp){//foreach
$("#list").append("<li>"+n+"</li>")
}
},"json"
);
}
</script>
</body>
sevlet代码展示
package Servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
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 com.fasterxml.jackson.databind.ObjectMapper;
@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("拍拍奶茶");
}
@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 keyWord=req.getParameter("keyWord");
//建一个新集合
List<String> ns=new ArrayList<String>();
for (String n : list) {
if(n.contains(keyWord)) {
ns.add(n);
}
}
//设置响应编码
req.setCharacterEncoding("utf-8");
//通过响应获得输出
PrintWriter out = resp.getWriter();
//需要将集合变成json
//1.需要获得转换对象
ObjectMapper mapper=new ObjectMapper();
//2.调用方法
String str=mapper.writeValueAsString(ns);
out.print(str);
}
}
将集合变成json的方法
1.获得转换对象
ObjectMapper mapper=new ObjectMapper();
2.调用方法
String str=mapper.writeValueAsString(ns)填集合
打印ou.print()
总结:今天的分享就到这里了