vue3发送axios请求

没有名字随便喊

已于 2023-02-15 17:30:51 修改

阅读量1.2k

点赞数

分类专栏： vue JavaScript 文章标签： javascript 前端开发语言 vue.js ajax

于 2022-07-22 17:00:23 首次发布

本文链接：https://blog.csdn.net/wyp_comeon/article/details/125935969

版权

JavaScript 同时被 2 个专栏收录

18 篇文章

订阅专栏

vue

2 篇文章

订阅专栏

这篇博客展示了如何使用Vue.js和Axios库进行POST和GET请求。在POST请求中，提交表单数据到'/addMsg'接口，并根据返回状态更新用户界面。GET请求则用于发送学生申请信息到'/StudnetApply'，同样根据响应更新页面。两种请求都包含了错误处理和成功提示的逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码片段：

<div class="InputBox w72">
    <form action="">
        <p class="p1"><label for="name"><span>姓名</span>：</label><input type="text" placeholder="请输入您的姓名" id="name" v-model="name"></p>
        <p class="p2"><label for="tel">联系电话：</label><input type="text" placeholder="请输入您的电话" id="tel" v-model="tel"></p>
        <p class="p3"><label for="message">留言内容：</label><textarea name="message" id="message" placeholder="请输入内容" v-model="message"></textarea></p>
        <button type="button" id="subBtn" @click.stop="sendMsg"><span>提交</span></button>
    </form>
    <div class="return" v-show="showRentPrise">
        <p>
            <em><img src="../assets/img/tj.png" alt=""></em>
            <span>提交成功</span>
        </p>
    </div>
  </div>

post请求

import axios from "axios";
import qs from "qs";
//接口解析
const name = ref(null);
const tel = ref(null);
const message = ref(null);
const showRentPrise = ref(false);
const sendMsg = () => {
    if (!message.value) {
        alert('留言内容不能为空');
    }else{
        const datas={
            "UserName": name.value,
            "Info": message.value,
            "tel" : tel.value
        }
        axios({
            method: 'post',
            url:'/addMsg',
            data:qs.stringify(datas),
        }).then((res)=>{
            let result = JSON.parse(res.data);
            // console.log(result);
            if (result.state == 'ok') {
                showRentPrise.value = true;
                setTimeout(() => {
                    showRentPrise.value = false;
                }, 2000);
            }else{
                alert("频繁提交请一分钟后重试");
            }
        }).catch(function (error) {
            // console.log(error);
            alert('系统繁忙请联系管理员');
        });
    }
};

get请求

const stuName = ref(null)
const sex = ref(null)
const mobile = ref(null)
const hobby = ref<any[]>([])
const message = ref(null)
const showRentPrise = ref(false);
const sendMsg = () => {
    if (!stuName.value || !sex.value || !mobile.value) {
        alert('必填项不能为空');
    }else{
        axios.get('/StudnetApply',{
            params: {
                StudentName: stuName.value,
                StudentSex: sex.value,
                PhoneNumber : mobile.value,
                ProfessionalApply: hobby.value.join(' , '),
                ProfessionalApply1: message.value,
                ColumnID:CID
            }
        }).then((res)=>{
            if (res.status == 200) {
                showRentPrise.value = true;
                setTimeout(() => {
                    showRentPrise.value = false;
                }, 2000);
                alert(res.data);
                location. reload()
            }else{
                alert("频繁提交请一分钟后重试");
            }
        }).catch(function (error) {
            // console.log(error);
            alert('系统繁忙请联系管理员');
        });
    }
}