gpt4 book ai didi

javascript - 为什么我无法通过 AngularJS POST 向我的 Web Api 发送帖子?

转载 作者:行者123 更新时间:2023-12-03 05:43:04 25 4
gpt4 key购买 nike

我已将“mytest.html”发送到 IIS,该项目由 WebApi+Angularjs 组成,但我无法向我的 webApi 收到正确的请求……我不知道为什么?

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

【WebApi代码】

 namespace AngularJSDemo.Controllers
{
using Models;
using System.Web.Http;

public class DefaultController : ApiController
{
[HttpPost]
public Person GetPerson([FromBody] Person p)
{
return p;
}
}
}

【型号代码】

 namespace AngularJSDemo.Models
{
public class Person
{
public string Name { get; set; }
public string Sex { get; set; }
public string Love { get; set; }
}
}

【注册码】

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" }
);

}
}
}

请注意,我的 google chrome 控制台中的错误是:

angular.js:10695 发布 http://localhost:60031/api 415(不支持的媒体类型)

<小时/>

我也尝试过使用 json,但没有帮助:(

$http({
method:'POST',
data: {p:$scope.user},
url:'http://localhost:60031/api/Default',
success: function (data){
alert(JSON.stringify(data));
}
});

我的内容类型是:

var app = angular.module('A',[],function($httpProvider){

$httpProvider.defaults.headers.post['Content-Type'] = 'application/json';
});
<小时/>

因为我有不同种类的端口,为了跨域,我也这样做了:

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

最佳答案

网址错误

网址应为:http://localhost:60031/api/Default

$http({
method:'POST',
data: requestData,
url:'http://localhost:60031/api/Default',
success: function (data){
alert(JSON.stringify(data));
}
});

此外,最好以 JSON 格式提交数据,而不是表单 urlencoded

关于javascript - 为什么我无法通过 AngularJS POST 向我的 Web Api 发送帖子?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40445345/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com