当前位置：首页 > news >正文

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

news 2025/8/5 10:51:50

一、前言

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

二、 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>