基于vue.js及vue-resource.js的异步post请求php文件数据_vue用this.$http.post请求php是表单访问吗-CSDN博客

本文链接：https://blog.csdn.net/fq_fly/article/details/103698325

下载vue.min.js文件及vue-resource.min.js文件，存放在对应目录,vue实现异步加载通过vue-resource库

<script src="./vue-js/vue.min.js"></script>
<script src="./vue-js/vue-resource.min.js"></script>

通过post的请求向后端php文件请求数据，若需要传递数据，则使用this.$http.post(url,jsonData,{emulateJSON:true})语句。
第一个参数url表示前端向后端发起http请求的路径
第二个参数jsonData表示传到后端的数据
第三参数{emulateJSON:true}，当post发送数据到后端时，第三个参数必须存在。其作用：当web服务器无法处理编码为applicatio/json的请求时，启用emulateJSON选项。

this.$http.post('data.php',{name:this.name},{emulateJSON:true})
                        .then(function (res) {
                            this.info = res.body;
                        },function (res) {
                            alert(res.status);
                        });

后端php文件收到前端post所传参数，并根据参数返回不同的数据，其具体代码如下。

<?php
header('Content-Type:application/json');//加上这行,前端那边就不需要var result = $.parseJSON(data);
$name = isset($_POST['name']) ? $_POST['name']: '';
//$name = $_POST['name'];
$retdata = array(
"st"=>array("name"=>"feiy","sex"=>"male","age"=>18,"job"=>'egineer'),
"ss"=>array("name"=>"MM","sex"=>"female","age"=>20,"job"=>'signer'),
"te"=>array("name"=>"cs","sex"=>"female","age"=>28,"job"=>'teacher'),
);
if($name=='st')
{
    echo json_encode($retdata['st']);
}
else if($name=='ss')
{
    echo json_encode($retdata['ss']);
}
else if($name=='te')
{
    echo json_encode($retdata['te']);
}
else{
    echo json_encode($retdata);
}
?>

前端根据输入的参数，提交post请求，前端代码如下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>post提交请求</title>
    <script src="./vue-js/vue.min.js"></script>
    <script src="./vue-js/vue-resource.min.js"></script>
    <link rel="stylesheet" href="./vue-css/bootstrap.css">
</head>
<body>
<div id="myapp">
    <button class="btn-primary" @click="postdata()">提交</button>
    <input v-model="name" placeholder="请输入所传参数" class="form-inline">
    <p>{{info}}</p>
    <ol>
        <li v-for="(value,key) in info">获取到为{{key}}的数据{{value}}</li>
    </ol>

</div>
<script>
    window.onload=function () {
        new Vue({
            el:'#myapp',
            data:{
                info:'',
                name:'ss'
            },
            methods:{
                postdata:function () {
                    this.$http.post('data.php',{name:this.name},{emulateJSON:true})
                        .then(function (res) {
                            this.info = res.body;
                        },function (res) {
                            alert(res.status);
                        });
                }
            }
        })
    }

</script>
</body>
</html>