javascript - Why cannot I send a post to my WebApi through AngularJS's POST？ -
i've sent "mytest.html" onto iis , project made of webapi+angularjs, , cannot right request webapi……i don't know why?
【codes html】
<!doctype html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> </head> <body> <div ng-app="a" ng-controller="test"> <form method='post' name='myform'> <table width="100%"> <tr> <td>name：</td> <td><input type='text' ng-model='user.name' name='myname' required/> <span style='color:red' ng-show='myform.myname.$dirty && myform.myname.$invalid'>name cannot empty!</span> </td> </tr> <tr> <td>gender:</td> <td> <div ng-repeat='s in sexs'> <input type='radio' ng-model='user.sex' name='mysex' value='{{s}}'> {{s}} </div> </td> </tr> <tr> <td>hobby:</td> <td> <select ng-model='user.love' name='sellove'> <option ng-repeat='l in loves' value='{{l}}'>{{l}}</option> </select> <span style='color:red' ng-show='selchoice(myform.sellove.$dirty);'>you cannot choose "please choose"</span> </td> </tr> </table> <input type ='submit' value='submit' ng-click='isdisable();'/> </form> </div> <script> var app = angular.module('a',[],function($httpprovider){ $httpprovider.defaults.headers.post['content-type'] = 'application/x-www-form-urlencoded'; }); app.controller('test',function($scope,$http){ $scope.user = {}; $scope.sexs = ['m','f']; $scope.loves = ['please choose','programming','piano','swimming']; $scope.user.sex = 'm'; $scope.user.love = 'please choose'; $scope.selchoice= function(isdirty){ var isfalse = (myform.sellove.value == 'please choose' && isdirty); $scope.myform.sellove.$invalid = isfalse; $scope.myform.$invalid |= isfalse; return isfalse; }; $scope.isdisable = function(){ $scope.selchoice(true); var requestdata = $.param($scope.user); alert(requestdata); if($scope.myform.$invalid){ alert('invalid form'); } else{ $http({ method:'post', data: requestdata, url:'http://localhost:60031/api', success: function (data){ alert(json.stringify(data)); } }); } }; }); </script> </body> </html> 【codes webapi】
namespace angularjsdemo.controllers { using models; using system.web.http; public class defaultcontroller : apicontroller { [httppost] public person getperson([frombody] person p) { return p; } } } 【codes model】
namespace angularjsdemo.models { public class person { public string name { get; set; } public string sex { get; set; } public string love { get; set; } } } 【codes register】
namespace angularjsdemo { using newtonsoft.json.serialization; using system.net.http.formatting; using system.web.http; public static class webapiconfig { public static void register(httpconfiguration config) { config.formatters.clear(); var jsonformatinstance = new jsonmediatypeformatter(); jsonformatinstance.serializersettings.contractresolver = new camelcasepropertynamescontractresolver(); config.formatters.add(jsonformatinstance); config.maphttpattributeroutes(); config.routes.maphttproute( name: "defaultapi", routetemplate: "api/{controller}/{id}", defaults: new { id = routeparameter.optional,controller="default" } ); } } } notice error in console of google chrome is:
angular.js:10695 post http://localhost:60031/api 415 (unsupported media type)
i've tried use json, no :(
$http({ method:'post', data: {p:$scope.user}, url:'http://localhost:60031/api/default', success: function (data){ alert(json.stringify(data)); } }); and content-type is:
var app = angular.module('a',[],function($httpprovider){ $httpprovider.defaults.headers.post['content-type'] = 'application/json'; }); because have different kinds of ports, cross domain, did this:
<system.webserver> <httpprotocol> <customheaders> <add name="access-control-allow-origin" value="*" /> <add name="access-control-allow-methods" value="*" /> <add name="access-control-request-methods" value="*" /> <add name="access-control-allow-headers" value="content-type" /> </customheaders> </httpprotocol> </system.webserver>
the url wrong
the url should : http://localhost:60031/api/default
$http({ method:'post', data: requestdata, url:'http://localhost:60031/api/default', success: function (data){ alert(json.stringify(data)); } }); also, better submit data json not form-urlencoded
Comments
Post a Comment