runoops.com

Axios 与 PHP 交互

以下是在浏览器中的使用方法,如果是在nodejs 环境中,需要引入对应的模块。

Axios GET 请求PHP 数据

方式一:

axios.get('//demo.runoops.com/php/axios-request.php?param1=value1&param2=value2').then(function (response) {
            let data = response.data;
            console.log(data);
            document.write(data);
        }).catch(function (error) {
            console.log(error);
        });

方式二:

axios.get('//demo.runoops.com/php/axios-request.php', 
        { params: { param1: "value1", param2: "value2" } 
        }).then(function (response) {
            let data = response.data;
            console.log(data);
            document.write(data);
        }).catch(function (error) {
            console.log(error);
        });

PHP 端代码如下,可以用$_GET 或$_REQUEST 获取变量值:

实例

<?php
header("Access-Control-Allow-Origin: *");
header("Content-type: text/html; charset=utf-8");

echo $_GET['param1'];
echo '<br />'; 
echo $_GET['param2'];

Axios POST 请求PHP 数据

Axios post 不同的 Content-Type 参见 Axios POST 提交数据的三种请求方式写法

方式一:

const params = new URLSearchParams();
    params.append('param1', 'value1');
    params.append('param2', 'value2');
    axios.post('//demo.runoops.com/php/axios-request.php', params).then(function (response) {
      let data = response.data;
      console.log(data);
      document.write(data);
    }).catch(function (error) {
      console.log(error);
    });

方式二(推荐):

        // 一般引入qs库都赋值为qs,不过浏览器全局引入的是 window.Qs对象,
        // 所以直接用 qs.stringify() 会报 qs undefined
        var qs = Qs;
        const data = { 'bar': 123 };
        const url = "//demo.runoops.com/php/axios-request.php";
        const options = {
            method: 'POST',
            headers: { 'content-type': 'application/x-www-form-urlencoded' },
            data: qs.stringify(data),
            url,
        };
        axios(options).then(function (response) {
        	let data = response.data;
           console.log(data);
           document.write(data);
        }).catch(function (error) {
          console.log(error);
        });

方式三:

        let params = new FormData();
        params.append('param1', 'value1');
        params.append('param2', 'value2');

        axios.post("//demo.runoops.com/php/axios-request.php", params)
            .then(res => {
                console.log('res=>', res);
                document.write(res.data);
            })

PHP 端代码如下,可以用$_POST 或$_REQUEST 获取变量值:

实例

<?php
header("Access-Control-Allow-Origin: *");
header("Content-type: text/html; charset=utf-8");

echo $_POST ['param1'];
echo '<br />'; 
echo $_POST ['param2'];

Captcha Code

0 笔记

分享笔记

Inline Feedbacks
View all notes