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

Question

我成功地从 chrome postman 插件发送 POST 请求到 contact-form-7，我收到了邮件和所有东西。 我不知道的是如何从 Angular 发送相同的 POST 请求。 这是我在 postman 中的内容:

发布网址: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

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

家庭 Controller :

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 和 header :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 . param 序列化程序将正确地执行此操作。

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

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