1. 回顾

1. servlet的生命周期:
2. filter: 过滤放行和拦截一些资源。比如:黑白名单,登录校验，编码设置等。
（1）创建一个类并实现Filter接口以及重写接口的抽象方法
（2）在web.xml文件中注册filter过滤器以及请求路径与filter的映射关系。

2. ajax异步请求

回顾:

上面的请求都是服务响应的结果为网页或者路径。而今天讲解的ajax则不是这样的，ajax只响应数据。

2.1 什么是ajax

例如: 百度搜索框----使用了ajax.

当在百度搜索框触发键盘弹起事件时，会向服务器发送请求，服务器响应数据给事件。这里并没有响应整个页面给客户端。这就使用了ajax异步【局部】刷新

总结:（1） ajax一定是通过事件触发的。借助js。

（2）ajax服务器响应的不在是网页，而是数据。

2.2 简单使用ajax ----jquery

jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chmhttps://jquery.cuishifeng.cnjquery (v3.6.0) - jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。 | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务https://www.bootcdn.cn/jquery/借助: jquery

(1) 在网页中引入jquery库

<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>

注意: <script>必须使用双标签

(2)使用jquery--ajax

$.get(url,[data],[callback],[type])

ajax的语法:---get提交方式。 [] 表示可有可无。

//get post

jQuery.get(url, [data], [callback], [type])
jQuery.post(url, [data], [callback], [type])
get|post:表示提交方式.
url: 服务器路径
data: 向服务器发送请求时携带的参数。
callback: 回调函数，当服务器响应结果时，会调用的函数。
type: 指定服务器响应的数据类型。

例子:

<%@ page import="java.util.Date" %><%--Created by IntelliJ IDEA.User: ykqDate: 2022/5/20Time: 14:40To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html><head><title>$Title$</title><!--引入jquery库--><script type="text/javascript" src="js/jquery-3.5.1.min.js"></script></head><body><%--作用:让你看看浏览器有没有刷新页面--%><%=new Date()%><br><input type="button" onclick="ajax01()" value="点击"/></body><script>function ajax01(){//ajaxServlet01表示服务器路径  {name:ykq,age:18}请求的参数  function(result){回调函数 result服务响应的数据}$.get("ajaxServlet01",{"name":"ykq","age":18},function(result){alert(result); //弹出服务器响应的结果});}</script>
</html>

servlet:

package com.aaa.servlet;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.io.PrintWriter;@WebServlet(name = "AjaxServlet",urlPatterns = "/ajaxServlet01")
public class AjaxServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//接受请求参数String name = req.getParameter("name");String age = req.getParameter("age");System.out.println("name===="+name);System.out.println("age===="+age);//响应客户端数据。PrintWriter out = resp.getWriter();//获取out对象。out.print("hello ajax");//()中的内容就是响应给客户端的内容。//关闭输出对象out.flush();out.close();}
}

例子:注册功能:

zc.jsp:

