- 下载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');
$name = isset($_POST['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>
- 后端php文件测试json数据如下。
- 前端输入ss,测试结果如图所示。
最后推荐一个公众号,一枚IT技术人成长路上关于生活和职场的思考,欢迎书友们前来交流和分享心得