学习遇bug(1)——vue.axios和php的json交互 以及更新响应data

坐在电脑面前思考了四个小时,找了很多方法,最后还是自己琢磨找出来的问题。
小白就是笨笨的多健忘~

还是记录一下这些问题,因为映象深刻,是很长一段时间里不会忘记的。

vue和php交互和响应

我用的是axios,因为是基于 Promise 的 HTTP 库。传值用的是json数据。

在html里面写个vue实例:

<div id="app">
   <P style="font-size: 25px;width: 350px;" >{{ things[0].name }}</p>
   <button  @click="search" class="sbtn">查询</button>
</div>
<script type="text/javascript">
	var msg='1',code='2'; //因为老有bug,就设值。
	var vm=new Vue({
		el:'#app',
		data:{
			things:[{
				name:'11',
				type:'n'
			}]
		},
		methods:{
			search:function(){			
				axios.post('./index.php',{ //用post和get目前是差不多的
					params:{
						"code":"1",  //传值给php
					}
				})
	            .then(function(res){ //从php返回的json对象=res
	             	var result=res.data; //json数据
	             	msg=result.msg;
	             	code=result.code; 
	             	Vue.set(vm.things,0,{name:msg,type:code}); //更新响应            
	            })
	            .catch(function (error) { // 请求失败处理
	                    console.log(error);
	            });	  	            
            }
		}		
   })
</script>

index.php:

<?php
	session_start();	
	$code = isset($_POST['code'])? trim($_POST['code']):"";//接收前端传来的数据	
	
	$raw_success = array('code' => 1, 'msg' => '苹果');	//自定义数组
	$res_success = json_encode($raw_success);//把数组编码成json
	header('Content-Type:application/json');//这个类型声明非常关键,告诉前台我是json格式了		
	echo "$res_success";//传参
?>
小白撞墙点:

1.cdn别忘记了!

<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>

2.有人说:header("Access-Control-Allow-Origin: *");这个必写,否则报错。
然后我写了一直报错:内部服务器错误,不明白删了就没事了。以后遇到跨域问题还会回头看的。

跨域看这里:https://blog.csdn.net/csdn_yudong/article/details/79668655

这里谢谢大佬!第一个方法很好用!!!!

3.Vue.set(vm.things,0,{name:msg,type:code}); 要用vm不是this,不然报错。

4.things可以写成是对象也可以是数组。数组要序号0,对象写key。
有大神说:data里的对象用set是不能直接修改更新的,而data的对象的对象是可以的。

5.习惯把php放在<html></htnml>里了,然后报错,undefined
alert检查一看,返回的还包含了<html>标签里的html代码,所以弹bug的noticeundefined。同样输出echo掺杂非json数据,也会报错。

PS:刚刚开始学习实践vue.js,如有不足,多多包涵。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值