AngularJS - มีวิธีใดให้ $ http.post ส่งพารามิเตอร์คำขอแทน JSON?

ฉันมีรหัสเก่าที่สร้างคำขอ AJAX POST ผ่านวิธีการโพสต์ของ jQueryและมีลักษณะดังนี้:

$.post("/foo/bar", requestData,
    function(responseData)
    {
        //do stuff with response
    }

requestData เป็นเพียงวัตถุจาวาสคริปต์ที่มีคุณสมบัติสตริงพื้นฐานบางอย่าง

ฉันกำลังดำเนินการย้ายข้อมูลของเราไปใช้ Angular และฉันต้องการแทนที่การเรียกนี้ด้วย $ http.post ฉันคิดสิ่งต่อไปนี้:

$http.post("/foo/bar", requestData).success(
    function(responseData) {
        //do stuff with response
    }
});

เมื่อฉันทำเช่นนี้ฉันได้รับการตอบสนองข้อผิดพลาด 500 จากเซิร์ฟเวอร์ เมื่อใช้ Firebug ฉันพบว่าสิ่งนี้ส่งเนื้อหาคำขอดังนี้:

{"param1":"value1","param2":"value2","param3":"value3"}

jQuery ที่ประสบความสำเร็จ$.postจะส่งเนื้อหาดังนี้:

param1=value1&param2=value2&param3=value3

จุดสิ้นสุดที่ฉันกำลังกดปุ่มคาดว่าจะมีพารามิเตอร์คำขอไม่ใช่ JSON ดังนั้นคำถามของฉันคือต่อไปที่จะบอก$http.postให้ส่งวัตถุจาวาสคริปต์เป็นพารามิเตอร์คำขอแทน JSON หรือไม่ ใช่ฉันรู้ว่าฉันสามารถสร้างสตริงด้วยตัวเองจากออบเจ็กต์ได้ แต่ฉันอยากรู้ว่า Angular ให้อะไรมาจากกล่อง

ฉันคิดว่าparamsพารามิเตอร์ config จะไม่ทำงานที่นี่เนื่องจากเพิ่มสตริงลงใน url แทนที่จะเป็น body แต่เพื่อเพิ่มสิ่งที่ Infeligo แนะนำที่นี่คือตัวอย่างของการแทนที่ global ของการแปลงเริ่มต้น (โดยใช้ jQuery paramเป็นตัวอย่างในการแปลง ข้อมูลไปยังสตริงพารามิเตอร์)

ตั้งค่าฟังก์ชัน transformRequest ส่วนกลาง:

var app = angular.module('myApp');

app.config(function ($httpProvider) {
    $httpProvider.defaults.transformRequest = function(data){
        if (data === undefined) {
            return data;
        }
        return $.param(data);
    }
});

ด้วยวิธีนี้การโทรไปยัง $ http.post ทั้งหมดจะแปลงร่างเป็นรูปแบบพารามิเตอร์เดียวกับที่ใช้โดยการ$.postเรียกjQuery

โปรดทราบว่าคุณอาจต้องการตั้งค่าส่วนหัวประเภทเนื้อหาต่อการโทรหรือทั่วโลกเช่นนี้:

$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';

ตัวอย่างไม่ใช่ global transformRequest ต่อการโทร:

    var transform = function(data){
        return $.param(data);
    }

    $http.post("/foo/bar", requestData, {
        headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
        transformRequest: transform
    }).success(function(responseData) {
        //do stuff with response
    });

หากใช้Angular> = 1.4นี่เป็นวิธีแก้ปัญหาที่สะอาดที่สุดที่ฉันพบโดยไม่ต้องพึ่งพาอะไรที่กำหนดเองหรือภายนอก:

angular.module('yourModule')
  .config(function ($httpProvider, $httpParamSerializerJQLikeProvider){
    $httpProvider.defaults.transformRequest.unshift($httpParamSerializerJQLikeProvider.$get());
    $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=utf-8';
});

จากนั้นคุณสามารถทำได้ทุกที่ในแอปของคุณ:

$http({
  method: 'POST',
  url: '/requesturl',
  data: {
    param1: 'value1',
    param2: 'value2'
  }
});

และจะทำให้ข้อมูลเป็นอนุกรมอย่างถูกต้องparam1=value1&param2=value2และส่งไป/requesturlด้วยapplication/x-www-form-urlencoded; charset=utf-8ส่วนหัว Content-Type ตามปกติที่คาดไว้กับคำขอ POST บนอุปกรณ์ปลายทาง

จากเอกสาร AngularJS:

params - {Object.} - แผนที่ของสตริงหรือวัตถุที่จะเปลี่ยนเป็น? key1 = value1 & key2 = value2 หลัง url หากค่าไม่ใช่สตริงค่านั้นจะเป็น JSONified

ดังนั้นให้สตริงเป็นพารามิเตอร์ หากคุณไม่ต้องการสิ่งนั้นให้ใช้การเปลี่ยนแปลง อีกครั้งจากเอกสาร:

เมื่อต้องการแทนที่การแปลงเหล่านี้แบบโลคัลให้ระบุฟังก์ชันการแปลงเป็นคุณสมบัติ transformRequest และ / หรือ transformResponse ของอ็อบเจ็กต์ config ในการแทนที่การแปลงเริ่มต้นทั่วโลกให้แทนที่คุณสมบัติ $ httpProvider.defaults.transformRequest และ $ httpProvider.defaults.transformResponse ของ $ httpProvider

