投稿
  1. 首页
  2. html-js-css

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

微传单 • 2022-6-10 • html-js-css • 阅读 31

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

1. 回顾

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

2. ajax异步请求

回顾:

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

2.1 什么是ajax

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

 当在百度搜索框触发键盘d起事件时，会向服务器发送请求，服务器响应数据给事件。这里并没有响应整个页面给客户端。这就使用了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库

   
   

注意: <%--作用:让你看看浏览器有没有刷新页面--%> <%=new Date()%>

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" %>


    Title

 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("改手机号已经被注册");
        }else{
            out.print("该手机号可以使用");
        }

        out.flush();
        out.close();
    }
}

2.3 服务响应的数据类型

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

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

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


    张三
     19

这就是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:




    
    Title

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 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完成一个案例

login.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:




    
    Title
    


    
        

            学生表
            
                

                    编号
                    姓名
                    年龄
                    地址

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 list = studentDao.findAll();
        //获取输出对象
        PrintWriter writer = resp.getWriter();
        CommonResult commonResult = new CommonResult(2000,"查询学生信息成功",list);
        writer.print(JSON.toJSONString(commonResult));

        writer.flush();
        writer.close();
    }
}

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1296585.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
微传单 微传单 一级用户组
0 0
上一篇 2022-06-10
下一篇 2022-06-10

发表评论

登录后才能评论

评论列表（0条）

保存