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

Question

我成功地从 chrome postman plug-in 向 contact-form-7 发送了 POST 请求，我收到了邮件和所有东西。我想不通的是如何从 angular 发送相同的 POST 请求。这是我在 postman:

中的内容

请求：

_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

HEADERS:

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

BODY（原始）：

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

作为响应，我收到了整个页面，我想我发送的 headers 和数据有误，但我不知道该怎么做。

编辑：

{"_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 并且 HEADERS：Content-Type:"application/x-www-form-urlencoded" 当我将请求编辑为类似于第二个示例时，请求通过并发送电子邮件。所以问题是，是否可以使用 $http.post 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

在 headers 中指定 '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" content-type 传输值，否则如果您确实需要使用 'application/x-www-form-urlencoded' Content-Type，在data 属性中提供一个符合'application/x-www-form-urlencoded'期望的字符串，即_wpcf7=4&_wpcf7_versio=4.7... .

Answer 2

尝试此操作而不在请求中添加 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);
});

Answer 3

到POST个内容类型为application/x-www-form-urlencoded的数据，需要对数据进行urlencode。使用 $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。 param 序列化器会正确地做到这一点。

此外，无需使用成功和错误回调，因为 $http 服务已经 returns 承诺。

见。

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

Angularjs $http.post to contact form 7 with content type application/x-www-form-urlencoded

post

http

contact-form-7

angularjs

angular-http