栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > Java

AJAX & Axios & JSON (外加JSON数据格式案例)

Java 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

AJAX & Axios & JSON (外加JSON数据格式案例)

 

 同步和异步:

一、Ajax 快速入门

代码演示如下: 

服务端:AjaxServlet:

package com.itheima.web.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;

@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 1. 响应给客户端数据
        response.getWriter().write("hello ajax~");
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

客户端:




    
    Title








注意细节:

1、发送请求的地址要是总的URL地址

2、默认为true 异步

3、客户端的三个步骤可以在 ​​​​​​网站获取(直接复制代码即可)w3school 在线教程全球最大的中文 Web 技术教程。https://www.w3school.com.cn/

开启服务器访问客户端演示结果:

 

 二、例子演示

代码演示如下:

服务端:SelectUserServlet

package com.itheima.web.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;

@WebServlet("/selectUserServlet")
public class SelectUserServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        // 1 接收用户名参数
        String username =request.getParameter("username");

        // 2 调用service查询User对象
        // (我们这里定义一个变量为true假设查询的User用户名是存在的)
        boolean flag =true;

        // 3 响应给前端标记(假设我们这里响应 “true”)
        response.getWriter().write("" + flag);  // 这里其实响应的是字符串型的true  (因为空串 + 字符型true)

    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

客户端(前端):register.html

注意1:重点代码在ajax请求部分(要看的懂)

注意2:要在

开启服务器后访问客户端(前端):

三、Axios

作用:Axios 是 Ajax的代码简写

细节:用Axios请求 增删改用post请求格式  查询用get请求格式

3.1、Axios快速入门:

代码演示如下:

服务端:AxiosServlet

package com.itheima.web.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;

@WebServlet("/axiosServlet")
public class AxiosServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        System.out.println("这是前端以get请求方式请求服务端的....");

        // 1. 接收前端的请求参数
        String username =request.getParameter("username");
        System.out.println(username);

        // 2. 响应给客户端数据
        response.getWriter().write("hello axios~");
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        System.out.println("这是前端以post请求方式请求服务端的....");
        this.doGet(request, response);
    }
}

前端:02-axios-demo.html




    
    Title













 开启服务器访问前端页面结果演示:(post请求方式不再演示)

3.2、Axios请求方式别名:

代码演示如下 (以post方式演示):

前端:03-axios-demo2.html




    
    Title







 





开启服务器访问前端所演示的结果和上面的结果一样:(前端拿到了服务端响应的数据)

四、JSON 4.1、JSON 基础语法

作用:JSON语法多用于前端和后端之间的交互问题(前端基本上是以JSON数据格式请求后端的 ,那么后端就需要进行数据格式的转换,转换成Java数据)

 代码演示如下:




    
    Title













 

4.2、JSON 数据和java对象转换(重点)

