Axios异步框架和Json数据格式

一.Axios异步框架

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

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

链接:https://pan.baidu.com/s/1ZSrUBe0B4dIq7d6NpUzqOQ

提取码:gr86

将源码粘贴到项目之中。

1.基础使用

首先单独创建一个Servlet:

java 复制代码
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 Axios_Servlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
       String method =req.getMethod();
       System.out.println(method+"方法已启动~");

       String username= req.getParameter("username");
       System.out.println(username);

       resp.setContentType("text/html;charset=UTF-8");
       resp.getWriter().write("Axios启动~");
    }

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

引入外部js:

javascript 复制代码
 <script src="js/axios-0.18.0.js"></script>

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

javascript 复制代码
      axios({
        //大括号即为js对象
        method:"get",
        url:"http://localhost:8080/Ajax_S1_war/AxiosServlet?username=jsl"
      }).then(function (resp){
        alert(resp.data);
      })

如果是post方法,则把参数写进data域:

javascript 复制代码
      axios({
          //大括号即为js对象
          method:"post",
          url:"http://localhost:8080/Ajax_S1_war/AxiosServlet",
          data:"username=jsl"
      }).then(function (resp){
          alert(resp.data);
      })

2.别名方法

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

javascript 复制代码
      axios.get("http://localhost:8080/Ajax_S1_war/AxiosServlet?username=jsl").then(
          function (resp){
              alert(resp.data);
              }
      )
      axios.post("http://localhost:8080/Ajax_S1_war/AxiosServlet","username=jsl").then(
          function (resp){
              alert(resp.data);
          }
      )

均可启动成功:

二.Json数据格式

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

1.基础语法

javascript 复制代码
      var jsl={
          "gender":"man",
          "age":23,
          home:["拜仁","国米","阿贾克斯"]
      }
      alert(jsl.home[0]);

非常简单,不再赘述~

2.Java对象转换

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

采用阿里巴巴的API:Fastjson

导入坐标:

XML 复制代码
<dependency>
     <groupId>com.alibaba</groupId>
     <artifactId>fastjson</artifactId>
     <version>1.2.62</version>
</dependency>

创建一个用于测试的类:

java 复制代码
public class TestDemo {
    private Integer id;
    private String username;
    private String password;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    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;
    }

    @Override
    public String toString() {
        return "TestDemo{" +
                "id=" + id +
                ", username='" + username + '\'' +
                ", password='" + password + '\'' +
                '}';
    }
}

主方法中测试:

java 复制代码
import com.alibaba.fastjson.JSON;

public class Main {
    public static void main(String[] args) {
        //1.Java转换为Json
        TestDemo TD=new TestDemo();
         TD.setId(1);
         TD.setPassword("123456");
         TD.setUsername("jsl");

         String jsonOb = JSON.toJSONString(TD);
         System.out.println(jsonOb);
    }
}

打印出json格式的数据:

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

java 复制代码
 //2.json转为java
        TestDemo t= JSON.parseObject("{\"id\":1,\"password\":\"123\",\"username\":\"zhangsan\"}",TestDemo.class);
        System.out.println(t);
相关推荐
岁月宁静4 小时前
深度定制:在 Vue 3.5 应用中集成流式 AI 写作助手的实践
前端·vue.js·人工智能
心易行者5 小时前
10天!前端用coze,后端用Trae IDE+Claude Code从0开始构建到平台上线
前端
saadiya~5 小时前
ECharts 实时数据平滑更新实践(含 WebSocket 模拟)
前端·javascript·echarts
fruge5 小时前
前端三驾马车(HTML/CSS/JS)核心概念深度解析
前端·css·html
百锦再5 小时前
Vue Scoped样式混淆问题详解与解决方案
java·前端·javascript·数据库·vue.js·学习·.net
烛阴6 小时前
Lua 模块的完整入门指南
前端·lua
浪里行舟6 小时前
国产OCR双雄对决?PaddleOCR-VL与DeepSeek-OCR全面解析
前端·后端
znhy@1237 小时前
CSS易忘属性
前端·css
瓜瓜怪兽亚7 小时前
前端基础知识---Ajax
前端·javascript·ajax
AI智能研究院7 小时前
(四)从零学 React Props:数据传递 + 实战案例 + 避坑指南
前端·javascript·react.js