將HTML表單轉換為Angular POST請求

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>

角度js代碼： 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 ）
處理一些驗證，等等（ 控制器 ）
並進行一些模型邏輯處理（服務）。

如果您要完全通過端點（后端服務， REST或任何其他端點）角度發出http請求，通常在這種情況下：

您對需要在請求中發送的每個輸入字段使用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 個解決方案

解決方案1
1 2016-12-20 19:03:13

解決方案2
1 2016-12-20 19:45:08

將HTML表單轉換為Angular POST請求

問題描述

2 個解決方案

解決方案1 1 2016-12-20 19:03:13

解決方案2 1 2016-12-20 19:45:08

解決方案1
1 2016-12-20 19:03:13

解決方案2
1 2016-12-20 19:45:08