无法通过 angularjs 的 $http 模块 POST 数据到服务器

Question

我正在使用 angular ajax 进行编码。客户端代码是：

$http({
    method: 'POST',
    url: '----/test.php',
    data: ({'txtDeviceID': 12345678}),
    headers: {
        'Content-type': 'application/text'
    }
}).then(function successCallback(response) {
    console.log(response)
}, function errorCallback(response) {
    console.log(response)
});

服务器端代码是：

header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers: Origin, X-Requested-With,Content-Type, Accept");
header('Access-Control-Allow-Methods: GET, POST, PUT');
echo $_POST['txtDeviceID'];

为什么我无法获得 texDeviceId？感谢您的宝贵时间！

Answer 1

设置'Content-type'：'application/json'

Answer 2

你的问题

您的问题是，因为您将 JSON 数据发送到 PHP 文件，但 PHP 期望它的格式为参数格式：

您的客户端代码发送 {'txtDeviceID': 12345678}
但服务器代码需要 txtDeviceID=12345678

要解决这个问题，您有两个选择，更改您的客户端代码以发送表单参数格式的数据或更改您的服务器代码以期望以 JSON 格式发送数据。

更改您的客户端代码

查找 response.data 并将请求的 content-type 更改为 application/x-www-form-urlencoded，此外，您应该使用 $httpParamSerializer.

将数据转换为表单格式

$http({
    method: 'POST',
    url: '----/test.php',       
    data: $httpParamSerializer({ 'txtDeviceID': 12345678 }),  
    // or data: "txtDeviceID=12345678",
    headers: {
        'Content-type': 'application/x-www-form-urlencoded'
    }
}).then(function successCallback(response) {
    console.log(response.data)
}, function errorCallback(response) {
    console.log(response)
});

有关详细信息，请阅读 $http docs

The response object has these properties:

data – {string|Object} – The response body transformed with the transform functions.

status – {number} – HTTP status code of the response.

headers – {function([headerName])} – Header getter function.

config – {Object} – The configuration object that was used to generate the request.

statusText – {string} – HTTP status text of the response.

或更改您的服务器代码。

要获取原始提交数据，您需要使用 file_get_contents('php://input')

header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers: Origin, X-Requested-With,Content-Type, Accept");
header('Access-Control-Allow-Methods: GET, POST, PUT');

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

Answer 3

尝试这样的事情

$http({
    method: 'POST',
    url: '----/test.php',
    data: {"txtDeviceID":12345678},
    headers: {
    'Content-type': 'application/json'
}
  }).then(function (response) {
    console.log(response)
    }, function (response) {
      console.log(response)
    });

像这样修改您的 php 文件

header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers: Origin, X-Requested-With,Content-Type, Accept");
header('Access-Control-Allow-Methods: GET, POST, PUT');


$jsonstring = file_get_contents ( 'php://input' );
$arr = json_decode($jsonstring,true);
echo $arr["txtDeviceID"];

Answer 4

在您的 PHP 中，将 echo $_POST['txtDeviceID']; 更改为 echo json_encode($_POST['txtDeviceID']);

并在您的控制器中确保 data 在 object.

上

$http({
    method: 'POST',
    url: '----/test.php',
    data: {'txtDeviceID':12345678}
  }).then(function successCallback(response) {
    // look specifically for "txtDeviceID"
    console.log(response.data.txtDeviceID)
    }, function errorCallback(error) {
      console.log(error)
    });

Answer 5

像下面这样使用 $http 拦截器，它对我有用

(function(){
  angular.module('xxxxxxx').factory('sessionInjector', function() {  
      var sessionInjector = {
          request: function(config) {

              config.headers['Authorization'] = "Bearer " + sessionStorage.getItem('token');

              if(config.method == 'POST') {
                if(config.data) {
                  config.data = $.param(config.data); //jQuery magic but php likes
                }
              }

              return config;
          },
          response: function(res) {
              console.log(res);
                return res;
          }
      };
      return sessionInjector;
  });
}());

无法通过 angularjs 的 $http 模块 POST 数据到服务器

Cannot POST data to server through angularjs's $http module

javascript

php

ajax

angularjs

angularjs-http

你的问题

更改您的客户端代码

或更改您的服务器代码。