Java课题笔记~ Axios

这篇具有很好参考价值的文章主要介绍了Java课题笔记~ Axios。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

Axios官网是:https://www.axios-http.cn

2.1 基本使用

axios 使用是比较简单的,分为以下两步:

  • 引入 axios 的 js 文件

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

使用axios 发送请求,并获取响应结果

  • 发送 get 请求

axios({
    method:"get",
    url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan"
}).then(function (resp){
    alert(resp.data);
})
  • 发送 post 请求
axios({
    method:"post",
    url:"http://localhost:8080/ajax-demo1/aJAXDemo1",
    data:"username=zhangsan"
}).then(function (resp){
    alert(resp.data);
});

axios() 是用来发送异步请求的,小括号中使用 js 对象传递请求相关的参数:

  • method 属性:用来设置请求方式的。取值为 get 或者 post

  • url 属性:用来书写请求的资源路径。如果是 get 请求,需要将请求参数拼接到路径的后面,格式为: url?参数名=参数值&参数名2=参数值2

  • data 属性:作为请求体被发送的数据。也就是说如果是 post 请求的话,数据需要作为 data 属性的值。

then() 需要传递一个匿名函数。我们将 then() 中传递的匿名函数称为 回调函数,意思是该匿名函数在发送请求时不会被调用,而是在成功响应后调用的函数。而该回调函数中的 resp 参数是对响应的数据进行封装的对象,通过 resp.data 可以获取到响应的数据。

2.2 快速入门

2.2.1 后端实现

定义一个用于接收请求的servlet,代码如下:

@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);
    }
}
2.2.2 前端实现
  • 引入 js 文件

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

发送 ajax 请求

  • get 请求

axios({
    method:"get",
    url:"http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan"
}).then(function (resp) {
    alert(resp.data);
})
  • post 请求
axios({
    method:"post",
    url:"http://localhost:8080/ajax-demo/axiosServlet",
    data:"username=zhangsan"
}).then(function (resp) {
    alert(resp.data);
})

整体页面代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="js/axios-0.18.0.js"></script>
<script>
    //1. get
   /* axios({
        method:"get",
        url:"http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan"
    }).then(function (resp) {
        alert(resp.data);
    })*/

    //2. post  在js中{} 表示一个js对象,而这个js对象中有三个属性
    axios({
        method:"post",
        url:"http://localhost:8080/ajax-demo/axiosServlet",
        data:"username=zhangsan"
    }).then(function (resp) {
        alert(resp.data);
    })
</script>
</body>
</html>

2.3 请求方法别名

