web开发之 HTML、CSS、JavaScript、以及JavaScript的高级框架Vue（学习版2）

news2024/12/22 18:53:17

一、前言

接下来就是来解决这些问题

二、 Ajax

1.ajax

javscript是网页三剑客之一，空用来控制网页的行为的

xml是一种标记语言，是用来存储数据的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax-原生方式</title>
</head>
<body>
    
    <input type="button" value="获取数据" onclick="getData()">
    <div id="div1"></div>
</body>
<script>
    function getData(){
        //1.创建XMLHttpRequest对象
        var xmlHttpRequest = new XMLhttpRequest();

        //2.发送异步请求
        xmlHttpRequest.open('GET','http://yapi.smart-xwork.cn/mock/169327/emp/list');
        xmlHttpRequest.send();//发送请求

        //3.获取服务响应数据
        xmlHttpRequest.onreadystatechange = function(){
            if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
                document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;
            }
        }
    }
</script>
</html>‘

2.axios

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax-axios</title>
</head>
<body>
    <input type="button" value="获取数据GET" onclick="get()">
    <input type="button" value="删除数据POST" onclick="post()">
</body>
<script>
    function get(){
        axios({
            method:'get',
            url:'http://yapi.smart-xwork.cn/mock/169327/emp/list',

        }).then(result =>{
            console.log(result.data);
            
        })

    } 

    function post(){
        axios({
            method:'post',
            url:'http://yapi.smart-xwork.cn/mock/169327/emp/deleteById',
            data:'id=1', 
        }).then(result =>{
            console.log(result.data);
            
        })

    }
</script>
</html>

3.axio案例

这三个代码都是没有用浏览器看到的（因为那个网址打不开）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax-axios案例</title>
</head>
<body>
    
    <div id="app">
        <table width="800px" cellspacing="0" border="1">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>图片</th>
                <th>性别</th>
                <th>职位</th>
                <th>入职时间</th>
                <th>更新时间</th>
            </tr>

            <tr v-for="(emp, index) in emps" align="center">
                <td>{{index+1}}</td>
                <td>{{emps.name}}</td>
                <!-- <td>{{emps.image}}</td> -->
                 <td>
                    <img v-bind : src="emps.image" alt="" height="50px" width="70px">
                 </td>
                <td>
                    <span v-if="gender == 1">男</span>
                    <span v-if="gender == 2">女</span>
                </td>
                <td>{{emps.job}}</td>
                <td>{{emps.entrydate}}</td>
                <td>{{emps.updatatime}}</td>
            </tr>

        </table>
    </div>

</body>
<script>
    new Vue({
        el:'a#pp',
        data:{
            emps:[]
        },
        mounted() {
            axios.get('').then(result => {
                this.emps = result.data.data;//当前vue实例中的data中的emps属性赋值
                
            })
        },
    })
</script>
</html>