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

码农终将翻身

已于 2022-05-22 22:19:59 修改

阅读量2.6k

点赞数 4

分类专栏： web Java 文章标签： ajax 前端 javascript

于 2022-05-20 20:53:07 首次发布

本文链接：https://blog.csdn.net/weixin_68509156/article/details/124889604

版权

Java 同时被 2 个专栏收录

39 篇文章 8 订阅

订阅专栏

web

8 篇文章 0 订阅

订阅专栏

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.cn jquery (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: ykq
  Date: 2022/5/20
  Time: 14:40
  To 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 {


    @Override
    protected 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: wzh
  Date: 2022/5/20
  Time: 15:20
  To 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和post
        get地址栏可以看到提交的数据
        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 {

    @Override
    protected 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 {


    @Override
    protected 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();

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //接收请求传递的method
        String 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();
    @Override
    protected 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();
    }
}