AngularJs $ http.post () ไม่ส่งข้อมูล

ใครสามารถบอกฉันได้ว่าทำไมข้อความต่อไปนี้ไม่ส่งข้อมูลการโพสต์ไปยัง URL ที่กำหนด? url ถูกเรียกใช้ แต่อยู่บนเซิร์ฟเวอร์เมื่อฉันพิมพ์ $ _POST - ฉันได้อาร์เรย์ที่ว่างเปล่า ถ้าฉันพิมพ์ข้อความในคอนโซลก่อนเพิ่มลงในข้อมูล - แสดงเนื้อหาที่ถูกต้อง

$http.post('request-url',  { 'message' : message });

ฉันได้ลองกับข้อมูลเป็นสตริง (ด้วยผลลัพธ์เดียวกัน):

$http.post('request-url',  "message=" + message);

ดูเหมือนว่าจะใช้งานได้เมื่อฉันใช้ในรูปแบบต่อไปนี้:

$http({
    method: 'POST',
    url: 'request-url',
    data: "message=" + message,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
});

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

ฉันพบปัญหาเดียวกันกับ asp.net MVC และพบวิธีแก้ปัญหาที่นี่

มีความสับสนอย่างมากในหมู่ผู้มาใหม่ถึงAngularJSว่าทำไม $httpฟังก์ชั่นบริการชวเลข ( $http.post()ฯลฯ ) ไม่ปรากฏว่าสามารถสลับสับเปลี่ยนได้ด้วยjQuery ที่เทียบเท่า ( jQuery.post()ฯลฯ )

ความแตกต่างคือวิธีการjQueryและAngularJSต่อเนื่องและส่งข้อมูล ปัญหาพื้นฐานอยู่ที่ภาษาเซิร์ฟเวอร์ที่คุณเลือกไม่สามารถเข้าใจการส่งสัญญาณของ AngularJS ได้ ... โดยค่าเริ่มต้นjQuery จะส่งข้อมูลโดยใช้

Content-Type: x-www-form-urlencoded

และการfoo=bar&baz=moeทำให้เป็นอันดับที่คุ้นเคย

อย่างไรก็ตามAngularJSส่งข้อมูลโดยใช้

Content-Type: application/json 

และ { "foo": "bar", "baz": "moe" }

การทำให้เป็นอันดับ JSON ซึ่งน่าเสียดายที่บางเว็บเซิร์ฟเวอร์ของภาษา - โดยเฉพาะอย่างยิ่ง PHP -ไม่ต้องยกเลิกการตั้งค่าดั้งเดิม

ทำงานเหมือนจับใจ

รหัส

// Your app's root module...
angular.module('MyModule', [], function($httpProvider) {
  // Use x-www-form-urlencoded Content-Type
  $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';

  /**
   * The workhorse; converts an object to x-www-form-urlencoded serialization.
   * @param {Object} obj
   * @return {String}
   */ 
  var param = function(obj) {
    var query = '', name, value, fullSubName, subName, subValue, innerObj, i;

    for(name in obj) {
      value = obj[name];

      if(value instanceof Array) {
        for(i=0; i<value.length; ++i) {
          subValue = value[i];
          fullSubName = name + '[' + i + ']';
          innerObj = {};
          innerObj[fullSubName] = subValue;
          query += param(innerObj) + '&';
        }
      }
      else if(value instanceof Object) {
        for(subName in value) {
          subValue = value[subName];
          fullSubName = name + '[' + subName + ']';
          innerObj = {};
          innerObj[fullSubName] = subValue;
          query += param(innerObj) + '&';
        }
      }
      else if(value !== undefined && value !== null)
        query += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&';
    }

    return query.length ? query.substr(0, query.length - 1) : query;
  };

  // Override $http service's default transformRequest
  $httpProvider.defaults.transformRequest = [function(data) {
    return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data;
  }];
});

ยังไม่ชัดเจนด้านบน แต่ถ้าคุณได้รับคำขอใน PHP คุณสามารถใช้:

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

ในการเข้าถึงอาร์เรย์ใน PHP จาก AngularJS POST

คุณสามารถตั้งค่าเริ่มต้น "ประเภทเนื้อหา" เช่นนี้:

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

เกี่ยวกับdataรูปแบบ:

