简体   繁体   English

发送带有可选参数的表单POST方法+ angularJS

[英]Sending form with optional parameters POST-method + angularJS

I'm trying to make a form that sends an url of the type /:id/:option where I know the id before entering the form but the option-attribute is the one that the user selects from the radio-buttons. 我正在尝试制作一种发送类型为/:id /:option的url的表单,在输入表单之前我知道ID,但option-attribute是用户从单选按钮中选择的那个。 After submitting the form I should move to the page /:id/:option. 提交表格后,我应该转到页面/:id /:option。 I'm also using angulasJS with my application. 我还在我的应用程序中使用angulasJS。

So how can I send the url with the POST-method? 那么如何发送带有POST方法的url?

html HTML

<form method="POST">
    <div class="voteOptions" ng-repeat="item in id.data.options">
      <label class="radioButtons">{{item.title}} votes:{{item.votes}}
        <input type="radio" name="option" value={{item.option}}>
        <span class="radioSelector"></span>
      </label>
    </div>
    <input type="submit" id="voteSubmit" value="Vote!">
  </form>

.post-call .POST呼叫

app.post('/:id/:option', (req, res) => {
  var poll = polls[req.params.id-1];
  poll.options[req.params.option-1].votes++;
  res.json(poll);
});

Create Controller and make Http call from there. 创建Controller并从那里进行Http调用。

 <!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="myCtrl"> <form method="POST" ng-submit="submit()"> <div class="voteOptions" ng-repeat="item in options"> <label class="radioButtons">{{item.title}} votes:{{item.votes}} <input type="radio" name="option" value={{item.option}} ng-model="option.val"> <span class="radioSelector"></span> </label> </div> <input type="submit" id="voteSubmit" value="Vote!"> </form> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope,$http) { var id = 12345; $scope.option = {val:0}; $scope.options= [{ title : 'option-1', votes : 5, option : 1 },{ title : 'option-2', votes : 5, option : 2 }]; $scope.submit = function(){ console.log('Url', `<domain>/${id}/${$scope.option.val}`); // Generate url and call http post // $http.post(url, body, config) // .success(function (data, status, headers, config) { // }) // .error(function (data, status, header, config) { // }); } }); </script> </body> </html> 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM