Axios

最新推荐文章于 2024-07-17 12:52:53 发布

Brandon_xiaxia

最新推荐文章于 2024-07-17 12:52:53 发布

阅读量669

点赞数

文章标签： ajax

本文链接：https://blog.csdn.net/weixin_56770418/article/details/121685186

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>Axios练习</title>
   </head>
   <body>
       <h1>Axios远程调用练习</h1>
       <script src="../js/axios.js"></script>
       <script>
           /*
               1.promise对象解决了传统ajax中的回调地狱问题.
               2.Axios封装了promise对象,异步调用更加简洁
               3.常见请求类型: 1.get(查) 2.pust(from新增) 3.put(改) 4.delece
                4.分组: 用法相同 get/delece post/put
               注意事项: 默认条件下通过浏览器只能发起get请求!!!
           */

           /*
               1.Axios入门案例-get请求
               原始方式: 参数: 1.url地址 2.请求参数 3.回调函数
               axios方式: 参数: 1.url地址 2.请求参数
                       关键字: then(回调函数)
           */
           let result = ''
           axios.get("http://localhost:8090/getUser")
               .then(function(result) {
                   //result返回值是一个promise对象.
                   console.log(result)
                   //动态获取服务器返回值使用result.data
                   console.log(result.data)
               })

           //2. 箭头函数写法 result参数只有一个可以省略括号
           axios.get("http://localhost:8090/getUser")
               .then(result => {
                   console.log(result.data)
               })
           /*
           3. 带参数的请求方式1---字符串拼接
           需求: 查询ID=100的用户数据
           url: http://localhost:8090/getUser
           */
           axios.get("http://localhost:8090/getUserById?id=1")
               .then(result => {
                   console.log(result.data)
               })
           /*
           根据对象查询数据库
           封装对象
           */
           let user = {
               name: '大乔',
               sex: '女'
           }
           axios.get("http://localhost:8090/getUserByNS", {
                   //关键字params
                   params: user
               })
               .then(result => {
                   console.log(result.data)
               })

               /*
               利用restFul风格
               查询name包含"君"的数据
               http://localhost:8090/user/君 get
               */
               axios.get("http://localhost:8090/user/虾")
                   .then(result => {
                       console.log(result.data)
                   })
       </script>
   </body>
</html>

--------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>Axios练习</title>
   </head>
   <body>
       <h1>Axios远程调用练习</h1>
       <script src="../js/axios.js"></script>
       <script>
           /*
           get请求方式与delect方式一至
           */
           //1.删除name="xx"的数据使用params 对象的方式实现
           //2.删除name="xx"的数据 sex="xx" 使用restFul风格实现
           let result = ''
           let user = {
               name : '法国'
           }
           axios.delete("http://localhost:8090/delectByName", {
                   params: user,
               })
               .then(result => {
                   console.log(result.data)
               })

           axios.delete("http://localhost:8090/delectByNameSex/德国/女")
               .then(result => {
                   console.log(result.data)
               })
       </script>
   </body>
</html>

-----------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>用户列表展现</title>
   </head>
   <body>
       <div id="app">
           <table id="tab1" border="1px" width="700px" align="center">
               <tr>
                   <td colspan="4" align="center">
                       <h1>表格数据</h1>
                   </td>
               </tr>
               <tr align="center">
                   <td>ID编号</td>
                   <td>名称</td>
                   <td>年龄</td>
                   <td>性别</td>
               </tr>
               
               <tr align="center" v-for="user in userList">
                   <td v-text="user.id"></td>
                   <td v-text="user.name"></td>
                   <td v-text="user.age"></td>
                   <td v-text="user.sex"></td>
                   <td>
                       <button>修改</button>
                       <button @click="deleteUserById(user.id)">删除</button>
                   </td>
               </tr>
           </table>
       </div>
       <script src="../js/vue.js"></script>
       <script src="../js/axios.js"></script>
       <script>
           const app = new Vue({
               el: '#app',
               data: {
                   userList: []

               },
               methods: {
                   //1. 定义获取远程数据的ajax请求
                   getUserList() {
                       axios.get("http://localhost:8090/getUser")
                           .then(result => {
                               //服务器返回的是JSON串,经过JS程序解析变为JS对象
                               //实现对象的赋值
                               this.userList = result.data
                           })
                   },
                   deleteUserById(id) {
                       axios.delete("http://localhost:8090/delectById/id")
                       axios.delete("http://localhost:8090/delectById/"+id)
                           .then(result => {
                               console.log(result.data)
                               //刷新页面
                               this.getUserList()
                           })
                   }
               },
               created() {
                   //触发函数调用
                   this.getUserList()
               }
           })
       </script>
   </body>
</html>

Brandon_xiaxia

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Axios

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Axios练习</title> </head> <body> <h1>Axios远程调用练习</h1> <script src="../js/axios.js"></...
复制链接

扫一扫