Question

我在HTML中有这个表单，我试图使用前端框架（AngularJS或Angular2）将其转换为POST请求。此表单的目的是允许客户订阅我的wordpress博客。我试图将它从PHP转换为Angular2（如果有人知道如何将其转换为AngularJS，我可以从那里转换为Angular2）。我该怎么做？在POST请求和查询字符串的主体中必须包含哪些内容？我无法准确理解此表单的每个部分在POST请求中扮演的角色。

编辑：为了澄清，我知道如何使用AngularJS和Angular2以及如何在两者中使用HTTP服务。我想知道如何将表单转换为请求的正文/查询字符串。

<form action="/blog/" class="form-inline" role="form" method="POST" accept-charset="utf-8" id="subscribe-blog">

    <!-- add hidden inputs for wordpress jetpack widget -->
    <input type="hidden" name="action" value="subscribe" />
    <input type="hidden" name="source" value="http://www.mywebsite.com/blog/" />
    <input type="hidden" name="sub-type" value="widget" />
    <input type="hidden" name="redirect_fragment" value="blog_subscription-2" />

    <label class="sr-only" for="exampleInputEmail">Email address</label>
    <input type="email" class="form-control wide" id="exampleInputEmail" placeholder="Enter email address">
    <button type="submit" name="jetpack_subscriptions_widget" class="btn btn-submit">Subscribe</button>
</form>

这是否正确？

postForm() {
    var body = {
        action: 'subscribe',
        source: 'http://www.mywebsite.com/blog/',
        sub-type: 'widget',
        redirect_fragment: 'blog_subscription-2',
        email: 'clientEmailAddress@gmail.com',  // don't think this is right
        // not sure what to do with `jetpack_subscriptions_widget` attribute on the submit button either
    };
    return this.http.post(`http://www.mywebsite.com/blog/`, body)
        .map(res => res.json())
        .toPromise()
        .then(data => {
            return data;
        });
}

Answer 1

您需要包含angular.min.js和script.js

<强> HTML

<body ng-app="myApp" ng-controller="myCtrl">
    <input type="text" ng-model="name" />
    <input type="submit" value="Send" ng-click="send(name)"/>

</body>

angular js code： 的script.js

angular.module('myApp', [])
.controller('myCtrl', ['$scope', '$http', funtion($scope, $http){
     $scope.name = "";   // intially the input field is empty. As you type in the input field, the value will be updated here.
     $scope.send = function(name){
           alert(name);
           var url = $scope.name;  // try to enter an url
           $http.get(url).then(function Success(res){
               // here you can do anything with res
           }, function Error(err){
              alert(error);
           })
     }

}]);

Answer 2

使用angular，您可以将应用程序分成几部分：

查看（ html ）
处理一些验证等（ controller ）
并进行一些模型逻辑处理（ service ）。

如果您想完全使用角度来创建http请求端点（后端服务， REST 或任何其他），通常在这种情况下：

您对请求中需要发送的每个输入字段使用ng-model，例如<input type="text" ng-model="val">。在你的情况下你的HTML将是这样的：

<强> HTML

<form ng-submit="send()" class="form-inline" role="form" accept-charset="utf-8" id="subscribe-blog">

 <!--no need of 'action' attribute in the form since the post will be done using angular-->

    <!-- add hidden inputs for wordpress jetpack widget -->
    <input type="hidden" name="action" value="subscribe" ng-model="subscribe"/>
    <input type="hidden" name="source" value="http://www.mywebsite.com/blog/" ng-model="source"/>
    <input type="hidden" name="sub-type" value="widget" ng-model="widget" />
    <input type="hidden" name="redirect_fragment" value="blog_subscription-2" ng-model="redirect_fragment"/>

    <label class="sr-only" for="exampleInputEmail">Email address</label>
    <input type="email" class="form-control wide" id="exampleInputEmail" placeholder="Enter email address" ng-model="email">
    <button type="submit" name="jetpack_subscriptions_widget" class="btn btn-submit">Subscribe</button>
</form>

然后在您的控制器中，您可以处理所有 ng-model ，如果需要，然后将这些值传递给这样的（角度）服务

//....angular controller
function send(){
    //..collect params using the ng-models
    var params = [];
    params['email'] = $scope.email; //here you define 'email' as the name of the param received by the webservice as input !!!
    myService.sendValues(params).then(function(data){
    })
 }

...你最终将值发送到php服务，如下面的代码：

//... angular service

function sendValues(params){
    var url = "miendpointurl/subscribe";
    //... at this pont in params you have all those params you named like 'email', 'subscribe' and so on
    return $http.post(url, params).then(function(response){
        return response.data;
    },
    function(responseOnError){
        return responseOnError.data;
    }
}

Angular会透明地与您的php服务进行交互，并会回复服务器响应。

将HTML表单转换为Angular POST请求

2 个答案: