如何為REST API調用編碼URL參數？

Question

我必須創建一些在REST API調用中使用的url參數。 我正在使用Angularjs 1.4.2和一種將參數傳遞給服務函數的表單，該函數會構建參數並向API進行$ http.post調用。 我為參數構建塊創建了一個插件。

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錯誤。

我創建了一個插件，嘗試看看正在發生什么。 在插件中，以下是硬編碼（數據）的最終結果：

數據為：env=dev&grant_type=password&password=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字符串。

=“ username”：“ james@gmail.com”，“ password”：“ myPassword”，“ grant_type”：“ password”，“ env”：“ dev”}

為什么會這樣，我必須手動創建一個函數來創建URL字符串，還是有其他解決方案？

Answer 1

我們必須將JavaScript對象賦予函數“ httpParamSerializerJQLike（）”，而不是字符串，因為您正在執行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()來創建查詢字符串

 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);

Answer 3

我正在使用Angularjs 1.4.2和一種將參數傳遞給服務函數的表單，該函數會構建參數並向API進行$http.post調用。

無需使用$ http服務手動編碼url參數。 只需使用config對象的params屬性：

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

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

請參閱在PLNKR上使用此DEMO進行的編碼。

如何為REST API調用編碼URL參數？

問題描述

3 個解決方案

解決方案1
2 已采納 2017-07-22 01:33:30

解決方案2
0 2017-07-22 01:31:27

解決方案3
0 2017-07-22 04:58:25

如何為REST API調用編碼URL參數？

問題描述

3 個解決方案

解決方案1 2 已采納 2017-07-22 01:33:30

解決方案2 0 2017-07-22 01:31:27

解決方案3 0 2017-07-22 04:58:25

解決方案1
2 已采納 2017-07-22 01:33:30

解決方案2
0 2017-07-22 01:31:27

解決方案3
0 2017-07-22 04:58:25