Axios异步框架和Json数据格式 - wpsshop博客
devbox
AllinToyou
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Axios异步框架和Json数据格式

作者：AllinToyou | 2024-03-18 14:04:35

赞

踩

Axios异步框架和Json数据格式

一.Axios异步框架

对原生的Ajax进行封装，简化书写。

给大家提供一下axios的源码：

链接：https://pan.baidu.com/s/1ZSrUBe0B4dIq7d6NpUzqOQ 
提取码：gr86 

 

将源码粘贴到项目之中。 

1.基础使用

首先单独创建一个Servlet：

  1. import javax.servlet.ServletException;
  2. import javax.servlet.annotation.WebServlet;
  3. import javax.servlet.http.HttpServlet;
  4. import javax.servlet.http.HttpServletRequest;
  5. import javax.servlet.http.HttpServletResponse;
  6. import java.io.IOException;
  7.  
  8. @WebServlet("/AxiosServlet")
  9. public class Axios_Servlet extends HttpServlet {
  10.     @Override
  11.     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  12.        String method =req.getMethod();
  13.        System.out.println(method+"方法已启动~");
  14.  
  15.        String username= req.getParameter("username");
  16.        System.out.println(username);
  17.  
  18.        resp.setContentType("text/html;charset=UTF-8");
  19.        resp.getWriter().write("Axios启动~");
  20.     }
  21.  
  22.     @Override
  23.     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  24.         this.doGet(req, resp);
  25.     }
  26. }

引入外部js：

 <script src="js/axios-0.18.0.js"></script>

 如果是get方法，则参数直接写进Url:

  1.       axios({
  2.         //大括号即为js对象
  3.         method:"get",
  4.         url:"http://localhost:8080/Ajax_S1_war/AxiosServlet?username=jsl"
  5.       }).then(function (resp){
  6.         alert(resp.data);
  7.       })

如果是post方法，则把参数写进data域：

  1.       axios({
  2.           //大括号即为js对象
  3.           method:"post",
  4.           url:"http://localhost:8080/Ajax_S1_war/AxiosServlet",
  5.           data:"username=jsl"
  6.       }).then(function (resp){
  7.           alert(resp.data);
  8.       })

2.别名方法

当然Axios内部可以直接调用get和post方法：

  1.       axios.get("http://localhost:8080/Ajax_S1_war/AxiosServlet?username=jsl").then(
  2.           function (resp){
  3.               alert(resp.data);
  4.               }
  5.       )
  6.       axios.post("http://localhost:8080/Ajax_S1_war/AxiosServlet","username=jsl").then(
  7.           function (resp){
  8.               alert(resp.data);
  9.           }
  10.       )

均可启动成功：

 

 

二.Json数据格式

 

        全名JavaScript Object Notation，即JS简谱、JS对象表示法。由于其语法简单，层次结构鲜明，现在多用于作为数据载体，在网络中进行数据传输。

1.基础语法

  1.       var jsl={
  2.           "gender":"man",
  3.           "age":23,
  4.           home:["拜仁","国米","阿贾克斯"]
  5.       }
  6.       alert(jsl.home[0]);

非常简单，不再赘述~

 

2.Java对象转换

 

  • 请求数据：json字符串变为Java对象
  • 响应数据：Java对象变为json字符串

采用阿里巴巴的API：Fastjson。

导入坐标：

  1. <dependency>
  2.      <groupId>com.alibaba</groupId>
  3.      <artifactId>fastjson</artifactId>
  4.      <version>1.2.62</version>
  5. </dependency>

 创建一个用于测试的类：

  1. public class TestDemo {
  2.     private Integer id;
  3.     private String username;
  4.     private String password;
  5.  
  6.     public Integer getId() {
  7.         return id;
  8.     }
  9.  
  10.     public void setId(Integer id) {
  11.         this.id = id;
  12.     }
  13.  
  14.     public String getUsername() {
  15.         return username;
  16.     }
  17.  
  18.     public void setUsername(String username) {
  19.         this.username = username;
  20.     }
  21.  
  22.     public String getPassword() {
  23.         return password;
  24.     }
  25.  
  26.     public void setPassword(String password) {
  27.         this.password = password;
  28.     }
  29.  
  30.     @Override
  31.     public String toString() {
  32.         return "TestDemo{" +
  33.                 "id=" + id +
  34.                 ", username='" + username + '\'' +
  35.                 ", password='" + password + '\'' +
  36.                 '}';
  37.     }
  38. }

主方法中测试：

  1. import com.alibaba.fastjson.JSON;
  2.  
  3. public class Main {
  4.     public static void main(String[] args) {
  5.         //1.Java转换为Json
  6.         TestDemo TD=new TestDemo();
  7.          TD.setId(1);
  8.          TD.setPassword("123456");
  9.          TD.setUsername("jsl");
  10.  
  11.          String jsonOb = JSON.toJSONString(TD);
  12.          System.out.println(jsonOb);
  13.     }
  14. }

打印出json格式的数据： 

然后是字符串转为java对象：

  1.  //2.json转为java
  2.         TestDemo t= JSON.parseObject("{\"id\":1,\"password\":\"123\",\"username\":\"zhangsan\"}",TestDemo.class);
  3.         System.out.println(t);

 

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/263570
推荐阅读

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。