Question

我必须创建一些我在REST API调用中使用的url参数。我正在使用Angularjs 1.4.2和一个表单将参数传递给服务函数，该函数构建参数并对API进行$ http.post调用。我为参数构建部件创建了一个plunker。

的index.html

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.4.2" data-semver="1.4.2" src="https://code.angularjs.org/1.4.2/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="app">
    <div ng-controller="mainCtrl">
      testData is: {{testData}}<p></p>
      The data is: {{data}}
    </div>
  </body>

</html>

的script.js

// Code goes here
var app = angular.module("app", []);

app.controller('mainCtrl', function($scope, $httpParamSerializerJQLike) {
    //Create JavaScript object.
   var testData = {};

    //Load the object with the same data as data.
    testData = loadTestData(testData);
    console.log("testData is: " + JSON.stringify(testData));
    //testData is: {"username":"james@gmail.com","password":"myPassword","grant_type":"password","env":"dev"}

    //Use stringify to make it into a JSON string.
    $scope.testData = $httpParamSerializerJQLike(JSON.stringify(testData));
    //Decoded testData
    //={"username":"james@gmail.com","password":"myPassword","grant_type":"password","env":"dev"}

    $scope.data = $httpParamSerializerJQLike({
      "username":"james@gmail.com",
      "password":"myPassword",
      "grant_type":"password",
      "env": "dev"
    });


    function loadTestData(testData){
      testData.username = "james@gmail.com";
      testData.password = "myPassword";
      testData.grant_type = "password";
      testData.env = "dev";
      return testData; 
    }
});

我将硬编码数据放入一个名为data的变量中，然后使用$ httpParamSerializerJQLike来序列化数据。使用我的硬编码数据，称为数据，一切正常，我在实际代码中通过API调用获得HTTP 200成功响应。

因此，我为参数创建了一个名为testData的JavaScript对象，使用JSON.stringify将其从对象转换为JSON，然后使用httpParamSerializerJQLike序列化数据。但是，硬编码（数据）看起来不像testData，它会抛出HTTP 401错误。

我创建了一个plunker来试着看看发生了什么。在plunker中，硬编码（数据）的结果如下：

数据是：   ENV =设备＆安培; grant_type =密码＆安培;密码= MYPASSWORD＆安培; username=james@gmail.com

以下是testData的结果：testData是：   =％7B％22username％22：％22james @ gmail.com％22％22password％22：％22myPassword％22％22grant_type％22：％22password％22％22env％22：％22dev％22％7D

解码的testData显然不适用于URL字符串;

= “用户名”： “james@gmail.com”， “密码”： “MYPASSWORD”， “grant_type”： “密码”， “ENV”： “dev的”}

为什么这是我必须手动创建一个函数来创建URL字符串还是有其他解决方案？

Answer 1

我们必须将JavaScript对象提供给函数＆＃34; httpParamSerializerJQLike（）＆＃34;，而不是字符串，因为您正在执行JSON.Stringify（testData）。

试试这个，它对我有用：

    $scope.testData = $httpParamSerializerJQLike(testData);

现在输出是：

testData is: env=dev&grant_type=password&password=myPassword&username=james@gmail.com
The data is: env=dev&grant_type=password&password=myPassword&username=james@gmail.com

Answer 2

您可以使用Object.entries()获取包含JavaScript对象的属性和值的数组数组，使用Array.prototype.map()迭代数组，使用参数.join()链""来创建查询字符串

＆＃13;

let o = {
  "username": "james@gmail.com",
  "password": "myPassword",
  "grant_type": "password",
  "env": "dev"
};

let props = Object.entries(o);
let params = `?${props.map(([key, prop], index) => 
                `${key}=${prop}${index < props.length -1 ? "&" : ""}`
             ).join("")}`;

console.log(params);

＆＃13;

Answer 3

我使用Angularjs 1.4.2和表单将参数传递给服务函数，该服务函数构建参数并对API进行$http.post调用。

无需使用$http service手动编码网址参数。只需使用配置对象的params属性：

var params = {name: "joe"};
var config = { params: params };

var httpPromise = $http.post(url, data, config);

请参阅使用此DEMO on PLNKR完成的编码。

如何编码REST API调用的URL参数？

3 个答案: