Vue中的Get , Delete , Post , Put 传递参数

这里写自定义目录标题<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><script type="text/javascript" src="js/axios

Best_北诗

5015人浏览 · 2020-10-09 23:44:45

Best_北诗 · 2020-10-09 23:44:45 发布

刚刚接触Vue2.5以上版本的新手程序员不了解怎样传递参数的仅供参考

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
/*为了前后端更好的交互效果 引入axios.js 这个js文件*/
    <script type="text/javascript" src="js/axios.js"></script>
    <script type="text/javascript">
        // axios请求参数传递

        // axios get请求传参
        // 传统格式的 get 请求
         axios.get('http://localhost:3000/axios?id=123')
           .then(function(ret){
           console.log(ret.data)
         })
         // restful 格式的 get 请求
         axios.get('http://localhost:3000/axios/123')
           .then(function(ret){
           console.log(ret.data)
         })
         // 携带参数的 get 请求
        axios.get('http://localhost:3000/axios', {
            params: {
                id: 789
            }
        }).then(function(ret) {
            console.log(ret.data)
        })

        // // axios delete 请求传参
        axios.delete('http://localhost:3000/axios', {
            params: {
                id: 111
            }
        }).then(function(ret) {
            console.log(ret.data)
        })

        //-----------------------------------

        // 使用 axios 进行 post 请求,默认传递 json 数据
        axios.post('http://localhost:3000/axios', {
                'uname': 'lisi',
                'pwd': 123
            }).then(function(ret) {
                console.log(ret.data)
            })
            // 使用 axios 进行 post 请求,传递 form 表单数据
             var params = new URLSearchParams();
             params.append('uname', 'zhangsan');
             params.append('pwd', '111');
             axios.post('http://localhost:3000/axios', params)
               .then(function (ret) {
                 console.log(ret.data)
               })

        // axios put 请求传参
        axios.put('http://localhost:3000/axios/123', {
            uname: 'lisi',
            pwd: 123
        }).then(function(ret) {
            console.log(ret.data)
        })



        // 对于 axios 来说，在 get 和 delete 请求中，参数要放入到 params 属性下
        // 在 post 和 put 请求中，参数直接放入到 对象中
    </script>
</body>

</html>

向后台发起请求的代码( 有的公司服务端的程序员不给写 ) 前端程序员仅供才考

app.get('/adata', (req, res) => {
    res.send('Hello axios!')
})
app.get('/axios', (req, res) => {
    res.send('axios get 传递参数' + req.query.id)
})
app.get('/axios/:id', (req, res) => {
    res.send('axios get (Restful) 传递参数' + req.params.id)
})
app.delete('/axios', (req, res) => {
    res.send('axios get 传递参数' + req.query.id)
})
app.delete('/axios/:id', (req, res) => {
    res.send('axios get (Restful) 传递参数' + req.params.id)
})
app.post('/axios', (req, res) => {
    res.send('axios post 传递参数' + req.body.uname + '---' + req.body.pwd)
})
app.put('/axios/:id', (req, res) => {
    res.send('axios put 传递参数' + req.params.id + '---' + req.body.uname + '---' + req.body.pwd)
})

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^