CodeIgniter + Vue.js前后端分离之axios请求

最新推荐文章于 2024-04-09 21:50:33 发布

weixin_33955681

最新推荐文章于 2024-04-09 21:50:33 发布

阅读量1.2k

点赞数

文章标签： javascript php 后端 ViewUI

原文链接：https://juejin.im/post/5bb32f0b6fb9a05d011cf144

版权

传统php + jQuery的 Ajax 交互模式

前端代码：

<html>
<head>
  <meta charset="UTF-8">
  <title>JQueryAjax+PHP</title>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
</head>
<body>
  用户名:<input type="text" id="username" name="username" /><br>
  密码:<input type="password" id="password" name="password" /><br>
  <button type="button" class="butn">ajax提交</button><br>
  <span class="con"></span>
  <script type="text/javascript">
    $(document).ready(function () {
      $(".butn").click(function () {
        var username = $("#username").val();
        var password = $("#password").val();
        $.post('./back.php', {
          name: username,
          pwd: password
        }, function (data) {
          console.log(data);
          $(".con").html(data);
        })
      })
    })
  </script>
</body>
</html>
复制代码

后端代码：

<?php  
echo '用户名:',$_POST['name'],',密码：',$_POST['pwd']."<br>"; 
echo "操作完毕"; 
复制代码

Codeigniter + Vue.js 的 axios 交互

本来以为照着文档将axios格式复制过来就可以了，然而并没有想象中那么容易

初始化页面时调查询接口先发了get请求

// 初始化时查询所有人员信息
queryStuffInfo() {
  axios.get("/home/queryStuffInfo").then(res => {
    this.tableData = res.data;
  });
},
复制代码

public function queryStuffInfo()
{
    $this->load->database();
    $sql = 'select * from t_stuff_info'; 
    $result = $this->db->query($sql);
    $data = $result->result();
    echo json_encode($data);
}
复制代码

直接可以获得数据并在页面展示，当调用增加人员接口（post请求）时先发了option请求，即预请求(preflight request)，然而发完预请求后没有返回值，所以没法继续发post请求于是给php代码做配置

// 1、对普通的GET/POST/PUT请求,请求头设置如下:
// 设置json格式请求头
header("Content-type:application/json; charset=utf-8");
//跨域请求允许的域名设置,因为需要传递cookie,不能使用*
header("Access-Control-Allow-Origin: *");
// 跨域请求允许的请求头
header("Access-Control-Allow-Headers: Content-type");
// 跨域请求同意发送Cookie
header("Access-Control-Allow-Credentials: true");

// 2、非简单请求每次请求前,都会发送一个一次”预检“请求,它是 options的请求方式。它主要是询问服务器是否允许这个非简单请求访问,如果我们允许,则返回所需要的回应头信息(response header),这个预检请求的请求头设置如下:
//设置json格式请求头
header("Content-type:application/json; charset=utf-8");
// 跨域请求允许的域名设置
header("Access-Control-Allow-Origin: *");
// 跨域请求允许的请求头
header("Access-Control-Allow-Headers: Content-type");
header("Vary: Accept-Encoding, Origin");
// 跨域请求同意发送Cookie
header("Access-Control-Allow-Credentials: true");
// options请求中所允许的方法
header("Access-Control-Allow-Methods: GET, POST, PUT, OPTIONS");
// OPTIONS这个预请求的有效时间,20天
header("Access-Control-Max-Age: 1728000");
复制代码

这样设置头部就可以，然后调用后端接口

// 新增一条人员信息 入库
addStuff() {
  const reqData = {
    name: this.name,
    sex: this.sex,
    province: this.province,
    city: this.city
  };
  axios.post("/home/addStuff", reqData).then(res => {
    console.log(res);
  });
},
复制代码

// test 后端获取前端post传过来的值
public function addStuff()
{
	$name = $this->input->post('name');
	$sex = $this->input->post('sex');
	$province = $this->input->post('province');
	$city = $this->input->post('city');
	$arr = array(
		'name' => $name,
		'sex' => $sex,
		'province' => $province,
		'city' => $city,
	);
	echo json_encode($arr);
}
复制代码

此时会报post过来的四个值为null

百度上找到form表单提交的请求头信息和ajax请求头信息

Content-Type: application/x-www-form-urlencoded // form表单提交
Content-Type: application/json;charset=UTF-8 // ajax
复制代码

于是在axios请求参数中修改请求头信息，无效

在模仿form表单提交中发现 axios 文档中有可修改项 (文档中 Using application/x-www-form-urlencoded format部分)

let params = new URLSearchParams();
params.append("name", this.name);
params.append("sex", this.sex);
params.append("province", this.province);
params.append("city", this.city);
axios.post("/home/addStuff", params).then(res => {
console.log(res);
});
复制代码