<%--Created by IntelliJ IDEA.User: wzhDate: 2022/5/20Time: 15:20To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>Title</title><!--引入jquery库--><script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
</head>
<body><form action="/zcServlet" method="post">账号:<input type="text" name="username"/><br>密码:<input type="text" name="password"/><br>手机号:<input type="text" id="phone" name="phone" onblur="ckPhone()"/><span id="phoneMsg"></span><br><input type="submit" value="注册"/></form><script>/*get和postget地址栏可以看到提交的数据post地址栏看不到提交的数据ajax的提交方式和表单没有关系。* */function ckPhone(){var phone=$("#phone").val();  //id选择器: 通过id查询到dom元素 val():获取输入框输入的值//ajax也是与服务器交互的一种方式。服务器那段不在跳转页面 而是响应数据。$.post("CheckPhoneServlet",{"phone":phone},function(result){//ajax会根据服务器响应的结果 做一些业务操作。$("#phoneMsg").html(result);});}
</script>
</body>
</html>

CheckPhoneServlet:

package com.aaa.servlet;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.io.PrintWriter;@WebServlet(name = "CheckPhoneServlet",urlPatterns = "/CheckPhoneServlet")
public class CheckPhoneServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {req.setCharacterEncoding("utf-8");resp.setCharacterEncoding("utf-8");//接受手机号String phone = req.getParameter("phone");PrintWriter out = resp.getWriter();//查询数据库是否存在该手机号.if("15700085997".equals(phone)){out.print("<font color='red'>改手机号已经被注册</font>");}else{out.print("<font color='green'>该手机号可以使用</font>");}out.flush();out.close();}
}

2.3 服务响应的数据类型

(1)文本类型----它是默认的。

(2)json对象类型--->重要.---一定是最多的。

(3)xml类型----->一般不要，人工智能。微信小程序。

<people>
<name>张三</name>
<age>19</age>
</people>
这就是xml文件。

2.3.1 什么是json

JSON（JavaScript Object Notation）一种简单的数据格式，比xml更轻巧。JSON
是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。
JSON的规则很简单：对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’对”之间使用“,”（逗号）分隔。
[
{
"name":"XXX",
"age":18,
"address":"香港"
},
{
"name":"XXX",
"age":18,
"address":"香港"
},
]

规则如下:
1）映射用冒号（“：”）表示。名称:值
2）并列的数据之间用逗号（“，”）分隔。名称1:值1,名称2:值2
3）映射的集合（对象）用大括号（“{}”）表示。{名称1:值1,名称2:值2}
4）并列数据的集合（数组）用方括号(“[]”)表示。
[
{名称1:值,名称2:值2},
{名称1:值,名称2:值2}
]
5 元素值可具有的类型：string, number, object, array, true, false, null

只要给我json数据，我就可以从json数据中获取到我想要的任何属性值。

json格式的语法:

json对象: {名称:值,名称:值.....}
json集合: [{名称:值,名称:值},{名称:值,名称:值},{名称:值,名称:值}]
值: string, number, object, array, true, false, null

3.服务器如何返回json数据

html:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
</head>
<body><input type="button" id="btn" value="点击"/>
</body><script>$("#btn").click(function () { //为btn按钮绑定点击事件$.post("json02",function(result){//通过ajax向服务端发送请求//var parse = JSON.parse(result);//手动把服务器传递的json字符串转为json对象。alert(result);// alert(result.name);//不能 因为result还是一个文本类型 只是他符合json格式。},"json"); //json:告诉浏览器-把服务端返回的json格式字符串转换json对象。 默认为html文本类型。});
</script>
</html>

servlet:

package com.aaa.servlet;import com.aaa.entity.User;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.io.PrintWriter;@WebServlet(name = "AjaxServlet02",urlPatterns = "/json02")
public class AjaxServlet02 extends HttpServlet {@Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {req.setCharacterEncoding("utf-8");resp.setCharacterEncoding("utf-8");//业务处理得到一个用户对象---从数据库中查询的数据.User user = new User(1,"张三",18);//响应给客户端PrintWriter writer = resp.getWriter();//把java对象转换json格式的对象。如何转换：第一种手动转。 第二种借助第三方的工具来转。String json="{";json+="\"id\""+":"+"\""+user.getId()+"\",";json+="\"name\""+":"+"\""+user.getName()+"\",";json+="\"age\""+":"+"\""+user.getAge()+"\"";json+="}";System.out.println(json);writer.print(json); //前端需要服务端传递一个json或者文档.{"name":"张三","age":15};writer.flush();writer.close();}
}

上面自己把java对象转换json格式的字符串，这种方式非常麻烦。我们可以使用第三方工具来完成。

比如阿里云fastJson, hutool工具，spring框架自动等等。

我们阿里fastjson. 引入fastjson的jar文件。

 protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {req.setCharacterEncoding("utf-8");resp.setCharacterEncoding("utf-8");PrintWriter writer = resp.getWriter();List<User> list=new ArrayList<>();list.add(new User(2,"晓东",18));list.add(new User(3,"栗毅",17));list.add(new User(4,"陈俊艺",18));
//[{"age":18,"id":2,"name":"晓东"},{"age":17,"id":3,"name":"栗毅"},{"age":18,"id":4,"name":"陈俊艺"}]String listjson = JSON.toJSONString(list);writer.print(listjson); //前端需要服务端传递一个json或者文档.{"name":"张三","age":15};writer.flush();writer.close();}

点击某个按钮通过ajax向后台发送请求，后台返回一个json字符串[ 借助fastjson]。

4. 使用ajax完成一个案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>登陆页面</title>
<!--    引入jq--><script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
</head>
<body><div style="border:1px solid black;text-align: center;margin:0px auto"><form method="post">账号:<input type="text" name="username" id="username"/><br>密码:<input type="password" name="password" id="password"/><br><input type="button" value="登录" id="login"><input type="button" value="注册" id="register"><p id="errorMsg"></p></form></div><script>//为登录按钮绑定单击事件$("#login").click(function(){//获取账号密码输入框的值var username = $("#username").val();var password = $("#password").val();//alert(username);//通过ajax发送请求$.post("UserServlet?method=login",{"username":username,"password":password},function(result){if(result.code==2000){//alert(result.code);location.href="main.html";}else{$("#errorMsg").html("<font color='red'>账号或密码错误</font> ");}},"json");});$("#register").click(function (){location.href="register.html";});</script></body>
</html>

UserServlet:

package com.wzh.servlet; /*** @author : wzh* @date 2022/5/22 14:14:29*/import com.alibaba.fastjson.JSON;
import com.wzh.dao.UserDao;
import com.wzh.entity.User;
import com.wzh.util.CommonResult;import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.io.PrintWriter;@WebServlet(name = "UserServlet", urlPatterns = "/UserServlet")
public class UserServlet extends HttpServlet {UserDao userDao = new UserDao();@Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//接收请求传递的methodString method = req.getParameter("method");System.out.println(method);if("login".equals(method)){login(req,resp);}else if("register".equals(method)){register(req,resp);}else if("username".equals(method)){username(req,resp);}}//封装一个登陆方法private void login(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//获取ajax传递的账号密码String username = req.getParameter("username");String password = req.getParameter("password");System.out.println(username+" "+password);//调用dao方法判断账号密码是否正确User user = userDao.findByUsernameAndPassword(username, password);System.out.println(user);//获取输出对象PrintWriter writer = resp.getWriter();if(user!=null){HttpSession session = req.getSession();session.setAttribute("user",user);//返回json数据以后它的结构都是统一的//前端人员不好判断CommonResult commonResult = new CommonResult(2000,"登录成功",null);writer.print(JSON.toJSONString(commonResult));}else{CommonResult commonResult = new CommonResult(5000,"登录失败",null);writer.print(JSON.toJSONString(commonResult));}//关闭资源writer.flush();writer.close();}private void register(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//获取传递的值String username = req.getParameter("username");String password = req.getParameter("password");String relname = req.getParameter("relname");//调用dao方法 添加到数据库User user = new User(username,password,relname);userDao.insert(user);//获取输出对象PrintWriter writer = resp.getWriter();CommonResult commonResult = new CommonResult(2000,"注册成功",null);writer.print(JSON.toJSONString(commonResult));writer.flush();writer.close();}//封装一个验证账号是否存在private void username(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String username = req.getParameter("username");//获取输出对象PrintWriter writer = resp.getWriter();//调用dao方法判断账号是否存在User user = userDao.findByUsername(username);if(user!=null){CommonResult commonResult = new CommonResult(2000,"账号不可用",null);writer.print(JSON.toJSONString(commonResult));}else{CommonResult commonResult = new CommonResult(5000,"账号可用",null);writer.print(JSON.toJSONString(commonResult));}}
}

main.html:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
</head>
<body><div><table border="1" width="500"><caption>学生表</caption><thead><tr><th>编号</th><th>姓名</th><th>年龄</th><th>地址</th></tr></thead><tbody class="studentBody"></tbody></table></div><script>//页面加载完毕后执行的方法$(function(){initStudent();});//发送ajax事件function initStudent(){$.post("StudentServlet?method=findAll",function(result){var list = result.data;if(result.code==2000){$.each(list,function(k,v){//alert(v.id);$(".studentBody").append($("<tr></tr>").append($("<td></td>").html(v.id),$("<td></td>").html(v.name),$("<td></td>").html(v.age),$("<td></td>").html(v.address),$("<td></td>").html("<button type='button' id=delete onclick='deleteid(v.id)'>删除</button>"+"<button type='button' id=update>修改</button>")));});}},"json");}</script>
</body>
</html>

StudentServlet:

package com.wzh.servlet;import com.alibaba.fastjson.JSON;
import com.wzh.dao.StudentDao;
import com.wzh.entity.Student;
import com.wzh.util.CommonResult;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.io.PrintWriter;
import java.util.List;/*** @author : wzh* @date 2022/5/22 15:54:48*/
@WebServlet(name="StudentServlet",urlPatterns = "/StudentServlet")
public class StudentServlet extends HttpServlet {StudentDao studentDao = new StudentDao();@Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {req.setCharacterEncoding("utf-8");resp.setCharacterEncoding("utf-8");String method = req.getParameter("method");if("findAll".equals(method)){findAll(req,resp);}}private void findAll(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//调用dao方法查询所有记录List<Student> list = studentDao.findAll();//获取输出对象PrintWriter writer = resp.getWriter();CommonResult commonResult = new CommonResult(2000,"查询学生信息成功",list);writer.print(JSON.toJSONString(commonResult));writer.flush();writer.close();}
}

JavaWeb-----Ajax异步请求 json对象服务器如何返回json数据使用ajax完成一个案例相关推荐

php session 异步,Ajax异步请求PHP服务器，如何做到无阻塞响应原创学习与分享 PHP自学...
最近发现了一个ajax异步请求的问题,用$.post.$.get.$.ajax请求PHP服务器时,总是无法异步返回数据. 经多次测试才发现: -- 不同浏览器,请求不同域名-不阻塞:无需实验 -- 不 ...
javaWeb基础六：JQuery—Ajax异步请求
JQuery 之 Ajax 异步请求 1.1 Ajax简介 1.1.1 不使用Ajax存在的问题在发送请求得到响应时,我们常常只需要刷新网页局部的数据,而不是整个网页的资源(在网页资源过大时,效率会 ...
jquery的ajax异步请求接收返回json数据
jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发送设置的datatype设置为jsonp格式数据或json格式都可以.这篇文 ...
Json使用详解（配合Ajax异步请求）
1.Json 1.1概念 JavaScript Object Notation JavaScript对象表示法代码演示 Person p = new Person();p.setName(" ...
html弹窗赋值给查询框,bootstrap模态框动态赋值， ajax异步请求数据后给id为queryInfo的模态框赋值并弹出模态框（JS）...
/查询单个 function query(id) { $.ajax({ url : "/small/productServlet", async : true, type : &q ...
php原生的异步请求,原生JavaScript实现Ajax异步请求
ajax现在是一种非常流行的技术,现在虽然可以利用JQuery或者一些第三方插件甚至微软提供的一些控件可以方面的实现ajax功能,但是明白其原理也是非常重要的,下面是来使用纯javascript实现获 ...
JSP同步请求和html+ajax异步请求的两种方式
war包:包括所有的项目资源,只要从浏览器发起的都是属于请求,然后把资源响应给浏览器,解析显示出来. 方式一:HTML+ajax(跳转静态html也是属于请求响应,把整个页面响应给浏览器.) html ...
ajax异步请求——form表单提交及表单序列化提交
ajax异步请求 AJAX介绍 AJAX 指异步 JavaScript 及 XML(Asynchronous JavaScript And XML),它不是一种新的编程语言,而是一种使用现有标准的新方 ...
AJAX 异步请求详细教程
文章目录 AJAX 异步请求简介 Jquery 版 Ajax $.ajax() -- Jquery提供的 ajax 函数注册验证用户名是否可用 $.get() 与 $.post() Ajax 返回 ...

JavaWeb-----Ajax异步请求 json对象服务器如何返回json数据使用ajax完成一个案例

1. 回顾

2. ajax异步请求

2.1 什么是ajax

2.2 简单使用ajax ----jquery

2.3 服务响应的数据类型

2.3.1 什么是json

3.服务器如何返回json数据

4. 使用ajax完成一个案例

JavaWeb-----Ajax异步请求 json对象服务器如何返回json数据使用ajax完成一个案例相关推荐

最新文章

热门文章

JavaWeb-----Ajax异步请求 json对象 服务器如何返回json数据 使用ajax完成一个案例

1. 回顾

2. ajax异步请求

2.1 什么是ajax

2.2 简单使用ajax ----jquery

2.3 服务响应的数据类型

2.3.1 什么是json

3.服务器如何返回json数据

4. 使用ajax完成一个案例

JavaWeb-----Ajax异步请求 json对象 服务器如何返回json数据 使用ajax完成一个案例相关推荐

最新文章

热门文章

JavaWeb-----Ajax异步请求 json对象服务器如何返回json数据使用ajax完成一个案例

JavaWeb-----Ajax异步请求 json对象服务器如何返回json数据使用ajax完成一个案例相关推荐