使用application / x-www-form-urlencoded格式

Question

所以我有这段代码：

axios({
    method: 'post',
    url,
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    data: {
        json,
        type,
    }   
})

最初我有正常的axios.post，但我改为这个，因为我认为它可能是一个标题问题。但是，我仍在$_REQUEST或$_POST中没有检测到任何内容。但是，它正在file_get_contents("php://input")中接收数据。

知道出了什么问题吗？

修改

好吧，我想我知道什么是错的。它将它作为json对象发布，因此只能在php：//输入中读取。如何在axios中将其更改为普通字符串？

Answer 1

来自the documentation（我没有保留引用材料中的链接）：

使用application / x-www-form-urlencoded格式

默认情况下，axios将JavaScript对象序列化为JSON。发送数据   在application / x-www-form-urlencoded格式中，您可以使用   以下选项之一。

浏览器

在浏览器中，您可以按如下方式使用URLSearchParams API：
var params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params); 
请注意，并非所有浏览器都支持URLSearchParams   是一种可用的填充物（确保填充全局填充物   环境）。

或者，您可以使用qs库编码数据：
var qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 }));

Answer 2

var params = {
    data1: 'string',
}

axios.post(url, params).then(function(response) {
    //code here 
});

或

axios.post(url, {data1: 'string' }).then(function(response) {
    //code here 
});

api

$_POST = json_decode(file_get_contents("php://input"),true);
echo $_POST['data1'];

Answer 3

如果您决定在AJAX库或服务器语言之间进行切换，则使事情变得更加简单和通用。对于axios，请使用本机JS FormData。
如果您的对象中有数据，则可以将其转换为FormData，如下所示：

var myDataObj = {id:1, name:"blah blah"}
var formData = new FormData();


for (var key in myDataObj) {
    formData.append(key, myDataObj[key])
}

然后您发送数据：

axios.post('/sub/process.php', formData, {
    params: { action: "update-user" },
    headers: { 'Content-Type': 'multipart/form-data' },
    baseURL: 'http://localhost',
}).then(data =>
    console.log(data)
).catch(err => {
    console.log(err)
    return null
})

请注意，您还可以使用params中的axios发送一些信息，您可以使用$_GET进行检索。另请注意，如果您的网页和API终结点具有不同的服务器，我将使用baseURL。
您还需要了解，在axios发送实际请求之前，它会执行preflight请求。 A preflight request, is a mechanism in CORS by the browser to check if the resource destination is willing to accept the real request or not. Afterall, why would a request be sent when the target host is not willing to receive it anyway?

您必须确保您的服务器具有适用于axios请求的标头，否则预检请求将检测到不兼容并停止您的请求：

//this is if you are using different different origins/servers in your localhost, * to be update with the right address when it comes to production
header('Access-Control-Allow-Origin: *');
//this is if you are specifying content-type in your axios request
header("Access-Control-Allow-Headers: Content-Type");

现在，您将可以在$_POST变量中访问发送的数据：

echo "<pre>";
print_r($_POST);
echo "</pre>";

此外，axios还允许您以不同的格式发送数据。您可以发送一个json这样的示例：

axios.post('/sub/process.php', { id: "1", name:"blablah" }, {
    params: { action: "update-item" },
    headers: { 'Content-Type': 'application/json' },
    baseURL: 'http://localhost',
}).then(data =>
    console.log(data)
).catch(err => {
    console.log(err)
    return null
})

在PHP方面，可以按以下方式进行访问：

$data = json_decode(file_get_contents("php://input"),true);
echo "<pre>";
print_r($data);
echo "</pre>";

Answer 4

使用PHP std对象

使用PHP std对象结构获取帖子的变量。

在客户端上：

axios.post(url, {id: 1 , Name:'My Name' }).then(function(response) {
    console.log(response.data);
});

在服务器上

$obj = json_decode(file_get_contents('php://input'));   
$id = $obj->id;
$Name = $obj->Name;    

//test by returning the same values
$retObj=(object)["id"=>$id,"Name"=>$Name]
echo json_encode($retObj);

jQuery和Axios都使用相同的PHP文件

如果您有一个文件接收来自axios和jquery的帖子，则可以使用：

if($_SERVER['REQUEST_METHOD']==='POST' && empty($_POST)) {
   $_POST = json_decode(file_get_contents('php://input'),true); 
}

将Axios json序列化的帖子转换为$ _POST数组

Answer 5

您可以使用jQuery.param

postdata = $.param({param1: 'value1', param2:'value2'})

您现在可以使用postdata具有您的帖子参数

Answer 6

只想分享我的见解，我面临着类似的问题，并通过以下代码集解决了该问题

JS

Nz

PHP

const instructions_str = {
  login: {
    "type": "devTool",
    "method": "devTool_login",
    "data": {
        "username": "test",
        "password": "Test@the9" 
    }
  },
  tables: {
    "type": "devTool",
    "method": "devTool_get_all_tables",
    "data": ""
  }
};

const body = {
    firstName: 'Fred',
    lastName: 'Flintstone',
    name: "John",
    time: "2pm",
    instructions : JSON.stringify(instructions_str)  
};

function decodeData(data) {
  const serializedData = []

  for (const k in data) {
    if (data[k]) {
      serializedData.push(`${k}=${encodeURIComponent(data[k])}`)
    }
  }

  return serializedData.join('&')
};

const body2 = decodeData(body);

axios.post('URL', body2)
  .then(response => {
    console.log("contextApi got it", response);
  }).catch(error => {
      console.log("contextApi error.response", error.response);
  });

我还发现此github页面非常有用https://github.com/axios/axios/issues/1195

Axios发布的参数不是由$ _POST读取的

6 个答案:

使用application / x-www-form-urlencoded格式

浏览器