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

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

时间：2020-04-29 06:10:33

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 chmjquery (v3.6.0) - jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。 | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务/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: /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><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: /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><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><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 /5/22 14:14:29*/import com.alibaba.fastjson.JSON;import com.wzh.dao.UserDao;import com.wzh.entity.User;import com.monResult;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.monResult;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 /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();}}

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。