为了方便起见, Axios 已经为所有支持的请求方法提供了别名。如下:

  • get 请求 : axios.get(url[,config])

  • delete 请求 : axios.delete(url[,config])

  • head 请求 : axios.head(url[,config])

  • options 请求 : axios.option(url[,config])

  • post 请求:axios.post(url[,data[,config])

  • put 请求:axios.put(url[,data[,config])

  • patch 请求:axios.patch(url[,data[,config])

而我们只关注 get 请求和 post 请求。

入门案例中的 get 请求代码可以改为如下:

axios.get("http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan").then(function (resp) {
    alert(resp.data);
});

入门案例中的 post 请求代码可以改为如下:文章来源地址https://www.toymoban.com/news/detail-663882.html

axios.post("http://localhost:8080/ajax-demo/axiosServlet","username=zhangsan").then(function (resp) {
    alert(resp.data);
})

到了这里,关于Java课题笔记~ Axios的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Java课题笔记~ Ajax

    1.1 概述 AJAX (Asynchronous JavaScript And XML):异步的 JavaScript 和 XML。 我们先来说概念中的 JavaScript 和 XML , JavaScript 表明该技术和前端相关; XML 是指以此进行数据交换。 1.1.1 作用 AJAX 作用有以下两方面: 与服务器进行数据交换 :通过AJAX可以给服务器发送请求,服务器将数据直

    2024年02月12日
    浏览(30)
  • Java课题笔记~ Fastjson 概述

    3.3 JSON串和Java对象的相互转换 学习完 json 后,接下来聊聊 json 的作用。 以后我们会以 json 格式的数据进行前后端交互。前端发送请求时,如果是复杂的数据就会以 json 提交给后端;而后端如果需要响应一些复杂的数据时,也需要以 json 格式将数据响应回给浏览器。 在后端我

    2024年02月12日
    浏览(39)
  • Java课题笔记~ SpringBoot概述

    问题导入 学习了SpringBoot入门案例之后,感觉对比SpringMVC哪一个更加方便简洁? SpringBoot是由Pivotal团队提供的全新框架,其设计目的是用来 简化 Spring应用的 初始搭建 以及 开发过程 Spring程序缺点 配置繁琐 依赖设置繁琐 SpringBoot程序优点 自动配置 起步依赖(简化依赖配置)

    2024年02月11日
    浏览(37)
  • Java课题笔记~ Servlet编程

    (1)什么是Servlet Servlet是基于Java语言的Web编程技术,部署在服务器端的Web容器里,获取客户端的访问请求,并根据请求生成响应信息返回给客户端。 创建Servlet的方式,有 如下图:一般创建Servlet都是通过继承HttpServlet来实现,如图中的HelloServlet。 (类图快捷键:Ctrl + Alt + U)

    2024年02月13日
    浏览(31)
  • Java课题笔记~Maven基础

    下载安装 配置:修改安装目录/conf/settings.xml 本地仓库:存放的是下载的jar包 中央仓库:要从哪个网站去下载jar包 - 阿里云的仓库        

    2024年02月14日
    浏览(34)
  • Java课题笔记~ JSP内置对象

    (1)九个内置对象 jsp的内置对象: JSP内置对象是不需要声明和创建就可以在JSP页面脚本中使用的成员变量。 九个内置对象:    1.out对象 在JSP页面中,经常需要向客户端发送文本内容,这时,可以使用out对象来实现。out对象是javax.servlet.jsp.JspWriter类的实例对象,它的作用与

    2024年02月13日
    浏览(36)
  • Java课题笔记~ HTTP协议(请求和响应)

    Servlet最主要的作用就是处理客户端请求,并向客户端做出响应。为此,针对Servlet的每次请求,Web服务器在调用service()方法之前,都会创建两个对象 分别是HttpServletRequest和HttpServletResponse。 其中HttpServletRequest用于封装HTTP请求消息,简称request对象; HttpServletResponse用于封装HTT

    2024年02月13日
    浏览(35)
  • Java-web:使用Axios代替JSP进行前后端分离与数据交互

    使用Servlet注解代替配置web.xml文件 在servlet3.0版本支持使用注解 1.创建一个Servlet响应axios发送的请求 JSP代替: 还原JSP到HTML: Axios:将ajax进行封装,简化JS发送异步请求的代码 Axios官网:https://www.axios-http.cn/ 下载axios.js文件到本地然后再HTML头文件引入或者直接引用网址的JS头文

    2024年02月06日
    浏览(39)
  • JavaWeb小项目——【源码】使用Vue+axios+Servlet+Lombok+JDBC+MySQL技术栈实现云笔记管理系统案例的开发

    使用Vue+axios+Servlet+Lombok+JDBC+MySQL技术栈实现云笔记管理系统案例的开发 (一)题目要求 使用Vue+axios+Servlet+Lombok+JDBC+MySQL技术栈实现云笔记管理系统案例的开发 (二)数据库设计(10分) 创建数据库woniu_note (1)用户表:t_user,必要字段包含:用户名(username)、密码(passwd)

    2024年02月09日
    浏览(37)
  • 关于axios请求java接口中的@RequestParam、@PathVariable及@RequestBody不同接参类型的用法

    一、前端传json对象,后端指定接收json对象中的哪个参数。 (1)前端请求 (2)后端接口(接参方式) 二、axios使用restful规范的get请求,后端使用@PathVariable接参 后端接口路径+属性值;注意!!!路径后面有反斜杠/,注意不要写漏了,不然value就会变成路径的一部分,请求路径就会

    2024年02月15日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包