Javascript 将HTML表单转换为角度POST请求_Javascript_Html_Angularjs_Wordpress_Post

Javascript 将HTML表单转换为角度POST请求

javascript html angularjs wordpress post

Javascript 将HTML表单转换为角度POST请求,javascript,html,angularjs,wordpress,post,Javascript,Html,Angularjs,Wordpress,Post,我有这个HTML表单，我正试图使用前端框架（AngularJS或Angular2）将其转换为POST请求。此表单的目的是允许客户订阅我的wordpress博客。我正在尝试将其从PHP转换为Angular2（如果有人知道如何将其转换为AngularJS，我可以从那里转换为Angular2）。我该怎么做？POST请求与查询字符串的主体中必须包含什么？我很难准确理解此表单的每个部分在POST请求中扮演的角色编辑：我只是想澄清一下，我知道如何使用AngularJS和Angular2，以及如何在两者中使

我有这个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>

您需要包括

angular.min.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);
           })
     }

}]);

html

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

</body>

<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>

使用angular将应用程序拆分为多个部分：

视图（html）
处理一些验证等（控制器）
并进行一些模型逻辑处理（服务）

如果要使http请求完全与端点（后端服务、REST或任何其他）连接，通常在这种情况下：

对于需要在请求中发送的每个输入字段，使用
```
ng model
```
，类似于
。在您的情况下，您的html将类似于：

html

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

</body>

<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>

…最终将值发送到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服务交互，并返回服务器响应。

您是否有使用Angular（1或2）的经验？“我正在尝试将它从PHP转换为Angular2”是什么意思？我知道您正在使用此表单向php（控制器或任何在后端处理请求的东西）发出请求。是这样吗？我对两者都有很强的经验，并且知道如何对两者提出发帖请求。我想知道如何使用表单中需要的所有数据格式化请求。请参阅。输入需要

ng model

指令。表单需要

ng submit

指令。