โปรดดูเอกสารสำหรับรายละเอียดเพิ่มเติม

ใช้$.paramฟังก์ชันของ jQuery เพื่อจัดลำดับข้อมูล JSON ใน requestData

กล่าวโดยย่อคือใช้รหัสที่คล้ายกันกับของคุณ:

$http.post("/foo/bar",
$.param(requestData),
{
    headers:
    {
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
    }
}
).success(
    function(responseData) {
        //do stuff with response
    }
});

สำหรับการใช้งานคุณต้องรวม jQuery ไว้ในเพจของคุณพร้อมกับ AngularJS

โปรดทราบว่าใน Angular 1.4 คุณสามารถจัดลำดับข้อมูลในฟอร์มโดยไม่ต้องใช้ jQuery

ใน app.js:

module.run(function($http, $httpParamSerializerJQLike) {
  $http.defaults.transformRequest.unshift($httpParamSerializerJQLike);
});

จากนั้นในตัวควบคุมของคุณ:

$http({
    method: 'POST',
    url: myUrl',
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    data: myData
});

นี่อาจเป็นการแฮ็กเล็กน้อย แต่ฉันหลีกเลี่ยงปัญหานี้และแปลง json เป็นอาร์เรย์ POST ของ PHP ทางฝั่งเซิร์ฟเวอร์:

$_POST = json_decode(file_get_contents('php://input'), true);

ฉันมีปัญหาเช่นกันกับการตั้งค่าการพิสูจน์ตัวตน http ที่กำหนดเองเนื่องจาก $ resource แคชตามคำขอ

เพื่อให้ใช้งานได้คุณต้องเขียนทับส่วนหัวที่มีอยู่โดยทำสิ่งนี้

var transformRequest = function(data, headersGetter){
  var headers = headersGetter();
  headers['Authorization'] = 'WSSE profile="UsernameToken"';
  headers['X-WSSE'] = 'UsernameToken ' + nonce
  headers['Content-Type'] = 'application/json';
};

return $resource(
  url,
    {
    },
    {
      query: {
        method: 'POST',
        url: apiURL + '/profile',
        transformRequest: transformRequest,
        params: {userId: '@userId'}
      },
    }
);

ฉันหวังว่าฉันจะสามารถช่วยใครสักคนได้ ฉันใช้เวลา 3 วันในการคิดออก

แก้ไขส่วนหัวเริ่มต้น:

$http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded;charset=utf-8";

จากนั้นใช้$.paramวิธีของ JQuery :

var payload = $.param({key: value});
$http.post(targetURL, payload);

   .controller('pieChartController', ['$scope', '$http', '$httpParamSerializerJQLike', function($scope, $http, $httpParamSerializerJQLike) {
        var data = {
                TimeStamp : "2016-04-25 12:50:00"
        };
        $http({
            method: 'POST',
            url: 'serverutilizationreport',
            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
            data: $httpParamSerializerJQLike(data),
        }).success(function () {});
    }
  ]);

การปรับอย่างรวดเร็ว - สำหรับผู้ที่มีปัญหากับการกำหนดค่าส่วนกลางของฟังก์ชัน transformRequest นี่คือตัวอย่างข้อมูลที่ฉันใช้เพื่อกำจัดCannot read property 'jquery' of undefinedข้อผิดพลาด:

$httpProvider.defaults.transformRequest = function(data) {
        return data != undefined ? $.param(data) : null;
    }

คุณยังสามารถแก้ปัญหานี้ได้โดยไม่ต้องเปลี่ยนรหัสในเซิร์ฟเวอร์เปลี่ยนส่วนหัวในการ$http.postโทรและใช้$_POSTวิธีปกติ อธิบายที่นี่: http://victorblog.com/2012/12/20/make-angularjs-http-service-behave-like-jquery-ajax/

ฉันพบพฤติกรรมที่เป็นปัญหาหลายครั้งของทั้งหมดนี้ ฉันใช้มันจาก express (ไม่มีการพิมพ์) และ bodyParser (ด้วยการพิมพ์ dt ~ body-parser)

ฉันไม่ได้พยายามอัปโหลดไฟล์ แต่เพียงแค่ตีความ JSON ที่ให้ในสตริงโพสต์

มันrequest.bodyเป็นเพียง json ที่ว่างเปล่า ( {})

หลังจากการตรวจสอบมากมายในที่สุดสิ่งนี้ก็ได้ผลสำหรับฉัน:

import { json } from 'body-parser';
...
app.use(json()); <-- should be defined before the first POST handler!

การระบุapplication/jsonประเภทเนื้อหาในสตริงคำขอจากฝั่งไคลเอ็นต์อาจเป็นสิ่งสำคัญ

ไวยากรณ์สำหรับ AngularJS v1.4.8 + (v1.5.0)

       $http.post(url, data, config)
            .then(
                    function (response) {
                        // success callback
                    },
                    function (response) {
                        // failure callback
                    }
            );

เช่น:

    var url = "http://example.com";

    var data = {
        "param1": "value1",
        "param2": "value2",
        "param3": "value3"
    };

    var config = {
        headers: {
            'Content-Type': "application/json"
        }
    };

    $http.post(url, data, config)
            .then(
                    function (response) {
                        // success callback
                    },
                    function (response) {
                        // failure callback
                    }
            );