Java Web学习笔记20——Ajax-Axios

Axios:

介绍:Axios对原生的Ajax进行封装,简化书写,快速开发。

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

Axios 入门:

{}是Js的对象。

get的请求参数是在URL后面?和相关参数值。

post的请求参数是在请求体中的。

成功回调函数:

js对象result,result.data就可以拿到result这个对象的data属性,data属性里面就是服务端响应回来的数据。

案例:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax-Axios</title>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
    
    <input type="button" value="获取数据GET" onclick="get()">

    <input type="button" value="删除数据POST" onclick="post()">

</body>
<script>
    function get(){
        //通过axios发送异步请求-get
        // axios({
        //     method: "get",
        //     url: "http://yapi.smart-xwork.cn/mock/169327/emp/list"
        // }).then(result => {
        //     console.log(result.data);
        // })


        axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
            console.log(result.data);
        })
    }

    function post(){
        //通过axios发送异步请求-post
        // axios({
        //     method: "post",
        //     url: "http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",
        //     data: "id=1"
        // }).then(result => {
        //     console.log(result.data);
        // })

        axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then(result => {
            console.log(result.data);
        })
    }
</script>
</html>

打开开发者工具:

这种方式是我们项目中推荐的方法。

案例:

基于Vue及Axios完成数据的动态加载展示:

1、数据准备的URL:

2、在页面加载完成后,自动发送异步请求,加载数据,渲染展示页面(性别1:男,2代表女)。

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax-Axios-案例</title>
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>图像</th>
                <th>性别</th>
                <th>职位</th>
                <th>入职日期</th>
                <th>最后操作时间</th>
            </tr>

            <tr align="center" v-for="(emp,index) in emps">   /* 在视图中渲染展示列表数据*/
                <td>{{index + 1}}</td>
                <td>{{emp.name}}</td>
                <td>
                    <img :src="emp.image" width="70px" height="50px">
                </td>
                <td>
                    <span v-if="emp.gender == 1">男</span>
                    <span v-if="emp.gender == 2">女</span>
                </td>
                <td>{{emp.job}}</td>
                <td>{{emp.entrydate}}</td>
                <td>{{emp.updatetime}}</td>
            </tr>
        </table>
    </div>
</body>
<script>
    new Vue({
       el: "#app",
       data: {
         emps:[]    // 数据模型
       },
       mounted () {
          //发送异步请求,加载数据
          axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
            this.emps = result.data.data;   // 把获得数据给了数据模型emps
          })
       }
    });
</script>
</html>

发送的是异步请求,从服务器获得数据,数据是json格式的,然后我们给了数据模型emps,然后在view中渲染展示这些数据,通过插值表达式等方式。

其中头像使用的是地址。

v-bind是为标签绑定属性值,再回顾下。

相关推荐
雷神乐乐2 天前
IDEA构建JavaWeb项目,并通过Tomcat成功运行
服务器·tomcat·javaweb
A懿轩A12 天前
2024最新版 Tomcat安装与配置(带图详细步骤)简单易懂
java·spring boot·后端·架构·tomcat·javaweb
lanssssss19 天前
SpringMVC
java·开发语言·spring·springmvc·javaweb
这孩子叫逆25 天前
java web 之过滤器Filter
java·开发语言·javaweb·filter
Minyy111 个月前
JavaWeb(实训六)--第九章Servlet的高级特性
java·开发语言·servlet·tomcat·intellij-idea·javaweb·实训
这孩子叫逆1 个月前
JavaWeb三大组件之Servlet
servlet·javaweb
周巴帝1 个月前
2024新版IDEA创建JSP项目
java·ide·intellij-idea·javaweb·jsp
Liuxu09031 个月前
Ajax开发技术
java·前端·ajax·okhttp·javaweb
代码代码快快显灵1 个月前
HttpServletRequest简介
java·开发语言·javaweb
棘布2 个月前
Day 43~48 smbms
javaweb