异步请求

发送异步请求.

通过jquery中的方法完成异步的请求。

$.get(url,data,function(result){},type)

$.post(url,data,function(result){},type)

服务器返回的都是json数据。ssm 后端返回的类型必须统一R.

axios发送异步请求。因为jquery异步请求方式只有get和post模式，无法满足后台接口的需求。而且axios发送异步请求可以和好的和vue结合。
1 axios异步请求的语法
get请求

axios.get(url?k=v&k2=v2).then(function(result){})

--function:表示成功后触发的函数。 result:接受服务器响应的数据。
简洁语法: 省略function。并使用=>符号
axios.get(url?k=v&k2=v2).then(result=>{})

post请求

axios.post(url,data).then(result=>{})

-- data:格式 {k:v,k2:v}

delete请求

axios.delete(url?k=v).then(result=>{})

put请求
axios.put(url,data).then(result=>{})
2 使用

<%--
  Created by IntelliJ IDEA.
  User: ldh
  Date: 2024/10/16
  Time: 9:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="/js/vue.js"></script>
    <!--引用网络的js文件-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<!--通过axios发送异步请求获取所有学生得到信息并展示在网页中-->
<div id="app">
    <table width="600" border="1" cellspacing="0" cellpadding="0" align="center">
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>出生日期</th>
            <th>头像</th>
            <td>班级</td>
        </tr>
        <!--jstl标签-->
        <tr v-for="s in students">
            <td>{{s.id}}</td>
            <td>{{s.name}}</td>
            <td>{{s.age}}</td>
            <td>{{s.gender}}</td>
            <td>{{s.birthday}}</td>
            <td>
                <img :src="s.headimg" width="80"/>
            </td>
            <td>
                {{s.classInfo.name}}
            </td>
        </tr>
    </table>
</div>
</body>

<script>
    let app = new Vue({
        el: "#app",
        data: {
            students: undefined, // 表示所有的学生。
        },
        created() { // 页面加载的时候就执行这个方法
            this.loadStudent();
        },
        methods: {
            //加载所有学生信息.
            loadStudent() {
                axios.get("/student/list").then(resp => {
                    if(resp.data.code===200){ //===:比较值和数据类型  ==：只比较值
                        //吧查询的结果赋值给students数据。
                        this.students=resp.data.data;
                    }

                })
            }
        }
    })
</script>
</html>

posted on 2024-12-27 21:03  小木不痞  阅读(17)  评论(0)    收藏  举报

导航