วิธี $ http.post และ $ http.put ยอมรับวัตถุ JavaScript ใด ๆ (หรือสตริง) เป็นพารามิเตอร์ข้อมูลของพวกเขา หากข้อมูลเป็นวัตถุ JavaScript จะถูกแปลงเป็นสตริง JSON ตามค่าเริ่มต้น

ลองใช้รูปแบบนี้

function sendData($scope) {
    $http({
        url: 'request-url',
        method: "POST",
        data: { 'message' : message }
    })
    .then(function(response) {
            // success
    }, 
    function(response) { // optional
            // failed
    });
}

ฉันมีปัญหาที่คล้ายกันและฉันสงสัยว่าสิ่งนี้จะมีประโยชน์เช่นกัน: https://stackoverflow.com/a/11443066

var xsrf = $.param({fkey: "key"});
$http({
    method: 'POST',
    url: url,
    data: xsrf,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})

ความนับถือ,

ฉันชอบที่จะใช้ฟังก์ชั่นในการแปลงวัตถุเป็นโพสต์พารามิเตอร์

myobject = {'one':'1','two':'2','three':'3'}

Object.toparams = function ObjecttoParams(obj) {
    var p = [];
    for (var key in obj) {
        p.push(key + '=' + encodeURIComponent(obj[key]));
    }
    return p.join('&');
};

$http({
    method: 'POST',
    url: url,
    data: Object.toparams(myobject),
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})

ในที่สุดนี้ได้รับการแก้ไขในเชิงมุม 1.4 ใช้ $ httpParamSerializerJQLike

ดูhttps://github.com/angular/angular.js/issues/6039

.controller('myCtrl', function($http, $httpParamSerializerJQLike) {
$http({
  method: 'POST',
  url: baseUrl,
  data: $httpParamSerializerJQLike({
    "user":{
      "email":"wahxxx@gmail.com",
      "password":"123456"
    }
  }),
  headers:
    'Content-Type': 'application/x-www-form-urlencoded'
})})

ฉันใช้jQuery paramกับAngularJS post requrest นี่คือตัวอย่าง ... สร้างโมดูลแอปพลิเคชัน AngularJS ซึ่งmyappถูกกำหนดด้วยng-appในโค้ด HTML ของคุณ

var app = angular.module('myapp', []);

ตอนนี้ให้เราสร้างตัวควบคุมเข้าสู่ระบบและอีเมล POST และรหัสผ่าน

app.controller('LoginController', ['$scope', '$http', function ($scope, $http) {
    // default post header
    $http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
    // send login data
    $http({
        method: 'POST',
        url: 'https://example.com/user/login',
        data: $.param({
            email: $scope.email,
            password: $scope.password
        }),
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    }).success(function (data, status, headers, config) {
        // handle success things
    }).error(function (data, status, headers, config) {
        // handle error things
    });
}]);

ฉันไม่ชอบที่จะแปลรหัสมันง่ายพอที่จะเข้าใจ :) โปรดทราบว่าparamมาจาก jQuery ดังนั้นคุณต้องติดตั้งทั้ง jQuery และ AngularJS เพื่อให้ทำงานได้ นี่คือภาพหน้าจอ

หวังว่านี่จะเป็นประโยชน์ ขอบคุณ!

ฉันมีปัญหาเดียวกันกับ AngularJS และ Node.js + Express 4 + Router

เราเตอร์คาดว่าข้อมูลจากคำขอโพสต์ในร่างกาย เนื้อความนี้ว่างเปล่าเสมอถ้าฉันทำตามตัวอย่างจาก Angular Docs

โน้ต 1

$http.post('/someUrl', {msg:'hello word!'})

แต่ถ้าฉันใช้มันในข้อมูล

โน้ต 2

$http({
       withCredentials: false,
       method: 'post',
       url: yourUrl,
       headers: {'Content-Type': 'application/x-www-form-urlencoded'},
       data: postData
 });

แก้ไข 1:

มิฉะนั้นเราเตอร์ node.js จะคาดหวังข้อมูลใน req.body ถ้าใช้สัญกรณ์ 1:

req.body.msg

