Angularjs $http.post 联系表单 7，内容类型为 application/x-www-form-urlencoded

Question

我已成功将 POST 请求从 chrome postman 插件发送到 contact-form-7，并且我收到了邮件和所有内容。 我不知道如何从角度发送相同的 POST 请求。 这是我在邮递员中所拥有的：

发布网址：http://example.com/be/home/

请求：

_wpcf7:4
_wpcf7_version:4.7
_wpcf7_locale:en_US
_wpcf7_unit_tag:wpcf7-f4-p6-o1
fname:john
email:admin@example.com
subject:subject
message:message
_wpcf7_is_ajax_call:1

标题：

Content-Type:application/x-www-form-urlencoded
Accept:application/json, text/javascript, */*;q=0.01

身体（原始）：

_wpcf7=4&_wpcf7_version=4.7&_wpcf7_locale=en_US&_wpcf7_unit_tag=wpcf7-f4-p6-o1&fname=john&email=admin@example.com&subject=subject&message=message&_wpcf7_is_ajax_call=1

回应：

<textarea>{"mailSent":true,"into":"#wpcf7-f4-p6-o1","captcha":null,"message":"Thank you for your message. It has been sent."}</textarea>

到目前为止，这是我尝试过的：

家庭服务：

this.sendMessage = function(successCallback, errorCallback){
$http.post('/be/home', {
        headers:{
          'Content-Type':'application/x-www-form-urlencoded',
          'Accept':'application/json, text/javascript, */*;q=0.01'
        },
        data:{
          '_wpcf7':4,
          '_wpcf7_version':4.7,
          '_wpcf7_locale':'en_US',
          '_wpcf7_unit_tag':'wpcf7-f4-p6-o1',
          'fname':'john',
          'email':'admin@example.com',
          'subject':'subject',
          'message':'message',
          '_wpcf7_is_ajax_call':1
        }
      }).then(function(data){
        successCallback(data);
      }).catch(function(data){
        errorCallback(data);
      });
    }
 }

家庭控制器：

HomeService.sendMessage(function(data){
    console.log(data);
}, function(data){
    console.log(data);
}

作为回应，我得到了整个页面，我认为我发送的标题和数据错误，但我不知道该怎么做。

编辑：

{"_wpcf7":4,"_wpcf7_version":4.7,"_wpcf7_locale":"en_US","_w‌​pcf7_unit... 这就是 REQUEST BODY 的样子（JSON）我需要它看起来像这样（表单数据）： _wpcf7=4&_wpcf7_version=4.7&_wpcf7_locale=en_US&_wpcf7_unit_‌​tag=wpcf7-f4-p6-o1&f‌​name=john&email=admi‌​n%40example.com&subj‌​ect=subject&message=‌​message&_wpcf7_is_aj‌​ax_call=1 和标题：Content-Type:"application/x-www-form-urlencoded" 当我编辑请求看起来像第二个示例时，请求通过并发送电子邮件。所以问题是，是否可以使用 $http.post 发布表单数据而不是 JSON？

编辑： @georgeawg 的解决方案

家庭服务：

this.sendMessage = function(){
    var config = {
        //USE serializer
        transformRequest: $httpParamSerializer,
        headers:{
          'Content-Type':'application/x-www-form-urlencoded',
          'Accept':'application/json, text/javascript, */*;q=0.01'
        }
     };

     var data = {
          '_wpcf7':4,
          '_wpcf7_version':4.7,
          '_wpcf7_locale':'en_US',
          '_wpcf7_unit_tag':'wpcf7-f4-p6-o1',
          'fname':'john',
          'email':'admin@example.com',
          'subject':'subject',
          'message':'message',
          '_wpcf7_is_ajax_call':1
    };


    //vvvv RETURN httpPromise
    return $http.post('/be/home', data, config);
 };

Answer 1

要发布内容类型为application/x-www-form-urlencoded 的数据，需要对数据进行urlencoded。使用$httpParamSerializer service：

//this.sendMessage = function(successCallback, errorCallback){    
this.sendMessage = function(){
    var config = {
        //USE serializer
        transformRequest: $httpParamSerializer,
        headers:{
          'Content-Type':'application/x-www-form-urlencoded',
          'Accept':'application/json, text/javascript, */*;q=0.01'
        }
     };

     var data = {
          '_wpcf7':4,
          '_wpcf7_version':4.7,
          '_wpcf7_locale':'en_US',
          '_wpcf7_unit_tag':'wpcf7-f4-p6-o1',
          'fname':'john',
          'email':'admin@example.com',
          'subject':'subject',
          'message':'message',
          '_wpcf7_is_ajax_call':1
    };


    //vvvv RETURN httpPromise
    return $http.post('/be/home', data, config);
 };

电子邮件中的@ 必须是percent encoded。参数序列化程序会正确地做到这一点。

也不需要使用成功和错误回调，因为 $http 服务已经返回了一个承诺。

见Why are Callbacks from Promise .then Methods an Anti-Pattern。

Answer 2

在标题中，您指定 'Content-Type':'application/x-www-form-urlencoded'，同时在 data 属性中以 JSON 格式提供值：

    data:{
      '_wpcf7':4,
      '_wpcf7_version':4.7,
      '_wpcf7_locale':'en_US',
      '_wpcf7_unit_tag':'wpcf7-f4-p6-o1',
      'fname':'john',
      'email':'admin@example.com',
      'subject':'subject',
      'message':'message',
      '_wpcf7_is_ajax_call':1
    }

要么不指定'Content-Type':'application/x-www-form-urlencoded'，以便使用默认使用的"application/json" 内容类型传输值，否则如果您确实需要使用'application/x-www-form-urlencoded' 内容类型，请在@987654327 中提供@property 一个字符串符合 'application/x-www-form-urlencoded' 所期望的，即 _wpcf7=4&_wpcf7_versio=4.7... 。

Answer 3

试试这个，不要在请求中添加headers，看看这个link

家庭服务：

this.sendMessage = function(successCallback, errorCallback) {
    var data = {
        '_wpcf7': 4,
        '_wpcf7_version': 4.7,
        '_wpcf7_locale': 'en_US',
        '_wpcf7_unit_tag': 'wpcf7-f4-p6-o1',
        'fname': 'john',
        'email': 'admin@example.com',
        'subject': 'subject',
        'message': 'message',
        '_wpcf7_is_ajax_call': 1
    }
    return $http.post('/be/home', $.param(data));
}

家庭控制器：

HomeService.sendMessage().then(function(data) {
    console.log(data);
});