vue中使用axios进行post请求php文件无法接收

本文源自毕设项目使用axios进行post请求所遇到的坑
在前端开发后台数据请求过程中常用两种方法有get和post,get方法请求相对来说没有post方法那么多坑,我在vue-cli3.0中使用axios进行get请求无需进行参数设置。
前端代码如下:

this.$axios.get('/Login.php',{
							params:{
								username:this.Form.username,
								password:this.Form.password
							}
						})

后端代码如下:

<?php
$db = new mysqli('localhost', 'root', '123456', 'tourism');
if(!mysqli_connect_errno())
{
	error_reporting(0);
	$user=array();
    $username = $_GET['username'];
    $password = $_GET['password'];
	$sql = "select username,password from user where username = 
	'$_GET[username]' and password = '$_GET[password]'";
	$result = $db->query($sql);
	$number = mysqli_num_rows($result);
	if ($number) {
			$row=mysqli_fetch_assoc($result);
			$user[]=$row;
	   echo (json_encode($user));
	} 
	else {
	   echo '用户名或密码错误';
	}
}
else {echo "无法连接数据库";}
?>

运行截图所示:在这里插入图片描述
URL地址后面自动以键值对的方式加入了我所提交的参数
再看Query String Parameters:在这里插入图片描述
get方法请求完全oj8k,但是问题来了,登录密码显示在URL地址中没有安全性,那么就要使用post方法避免这个问题,相应地把前后端的get都修改成post,发现不能请求数据

在这里插入图片描述
前端代码完全没问题,问题就是:axios默认使用payload形式提交数据,通过payload形式的数据php $_post无法接受前端提交的数据,要想后端接受post提交的数据,就要进行参数设置:
1.前端参数设置:

let param = new URLSearchParams();
						param.append("username", this.Form.username);
						param.append("password", this.Form.password);
					
						this.$axios.post('/Login.php',param)

在这里插入图片描述
提交的数据形式变为:Form Data
2.使用qs进行数据转换:

var qs = require('querystring')
						let data=qs.stringify({
							username:this.Form.username,
							password:this.Form.password
						});
						this.$axios.post('/Login.php',data)
						.then((resp) => {

网上搜索一批资料有的使用JSON.stringify(),但我测试了不行。

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值