ซึ่งยังส่งข้อมูลเป็น JSON ส่วนของข้อมูล นี่จะดีกว่าในบางกรณีที่คุณมีอาร์เรย์ใน json และ x-www-form-urlencoded ของคุณจะทำให้เกิดปัญหา

มันทำงานได้ หวังว่ามันจะช่วย

ไม่เหมือน JQuery และเพื่อประโยชน์ของคนเดินเท้า Angular ใช้รูปแบบ JSON สำหรับการถ่ายโอนข้อมูล POST จากไคลเอนต์ไปยังเซิร์ฟเวอร์ (JQuery ใช้ x-www-form-urlencoded ดังนั้นจึงมีปัญหาสองส่วน: ในส่วนลูกค้า js และส่วนเซิร์ฟเวอร์ของคุณ ดังนั้นคุณต้อง:

1. ใส่ส่วนของลูกค้า js Angular เช่นนี้:

   $http({
   method: 'POST',
   url: 'request-url',
   data: {'message': 'Hello world'}
   });

และ

2. เขียนในส่วนเซิร์ฟเวอร์ของคุณเพื่อรับข้อมูลจากไคลเอนต์ (ถ้าเป็น php)

           $data               = file_get_contents("php://input");
           $dataJsonDecode     = json_decode($data);
           $message            = $dataJsonDecode->message;
           echo $message;     //'Hello world'

หมายเหตุ: $ _POST จะไม่ทำงาน!

วิธีแก้ปัญหาทำงานได้ดีสำหรับฉันหวังว่าและสำหรับคุณ

ในการส่งข้อมูลผ่าน Post methode ด้วย $httpของ angularjs คุณต้องเปลี่ยน

data: "message=" + messageกับ data: $.param({message:message})

วิธีสร้างคำตอบของ @ felipe-miosso:

1. ดาวน์โหลดเป็นโมดูล AngularJS ได้จากที่นี่ ,
2. ติดตั้ง

3. เพิ่มไปยังแอปพลิเคชันของคุณ:

   var app = angular.module('my_app', [ ... , 'httpPostFix']);

ฉันไม่ได้มีชื่อเสียงที่จะแสดงความคิดเห็น แต่ในการตอบสนอง / นอกเหนือจากคำตอบของ Don F:

$params = json_decode(file_get_contents('php://input'));

trueจำเป็นต้องเพิ่มพารามิเตอร์ตัวที่สองในjson_decodeฟังก์ชันเพื่อส่งคืนอาเรย์แบบเชื่อมโยงได้อย่างถูกต้อง:

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

เชิงมุม

  var payload = $.param({ jobId: 2 });

                this.$http({
                    method: 'POST',
                    url: 'web/api/ResourceAction/processfile',
                    data: payload,
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
                });

WebAPI 2

public class AcceptJobParams
        {
            public int jobId { get; set; }
        }

        public IHttpActionResult ProcessFile([FromBody]AcceptJobParams thing)
        {
            // do something with fileName parameter

            return Ok();
        }

รหัสนี้แก้ไขปัญหาให้ฉัน มันเป็นโซลูชันระดับแอปพลิเคชัน:

moduleName.config(['$httpProvider',
  function($httpProvider) {
    $httpProvider.defaults.transformRequest.push(function(data) {
        var requestStr;
        if (data) {
            data = JSON.parse(data);
            for (var key in data) {
                if (requestStr) {
                    requestStr += "&" + key + "=" + data[key];
                } else {
                    requestStr = key + "=" + data[key];
                }
            }
        }
        return requestStr;
    });
    $httpProvider.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
  }
]);

เพิ่มในไฟล์ js ของคุณ:

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

และเพิ่มลงในไฟล์เซิร์ฟเวอร์ของคุณ:

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

ว่าควรจะทำงาน

ฉันยังประสบปัญหาที่คล้ายกันและฉันกำลังทำสิ่งนี้และไม่ได้ผล สปริงคอนโทรลเลอร์ของฉันไม่สามารถอ่านพารามิเตอร์ข้อมูลได้

var paramsVal={data:'"id":"1"'};
  $http.post("Request URL",  {params: paramsVal});  

แต่การอ่านฟอรัมนี้และ API Doc ฉันลองทำตามวิธีนี้และใช้ได้กับฉัน หากบางคนมีปัญหาคล้ายกันคุณสามารถลองด้านล่างด้วยเช่นกัน

$http({
      method: 'POST',
      url: "Request URL",           
      params: paramsVal,
      headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'}
            });

โปรดตรวจสอบhttps://docs.angularjs.org/api/ng/service/ $ http # โพสต์เพื่อดูว่า Param config ทำอะไร {data: '"id": "1"'} - แผนที่ของสตริงหรือวัตถุที่จะเปลี่ยนเป็น URL? data = "id: 1"

นี่อาจเป็นคำตอบที่ล่าช้า แต่ฉันคิดว่าวิธีที่เหมาะสมที่สุดคือการใช้โค้ดเชิงมุมชิ้นเดียวกันเมื่อทำการร้องขอ "รับ" โดยใช้คุณ$httpParamSerializerจะต้องฉีดไปยังคอนโทรลเลอร์ของคุณเพื่อให้คุณสามารถทำสิ่งต่อไปนี้ได้โดยไม่ต้อง ใช้ Jquery เลย $http.post(url,$httpParamSerializer({param:val}))

app.controller('ctrl',function($scope,$http,$httpParamSerializer){
    $http.post(url,$httpParamSerializer({param:val,secondParam:secondVal}));
}

ในกรณีของฉันฉันแก้ไขปัญหาเช่นนี้:

var deferred = $q.defer();

$http({
    method: 'POST',
    url: 'myUri', 
    data: $.param({ param1: 'blablabla', param2: JSON.stringify(objJSON) }),
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}).then(
    function(res) {
        console.log('succes !', res.data);
        deferred.resolve(res.data);
    },
    function(err) {
        console.log('error...', err);
        deferred.resolve(err);
    }
);
return deferred.promise;

คุณต้องใช้ JSON.stringify สำหรับแต่ละพารามิเตอร์ที่มีวัตถุ JSON จากนั้นสร้างวัตถุข้อมูลของคุณด้วย "$ .param" :-)

หมายเหตุ: "objJSON" ของฉันเป็นวัตถุ JSON ที่มีอาร์เรย์จำนวนเต็มสตริงและเนื้อหา HTML ขนาดทั้งหมดของเขาคือ> 3,500 ตัวอักษร

ฉันรู้ว่าได้รับคำตอบที่ยอมรับ แต่การติดตามอาจช่วยผู้อ่านในอนาคตได้หากคำตอบไม่เหมาะกับพวกเขาไม่ว่าด้วยเหตุผลใด

เชิงมุมไม่ได้ทำอาแจ็กซ์เหมือนกับ jQuery ขณะที่ฉันพยายามทำตามคำแนะนำเพื่อปรับเปลี่ยนมุม$httpproviderฉันพบปัญหาอื่น ๆ เช่นฉันใช้ codeigniter ซึ่ง$this->input->is_ajax_request()ฟังก์ชั่นล้มเหลวเสมอ (ซึ่งเขียนโดยโปรแกรมเมอร์อื่นและใช้ทั่วโลกดังนั้นไม่สามารถเปลี่ยนแปลงได้) บอกว่านี่ไม่ใช่คำขอ ajax จริง

ในการแก้ปัญหานี้ฉันได้รับความช่วยเหลือจากคำสัญญาที่เลื่อนออกไป ฉันทดสอบใน Firefox และ IE9 และใช้งานได้

ฉันมีฟังก์ชั่นต่อไปนี้กำหนดไว้นอกรหัสเชิงมุมใด ๆ ฟังก์ชั่นนี้ทำให้ jquery ajax call ปกติและส่งคืนวัตถุรอการตัดบัญชี / สัญญา (ฉันยังคงเรียนรู้)

function getjQueryAjax(url, obj){
    return $.ajax({
        type: 'post',
        url: url,
        cache: true,
        data: obj
    });
}

จากนั้นฉันเรียกมันว่ารหัสเชิงมุมโดยใช้รหัสต่อไปนี้ โปรดทราบว่าเรามีการปรับปรุงด้วยตนเองโดยใช้$scope$scope.$apply()

    var data = {
        media: "video",
        scope: "movies"
    };
    var rPromise = getjQueryAjax("myController/getMeTypes" , data);
    rPromise.success(function(response){
        console.log(response);
        $scope.$apply(function(){
            $scope.testData = JSON.parse(response);
            console.log($scope.testData);
        });
    }).error(function(){
        console.log("AJAX failed!");
    });

นี้อาจไม่ได้คำตอบที่สมบูรณ์ แต่ก็อนุญาตให้ฉันไปใช้โทร jQuery Ajax $scopeกับเชิงมุมและอนุญาตให้ฉันไปปรับปรุง

ฉันมีปัญหาเดียวกันใน express .. เพื่อแก้ไขคุณต้องใช้ bodyparser ในการแยกวิเคราะห์วัตถุ json ก่อนที่จะส่งคำขอ HTTP ..

app.use(bodyParser.json());

ฉันใช้ asp.net WCF webservices กับ js เชิงมุมและทำงานด้านล่างรหัส:

 $http({
        contentType: "application/json; charset=utf-8",//required
        method: "POST",
        url: '../../operation/Service.svc/user_forget',
        dataType: "json",//optional
        data:{ "uid_or_phone": $scope.forgettel, "user_email": $scope.forgetemail },
        async: "isAsync"//optional

       }).success( function (response) {

         $scope.userforgeterror = response.d;                    
       })

หวังว่ามันจะช่วย

ไม่พบข้อมูลโค้ดที่สมบูรณ์เกี่ยวกับวิธีใช้วิธี $ http.post เพื่อส่งข้อมูลไปยังเซิร์ฟเวอร์และสาเหตุที่มันไม่ทำงานในกรณีนี้

คำอธิบายของตัวอย่างโค้ดด้านล่าง ...

1. ฉันใช้ฟังก์ชัน jQuery $ .param เพื่อทำให้ข้อมูล JSON เป็นข้อมูลโพสต์ www

2. การตั้งค่า Content-Type ในตัวแปรกำหนดค่าที่จะถูกส่งไปพร้อมกับการร้องขอของ angularJS $ http.post ที่บอกเซิร์ฟเวอร์ว่าเรากำลังส่งข้อมูลในรูปแบบ www post

3. สังเกตวิธี $ htttp.post ซึ่งฉันส่งพารามิเตอร์ที่ 1 เป็น url, พารามิเตอร์ที่ 2 เป็น data (ต่อเนื่อง) และพารามิเตอร์ที่ 3 เป็น config

รหัสที่เหลืออยู่เป็นที่เข้าใจด้วยตนเอง

$scope.SendData = function () {
           // use $.param jQuery function to serialize data from JSON 
            var data = $.param({
                fName: $scope.firstName,
                lName: $scope.lastName
            });

            var config = {
                headers : {
                    'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
                }
            }

            $http.post('/ServerRequest/PostDataResponse', data, config)
            .success(function (data, status, headers, config) {
                $scope.PostDataResponse = data;
            })
            .error(function (data, status, header, config) {
                $scope.ResponseDetails = "Data: " + data +
                    "<hr />status: " + status +
                    "<hr />headers: " + header +
                    "<hr />config: " + config;
            });
        };

ดูตัวอย่างรหัสของ$ วิธี http.post ที่นี่

หากคุณใช้ PHP นี่เป็นวิธีที่ง่ายในการเข้าถึงอาร์เรย์ใน PHP จาก AngularJS POST

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

หากใช้Angular> = 1.4นี่คือคำตอบที่สะอาดที่สุดโดยใช้serializer ที่จัดทำโดย Angular :

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ส่วนหัวของเนื้อหาชนิดที่มีการคาดว่าปกติที่มีการร้องขอโพสต์บนอุปกรณ์ปลายทาง

TL; DR

ในระหว่างการวิจัยของฉันฉันพบว่าคำตอบของปัญหานี้มาในหลาย ๆ รสชาติที่แตกต่างกัน บางส่วนมีความซับซ้อนมากและขึ้นอยู่กับฟังก์ชั่นที่กำหนดเองบางอย่างขึ้นอยู่กับ jQuery และบางส่วนไม่สมบูรณ์ในการแนะนำว่าคุณต้องตั้งค่าส่วนหัวเท่านั้น

หากคุณเพิ่งตั้งค่าContent-Typeส่วนหัวจุดสิ้นสุดจะเห็นข้อมูล POST แต่จะไม่อยู่ในรูปแบบมาตรฐานเพราะหากคุณไม่ได้กำหนดสตริงเป็นของคุณdataหรือทำให้วัตถุข้อมูลของคุณเป็นอนุกรมด้วยตนเองมันจะถูกเรียงลำดับเป็น JSON โดย เริ่มต้นและอาจตีความผิดที่ปลายทาง

เช่นหากไม่ได้ตั้ง serializer ที่ถูกต้องในตัวอย่างข้างต้นก็จะเห็นได้ในจุดสิ้นสุดเป็น:

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

และอาจนำไปสู่การแยกวิเคราะห์ที่ไม่คาดคิดเช่น ASP.NET ถือว่าเป็นnullชื่อพารามิเตอร์โดยมี{"param1":"value1","param2":"value2"}ค่า หรือพู้ทำเล่นตีความมันด้วยวิธีอื่นโดย{"param1":"value1","param2":"value2"}ใช้ชื่อพารามิเตอร์และnullเป็นค่า

คล้ายกับรูปแบบการทำงานที่แนะนำของ OP & คำตอบของ Denison ยกเว้นการใช้$http.postแทนที่จะเป็นเพียงแค่$httpและยังขึ้นอยู่กับ jQuery

สิ่งที่ดีเกี่ยวกับการใช้ jQuery ที่นี่คือวัตถุที่ซับซ้อนได้รับการส่งผ่านอย่างถูกต้อง จากการแปลงเป็นพารามิเตอร์ URL ด้วยตนเองซึ่งอาจทำให้ข้อมูลเสียหาย

$http.post( 'request-url', jQuery.param( { 'message': message } ), {
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
});

เมื่อฉันมีปัญหานี้พารามิเตอร์ที่ฉันโพสต์กลายเป็นอาร์เรย์ของวัตถุแทนวัตถุง่าย ๆ

เพิ่งอัปเดตจากเชิงมุม 1.2 ถึง 1.3 ได้พบปัญหาในรหัส การแปลงทรัพยากรจะนำไปสู่การวนรอบไม่รู้จบเพราะ (ฉันคิดว่า) ของสัญญา $ ถือวัตถุเดียวกันอีกครั้ง บางทีมันอาจช่วยคน ...

ฉันสามารถแก้ไขได้โดย:

[...]
  /**
 * The workhorse; converts an object to x-www-form-urlencoded serialization.
 * @param {Object} obj
 * @return {String}
 */
var param = function (obj) {
var query = '', name, value, fullSubName, subName, subValue, innerObj, i;

angular.forEach(obj, function(value, name) {
+    if(name.indexOf("$promise") != -1) {
+        return;
+    }

    value = obj[name];
    if (value instanceof Array) {
        for (i = 0; i < value.length; ++i) {
[...]

ฉันใช้รหัสคำตอบที่ยอมรับ (รหัสของ Felipe) มาระยะหนึ่งแล้วและมันก็ใช้งานได้ดีมาก (ขอบคุณ Felipe!)

อย่างไรก็ตามเมื่อเร็ว ๆ นี้ฉันค้นพบว่ามีปัญหากับวัตถุหรืออาร์เรย์ที่ว่างเปล่า ตัวอย่างเช่นเมื่อส่งวัตถุนี้:

{
    A: 1,
    B: {
        a: [ ],
    },
    C: [ ],
    D: "2"
}

PHP ดูเหมือนจะไม่เห็น B และ C เลย มันได้รับสิ่งนี้:

[
    "A" => "1",
    "B" => "2"
]

ดูคำขอจริงใน Chrome จะแสดงสิ่งนี้:

A: 1
:
D: 2

ฉันเขียนตัวอย่างรหัสทางเลือก ดูเหมือนว่าจะทำงานได้ดีกับกรณีใช้งานของฉัน แต่ฉันยังไม่ได้ทดสอบอย่างกว้างขวางดังนั้นควรใช้ด้วยความระมัดระวัง

ฉันใช้ TypeScript เพราะฉันชอบการพิมพ์ที่แข็งแกร่ง แต่มันง่ายที่จะแปลงเป็น JS บริสุทธิ์

angular.module("MyModule").config([ "$httpProvider", function($httpProvider: ng.IHttpProvider) {
    // Use x-www-form-urlencoded Content-Type
    $httpProvider.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded;charset=utf-8";

    function phpize(obj: Object | any[], depth: number = 1): string[] {
        var arr: string[] = [ ];
        angular.forEach(obj, (value: any, key: string) => {
            if (angular.isObject(value) || angular.isArray(value)) {
                var arrInner: string[] = phpize(value, depth + 1);
                var tmpKey: string;
                var encodedKey = encodeURIComponent(key);
                if (depth == 1) tmpKey = encodedKey;
                else tmpKey = `[${encodedKey}]`;
                if (arrInner.length == 0) {
                    arr.push(`${tmpKey}=`);
                }
                else {
                    arr = arr.concat(arrInner.map(inner => `${tmpKey}${inner}`));
                }
            }
            else {
                var encodedKey = encodeURIComponent(key);
                var encodedValue;
                if (angular.isUndefined(value) || value === null) encodedValue = "";
                else encodedValue = encodeURIComponent(value);

                if (depth == 1) {
                    arr.push(`${encodedKey}=${encodedValue}`);
                }
                else {
                    arr.push(`[${encodedKey}]=${encodedValue}`);
                }
            }
        });
        return arr;
    }

    // Override $http service's default transformRequest
    (<any>$httpProvider.defaults).transformRequest = [ function(data: any) {
        if (!angular.isObject(data) || data.toString() == "[object File]") return data;
        return phpize(data).join("&");
    } ];
} ]);

มันมีประสิทธิภาพน้อยกว่าโค้ดของ Felipe แต่ฉันไม่คิดว่ามันจะสำคัญมากเพราะมันควรจะถูกเปรียบเทียบกับค่าใช้จ่ายโดยรวมของคำขอ HTTP เอง

ตอนนี้ PHP แสดง:

[
    "A" => "1",
    "B" => [
        "a" => ""
    ],
    "C" => "",
    "D" => "2"
]

เท่าที่ฉันรู้ว่ามันเป็นไปไม่ได้ที่ PHP จะรับรู้ว่า Ba และ C เป็นอาร์เรย์ที่ว่างเปล่า แต่อย่างน้อยคีย์ก็ปรากฏขึ้นซึ่งเป็นสิ่งสำคัญเมื่อมีโค้ดที่ต้องอาศัยโครงสร้างบางอย่างแม้ว่ามันจะว่างเปล่า

นอกจากนี้โปรดทราบว่ามันจะแปลงs และnull ที่ไม่ได้กำหนดเป็นสตริงว่าง

เพียงแค่ใส่ข้อมูลที่คุณต้องการส่งเป็นพารามิเตอร์ตัวที่สอง:

$http.post('request-url',  message);

อีกรูปแบบหนึ่งที่ใช้งานได้คือ:

$http.post('request-url',  { params: { paramName: value } });

ตรวจสอบให้แน่ใจว่าparamNameตรงกับชื่อของพารามิเตอร์ของฟังก์ชั่นที่คุณโทร

แหล่งที่มา: วิธีการโพสต์ทางลัดของ AngularJS

ฉันแก้ไขได้โดยใช้รหัสด้านล่าง:

ฝั่งไคลเอ็นต์ (Js):

     $http({
                url: me.serverPath,
                method: 'POST',
                data: data,
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            }).
                success(function (serverData) {
                    console.log("ServerData:", serverData);
    ......

ขอให้สังเกตว่าข้อมูลเป็นวัตถุ

บนเซิร์ฟเวอร์ (ASP.NET MVC):

[AllowCrossSiteJson]
        public string Api()
        {
            var data = JsonConvert.DeserializeObject<AgentRequest>(Request.Form[0]);
            if (data == null) return "Null Request";
            var bl = Page.Bl = new Core(this);

            return data.methodName;
        }

และจำเป็นต้องมี 'AllowCrossSiteJsonAttribute' สำหรับคำขอข้ามโดเมน:

public class AllowCrossSiteJsonAttribute : ActionFilterAttribute
    {
        public override void OnActionExecuting(ActionExecutingContext filterContext)
        {
            filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Origin", "*");
            base.OnActionExecuting(filterContext);
        }
    }

หวังว่านี่จะเป็นประโยชน์