目录
八、Ajax
1、Ajax简介
1.1同步、异步
同步：同步请求，客户端发出请求，等待服务器端返回结果，接着进行下一次的请求。如果有一个请求阻塞，那后面的请求将全部阻塞，能通过HTML和js发送
异步：异步请求，客户端发出请求，无需等待服务器端返回结果，接着进行下一次的请求。能通过js发送请求，主要使用在在线地图，商城等等。
1.2 Ajax介绍
marker language 标记语言，标签语言
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术， 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。 无需重新加载整个网页的情况下， 对网页的某部分进行更新。 （局部刷新）
1.3 Ajax语法
//Ajax形式语法
$.post(url,[data],[callback],[type])
//Ajax的get请求语法*************************
$.get("url",{},function(data){},"")
//1. url 代表的是我们向后台发出的请求 servlet的路径
//2.{} ：浏览器向后台传递键值对结构的数据 {key可以加引号也可以不加：value-值}--例{"name":username}
//3.function(data){}:data代表的是后台传递过来的数据,data是自定义的变量，名字可以随便写，但不要使用关键字
//4.”“ 代表后台传递过来的数据我们用什么样的形式去接收:xml, html, script, json, text, _default。
//ajax发出的post请求*************************
//只需要将get改为post即可
$.post("url",{},function(data){},"")
//Ajax原生语句*******************
$.ajax({
url:"userServlet？method=queryAll",
type:"get",//不写就默认是get请求
data:{}//对应的是get或post中的第二个参数，我们向后台传递的数据
success:function(d){
//后台执行成功执行的回调函数，d是传递回来的值
}
error:function(msg){
//后台执行失败执行的回调函数，一般是500异常，服务器错误
}
})
//如果需要将表单进行异步操作的话，可以对表单进行序列化的操作
[data]部分的参数是： $("#form的id").serialize()
//字符串传输
//1.如果后台传递给前台的是一个字符串的话，直接传输
//2.如果传递的是一个集合或是数组，那么就需要将这个集合转化为json字符串（引入第三方工具fastjson）
//注：fastjson漏洞很多,不建议使用,建议使用hutool 案例：
后端代码
BaseDao代码
dao层接口及实现类：
public interface IUserDao {
int addU(User user);
//查询所有用户的方法
List<Map<String, Object>> queryA();
//根据名字查询用户
List<Map<String, Object>> queryN(String name1);
}
public class UserDaoImpl extends BaseDao implements IUserDao {
@Override
public int addU(User user) {
String sql = "insert into t_user(username,password,salt,sex) values(?,?,?,?)";
return addOrUpdate(sql,user.getUsername(),user.getPassword(),user.getSalt(),user.getSex());
}
@Override
public List<Map<String, Object>> queryA() {
String sql = "select * from t_user";
return query(sql);
}
@Override
public List<Map<String, Object>> queryN(String name1) {
String sql = "select * from t_user where username=?";
return query(sql,name1);
}
}
实体类：
@Data
@ToString
@AllArgsConstructor
@NoArgsConstructor
public class User {
private Integer id;
private String username;
private String password;
private String salt;
private String sex;
}服务接口及实现类：
public interface IUserService {
boolean addUser(Map<String, String[]> parameterMap);
List<Map<String, Object>> queryAll();
boolean queryByName(String name1);
}
public class UserServiceImpl implements IUserService {
@Override
public boolean addUser(Map<String, String[]> parameterMap) {
User user = new User();
try {
BeanUtils.populate(user,parameterMap);
} catch (IllegalAccessException e) {
throw new RuntimeException(e);
} catch (InvocationTargetException e) {
throw new RuntimeException(e);
}
String salt = UUID.randomUUID().toString();
String md5Password = MD5Util.MD5EncodeUtf8(user.getPassword(), salt);
user.setPassword(md5Password);
user.setSalt(salt);
System.out.println(user);
IUserDao iUserDao = new UserDaoImpl();
int i = iUserDao.addU(user);
if (i>0){
return true;
}else{
return false;
}
}
@Override
public List<Map<String, Object>> queryAll() {
IUserDao iUserDao = new UserDaoImpl();
List<Map<String,Object>> allU = iUserDao.queryA();
return allU;
}
@Override
public boolean queryByName(String name1) {
IUserDao iUserDao = new UserDaoImpl();
List<Map<String,Object>> usermap = iUserDao.queryN(name1);
System.out.println(usermap);
if (usermap.size()>0){
return true;
}else {
return false;
}
}
}字符编码过滤器：
@WebFilter(filterName = "encode", urlPatterns={"/*"})
public class EncodeFilter implements Filter {
@Override
public void init(FilterConfig filterConfig) throws ServletException {
}
@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
// 处理
// HttpServletRequest
HttpServletRequest request =(HttpServletRequest)servletRequest;
HttpServletResponse response =(HttpServletResponse)servletResponse;
response.setCharacterEncoding("utf-8");
// 请求 设置字符编码格式
request.setCharacterEncoding("utf-8");
// filterchain 过滤器链 如果有下一个过滤器 就走下一个过滤器 如果没有就直接访问servlet
filterChain.doFilter(servletRequest,servletResponse);
}
@Override
public void destroy() {
}
}servlet：
@WebServlet(name = "UserServlet", value = "/userServlet")
public class UserServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String method = req.getParameter("method");
//当没有请求，但是输入了用户名时，利用失焦事件判定是否该名称已存在
if (method==null){
checkUser(req,resp);
}else{
switch (method){
case "add":
addUser(req,resp);
break;
case "query":
queryAll(req,resp);
break;
}
}
}
//查询所有的用户数据方法
private void queryAll(HttpServletRequest req, HttpServletResponse resp) throws IOException {
PrintWriter writer = resp.getWriter();
IUserService userService = new UserServiceImpl();
List<Map<String, Object>> mapList = userService.queryAll();
//将数组转化为JSON字符串的形式，以便于前端接收到数组形式的数据
String s = JSON.toJSONString(mapList);
writer.print(s);
writer.flush();
writer.close();
}
//添加用户的方法
private void addUser(HttpServletRequest req, HttpServletResponse resp) throws IOException {
PrintWriter writer = resp.getWriter();
//获取页面表单中的所有元素
Map<String, String[]> parameterMap = req.getParameterMap();
IUserService iUserService = new UserServiceImpl();
//将数据添加到数据库中，并返回添加的结果，是否添加成功，以便浏览器根据结果判断接下来的操作
boolean b = iUserService.addUser(parameterMap);
writer.print(b);
writer.flush();
writer.close();
}
//根据用户名查询数据库用户
private void checkUser(HttpServletRequest req, HttpServletResponse resp) throws IOException {
PrintWriter writer = resp.getWriter();
//获取页面中name为name1，
String name1 = req.getParameter("name1");
IUserService iUserService = new UserServiceImpl();
boolean queryStatus = iUserService.queryByName(name1);
//设置一个要打印的字符串初始值，如果能查询到，就设置为0（表示不能被添加）
String msg = "";
if (queryStatus){
msg="0";
}else {
msg="1";
}
writer.print(msg);
writer.flush();
writer.close();
}
}前端代码：Ajax语言
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>登录</title>
<style>
#msg{
color: hotpink;
}
</style>
</head>
<body>
<form id="myform" method="post" onsubmit="return check()">
用户名：<input type="text" name="username" id="username"><span id="msg"></span><br>
密 码：<input type="password" name="password"><br>
性 别：<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女<br>
<input type="button" onclick="addUser()" value="提交" >
</form>
<table border="1" cellspacing="0">
<thead>
<tr>
<th>id</th>
<th>username</th>
<th>sex</th>
</tr>
</thead>
<%--将tbody给个id，为了后面将内容填充到表格的tbody中--%>
<tbody id="tb">
</tbody>
</table>
<%-- 在web下创建一个static包，在static下面建立js、jquery、image包，将jquery的api放到jquery中 --%>
<%--引入jQuery中的包，使用jquery方法--%>
<script type="text/javascript" src="static/jquery-3.4.1.js"></script>
<script>
//设置一个能否提交的初始状态
var status = false;
//初始化函数；在这里面的函数在页面加载时，就加载
$(function (){
checkUserName();
queryAll();
})
function queryAll(){
$.get("userServlet?method=query",
{},function (d){
//控制台输出取到的d值为多少
// console.log(JSON.stringify(d));
var trs = "";
for (let i = 0; i < d.length; i++) {
var id = d[i].id;
var username = d[i].username;
var sex = d[i].sex;
trs+="<tr><td>"+id+"</td><td>"+username+"</td><td>"+sex+"</td></tr>";
}
//将tr放到table中：tb是tbody的id
$("#tb").html(trs);
//最后设置以json字符串形式接收
},"json")
}
function addUser(){
//当数据库中没有该用户名时才能够提交
if (status==true){
$.get("userServlet?method=add",
$("#myform").serialize(),
function (d){
queryAll();
})
}
}
function checkUserName(){
$("#username").on("blur",function(){
//获取到id为username的输入框中的值，命名为name
var name = $("#username").val();
$.get("userServlet",
//页面传到后台的数据，将name传到后台
{"name1":name},
//d是后台传递过来的数据
function (d){
//如果后台传送过来的数据是0，就代表用户名已经存在，那就将用户名后的span中显示该用户名已存在
if(d=="0"){
$("#msg").html("该用户名已存在");
status=false;
}else{
$("#msg").html("该用户名还未存在");
//将提交状态设置为可以提交
status=true;
}
})
})
}
//根据用户名是否存在来判断提交状态，前提是当前提交表单的类型是submit
function check(){
if(status=="true"){
return true;
}else{
return false
}
}
</script>
</body>
</html>
823
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