1、解决响应时展示给前端页面中文乱码问题 (看response笔记 把html改成json即可

response.setContentType("text/json;charset=utf-8");

 使用步骤:

下面模拟前端和后端交互:

 代码演示如下:

User类:

package com.itheima.json;

public class User {

    private String username;
    private String password;
    private String addr;

    // getter and setter

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getAddr() {
        return addr;
    }

    public void setAddr(String addr) {
        this.addr = addr;
    }

    // toString方法

    @Override
    public String toString() {
        return "User{" +
                "用户名='" + username + ''' +
                ", 密码='" + password + ''' +
                ", 地址='" + addr + ''' +
                '}';
    }
}

测试类:FactJsonTest

细节:Java数据转换成的JSON数据 最终的JSON数据是以数组的形式存在的

package com.itheima.json;
import com.alibaba.fastjson.JSON;


public class FactJsonTest {

    public static void main(String[] args) {

        // 1. 模拟将Java对象转成JSON字符串

        // 假设我们服务端将逻辑代码封装成User对象属性中转成JSON 响应给前端JSON数据
        User user =new User();
        user.setUsername("kitty1");
        user.setPassword("1");
        user.setAddr("郑州");

        // 将Java对象转成JSON字符串
        String jsonString =JSON.toJSONString(user);
        System.out.println(jsonString); // {"addr":"郑州","password":"1","username":"kitty1"}


        // 2. 模拟将JSON字符串转成Java对象

        // 也就是说:前端请求的数据是JSON形式,我们后端要先把JSON数据转换成Java对象 然后我们后端才能做各种处理逻辑
        // 假设前端请求的数据字符串:{"addr":"郑州","password":"1","username":"kitty1"}
        User u =JSON.parseObject("{"addr":"郑州","password":"1","username":"kitty1"}",User.class); // User.class :转换成User类型的类
        System.out.println(u);  // 打印的是User类中的toString方法 (没有toString方法打印则为对象内存地址)


    }
}

FactJsonTest测试类输出结果:

五、例子 前后端以JAVA数据和JSON数据相互转换的例子 (查询所有 & 新增品牌)

前期准备:

思路总体如下以brandName数据为例演示如下:

要求1:前端以JSON数据形式请求后端路径资源,后端需要做的逻辑思路如下: 

以brandName数据为例演示如下:

前端代码:(只需要看懂axios部分即可)





    
    添加品牌


添加品牌
品牌名称:
企业名称:
排序:
描述信息:
状态: 禁用 启用

前端细节:

 点击提交事件后 F12 查看 请求体数据:(这个请求体数据以后无论有多长都只是一行,我们后端就需要先获取到该请求体的数据 该请求体数据是JSON数据格式 (因为前端是以JSON格式数据请求的,最终我们需要把JSON格式数据转换成Java格式数据 最后进行其他的逻辑操作 ))

 后端(服务器):

小细节:服务器端需要先抓包获取到前端请求的JSON数据 然后把JSON数据转换成Java数据格式

最后进行种种的逻辑处理(如:添加商品、修改商品、删除商品等逻辑)

package com.itheima.web;
import com.alibaba.fastjson.JSON;
import com.itheima.pojo.Brand;
import com.itheima.service.BrandService;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.BufferedReader;
import java.io.IOException;

@WebServlet("/addServlet")
public class AddServlet extends HttpServlet {

    // new BrandService对象
    private BrandService brandService = new BrandService();

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 接收客户端传递过来添加的数据
        

        // 1、获取请求体数据
        BufferedReader bufferedReader =request.getReader();
        // 读一行 (就读刚才那个F12抓包到的请求体数据:{brandName:"kitty"})
        String params =bufferedReader.readLine();
        // System.out.println(params); // {"brandName":"Kitty"}    可以看出我们把前端以JSON格式请求的数据拿到手了 我们需要进行转换数据格式

        // 2、将JSON数据格式转换为java对象格式
        Brand brand =JSON.parseObject(params,Brand.class);
        System.out.println(brand);


    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

 结果:

        开启服务器:访问前端(结果应该是前端请求到服务端做出的一些操作)

查询所有&新增商品总代码

注意:前端的东西 只需要看懂 axios即可

 查询所有:

Brand.html:




    
    Title




序号 品牌名称 企业名称 排序 品牌介绍 状态 操作
1 三只松鼠 三只松鼠 100 三只松鼠,好吃不上火 启用 修改 删除
2 优衣库 优衣库 10 优衣库,服适人生 禁用 修改 删除
3 小米 小米科技有限公司 1000 为发烧而生 启用 修改 删除

后端代码:

selectAllServlet:( 这里把java数据转换成json数据响应给前端 )

package com.itheima.web;
import com.alibaba.fastjson.JSON;
import com.itheima.pojo.Brand;
import com.itheima.service.BrandService;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.util.List;

@WebServlet("/selectAllServlet")
public class SelectAllServlet extends HttpServlet {
    // 调用BrandService对象中的查询所有的方法
    private BrandService brandService =new BrandService();

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        // 1 调用BrandService对象中的查询所有的方法
        List brands =brandService.selectAll();

        // 2 把查询出来的集合数据转换成JSON数据形式 展示给前端
        
        String jsonString =JSON.toJSONString(brands);

        // 解决响应时展示给前端页面中文乱码问题 (看response笔记 把html改成json即可)
        response.setContentType("text/json;charset=utf-8");
        // 3 把JSON数据响应给前端
        response.getWriter().write(jsonString);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

开启服务器结果如下:

 增加商品:

前端: addBrand.html

注意这有一个小逻辑:最后前端收到后端的success的响应后,跳转到查询所有页面 把新添加进去的商品展示出来





    
    添加品牌


添加品牌
品牌名称:
企业名称:
排序:
描述信息:
状态: 禁用 启用

后端代码:

AddServlet:(需要先抓包请求体中的JSON数据 然后转换成Java格式数据)

package com.itheima.web;
import com.alibaba.fastjson.JSON;
import com.itheima.pojo.Brand;
import com.itheima.service.BrandService;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.BufferedReader;
import java.io.IOException;

@WebServlet("/addServlet")
public class AddServlet extends HttpServlet {

    // new BrandService对象
    private BrandService brandService = new BrandService();

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 接收客户端传递过来添加的数据
        

        // 1、获取请求体数据
        BufferedReader bufferedReader =request.getReader();
        // 读一行 (就读刚才那个F12抓包到的请求体数据:{brandName:"kitty"})
        String params =bufferedReader.readLine();
        // System.out.println(params); // {"brandName":"Kitty"}    可以看出我们把前端以JSON格式请求的数据拿到手了 我们需要进行转换数据格式

        // 2、将JSON数据格式转换为java对象格式
        Brand brand =JSON.parseObject(params,Brand.class);
        // System.out.println(brand); // 调用Brand的toString方法  Brand{id=null, brandName='Kitty', companyName='null', ordered=null, description='null', status=null}

        // 3、我们把JSON数据转换成Java对象后 前端请求的数据就存放到我们Brand对象的属性当中了(前端请求的数据就是添加商品的数据)
        
        brandService.add(brand);

        // 4、响应给前端成功标识
        response.getWriter().write("success");

    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

开启服务器添加结果:

 点击提交后(跳转到查询所有页面):

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/1004255.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号