Question

我已成功将Chrome postman插件的POST请求发送到contact-form-7，我收到邮件和所有内容。我无法弄清楚如何从角度发送相同的POST请求。这就是我在邮差中所拥有的：

REQUEST：

echo <<<'HTML'
<div class="container">
    <div class="main">
       <h2>User info</h2><hr/>
            <form id="form1" name="form1" method="post" action="input_form_02_qA_01.php">
                <label>Name:<span>*</span></label><br />
                <input type="text" name="nick" id="nick" placeholder="" required/>
                <label>Email address:
                <input type="text" name="email" id="email" placeholder="" required/>
                </label>
                <br/>
                <label>Age:<span>*</span></label><br />
                <input type="number" name="age" id="age" required/>
                <label>Sex:<span>*</span></label><br />
                <input type="radio" name="sex" value="man" required>Man
                <input type="radio" name="sex" value="woman" required>Woman
                <p>
                <label>
                <input type="submit" name="submit" id="Submit" value="Go to page 2" />
                </label>
            </form>
    </div>
</div>
HTML;

头：

_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

BODY（原始）：

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>

HomeController中：

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); }这就是REQUEST BODY的样子（JSON）我需要它看起来像这样（表单数据）： {"_wpcf7":4,"_wpcf7_version":4.7,"_wpcf7_locale":"en_US","_w‌pcf7_unit... 和标题：_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 当我编辑请求看起来像第二个例子时，请求通过并发送电子邮件。所以问题是，是否可以使用$ http.post发布表单数据而不是JSON？

编辑：解决方案@georgeawg

主页服务：

Content-Type:"application/x-www-form-urlencoded"

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服务已经返回一个承诺。

请参阅Why are Callbacks from Promise .then Methods an Anti-Pattern。

Answer 2

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

    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'内容类型，在data属性中提供符合'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));
}

HomeController中：

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

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

3 个答案: