本文源自毕设项目使用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(),但我测试了不行。