[javascript] json POST 데이터를 웹 API 메소드에 객체로 전달하는 방법은 무엇입니까?

편집 : 2017 년 10 월 31 일

동일한 코드 / 접근 방식이 Asp.Net Core 2.0 에서도 작동 합니다. 가장 큰 차이점은 asp.net 코어에서 웹 API 컨트롤러와 Mvc 컨트롤러가 모두 단일 컨트롤러 모델로 병합 된 것입니다. 당신의 반환 형식이 될 수 그래서 IActionResult그것의 구현 중 하나 (예 : OkObjectResult)

사용하다

contentType:"application/json"

JSON.stringify보낼 때 메소드 를 사용 하여 JSON 문자열로 변환해야합니다.

그리고 모델 바인더는 json 데이터를 클래스 객체에 바인딩합니다.

아래 코드는 정상적으로 작동합니다 (테스트)

$(function () {
    var customer = {contact_name :"Scott",company_name:"HP"};
    $.ajax({
        type: "POST",
        data :JSON.stringify(customer),
        url: "api/Customer",
        contentType: "application/json"
    });
});

결과

contentType속성은 서버에게 JSON 형식으로 데이터를 전송하고 있음을 알려줍니다. JSON 데이터 구조를 보냈으므로 모델 바인딩이 올바르게 수행됩니다.

ajax 요청의 헤더를 검사하면 Content-Type값이로 설정되어 있음을 알 수 있습니다 application/json.

contentType을 명시 적으로 지정하지 않으면 기본 컨텐츠 유형 인 application/x-www-form-urlencoded;

댓글에서 제기 된 다른 가능한 문제를 해결하기 위해 2015 년 11 월 편집

복잡한 객체 게시

다음과 같이 웹 API 작업 메소드 매개 변수로 복잡한보기 모델 클래스가 있다고 가정 해 보겠습니다.

public class CreateUserViewModel
{
   public int Id {set;get;}
   public string Name {set;get;}
   public List<TagViewModel> Tags {set;get;}
}
public class TagViewModel
{
  public int Id {set;get;}
  public string Code {set;get;}
}

귀하의 웹 API 끝점은

public class ProductController : Controller
{
    [HttpPost]
    public CreateUserViewModel Save([FromBody] CreateUserViewModel m)
    {
        // I am just returning the posted model as it is. 
        // You may do other stuff and return different response.
        // Ex : missileService.LaunchMissile(m);
        return m;
    }
}

이 글을 쓰는 시점에서 ASP.NET MVC 6은 최신 안정 버전이며 MVC6에서는 웹 API 컨트롤러와 MVC 컨트롤러가 모두 Microsoft.AspNet.Mvc.Controller기본 클래스 에서 상속됩니다 .

클라이언트 측에서 메소드로 데이터를 보내려면 아래 코드가 정상적으로 작동합니다.

//Build an object which matches the structure of our view model class
var model = {
    Name: "Shyju",
    Id: 123,
    Tags: [{ Id: 12, Code: "C" }, { Id: 33, Code: "Swift" }]
};

$.ajax({
    type: "POST",
    data: JSON.stringify(model),
    url: "../product/save",
    contentType: "application/json"
}).done(function(res) {
    console.log('res', res);
    // Do something with the result :)
});

모델 바인딩은 일부 속성에는 작동하지만 전부는 아닙니다! 왜 ?

웹 API 메소드 매개 변수를 [FromBody]속성으로 장식하지 않은 경우

[HttpPost]
public CreateUserViewModel Save(CreateUserViewModel m)
{
    return m;
}

그리고 contentType 속성 값을 지정하지 않고 모델 (JSON 형식이 아닌 원시 자바 스크립트 객체)을 보냅니다.

$.ajax({
    type: "POST",
    data: model,
    url: "../product/save"
}).done(function (res) {
     console.log('res', res);
});

모델 바인딩은 유형이 복잡한 / 다른 유형의 속성이 아니라 모델의 플랫 속성에 적용됩니다. 우리의 경우, Id및 Name특성이 제대로 매개 변수에 바인딩 될 것이다 m, 그러나 Tags속성은 빈 목록이 될 것입니다.

짧은 버전을 사용하는 경우 동일한 문제가 발생 $.post하며 요청을 보낼 때 기본 Content-Type을 사용합니다.

$.post("../product/save", model, function (res) {
    //res contains the markup returned by the partial view
    console.log('res', res);
});

답변

public static void Register(HttpConfiguration config)
{
    config.Routes.MapHttpRoute(
        name: "ActionApi",
        routeTemplate: "api/{controller}/{action}");
}

[HttpPost]
public string TestMethod([FromBody]string value)
{
    return "Hello from http post web api controller: " + value;
}

$.ajax({
    type: 'POST',
    url: 'http://localhost:33649/api/TestApi/TestMethod',
    data: {'':'hello'},
    contentType: 'application/x-www-form-urlencoded',
    dataType: 'json',
    success: function(data){ console.log(data) }
});

Content-Type: application/x-www-form-urlencoded
in the request header and add a = before the JSON statement:
={"Name":"Turbo Tina","Email":"na@Turbo.Tina"}

var person = { PersonId:1, Name:"James" }
$.ajax({
    type: 'POST',
    url: 'http://mydomain/api/TestApi/TestMethod',
    data: JSON.stringify(person),
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    success: function(data){ console.log(data) }
});

[HttpPost]
public string TestMethod(Person person)
{
    return "Hello from http post web api controller: " + person.Name;
}

public class Customer
{
    public string contact_name;
    public string company_name;
}

var customer = {contact_name :"Scott",company_name:"HP"};
$.ajax({
    type: "POST",
    data :JSON.stringify(customer),
    url: "api/Customer",
    contentType: "application/json"
});

public class Customer
{
    public string contact_name { get; set; }
    public string company_name { get; set; }
}

$.ajax({
    type: "POST",
    data :customer,
    url: "api/Customer"
});

Content-Type:application/x-www-form-urlencoded

var product =
    JSON.stringify({
        productGroup: "Fablet",
        productId: 1,
        productName: "Lumia 1525 64 GB",
        sellingPrice: 700
    });

$.ajax({
    URL: 'http://localhost/api/Products',
    type: 'POST',
    contentType: 'application/json',
    data: product,
    success: function (data, status, xhr) {
        alert('Success!');
    },
    error: function (xhr, status, error) {
        alert('Update Error occurred - ' + error);
    }
});

$scope.updateUserActivity = function (_objuserActivity) {
        $http
        ({
            method: 'post',
            url: 'your url here',
            headers: { 'Content-Type': 'application/json'},
            data: JSON.stringify(_objuserActivity)
        })
        .then(function (response)
        {
            alert("success");
        })
        .catch(function (response)
        {
            alert("failure");
        })
        .finally(function ()
        {
        });

[HttpPost]
[AcceptVerbs("POST")]
public string POSTMe([FromBody]Models.UserActivity _activity)
{
    return "hello";
}

GlobalConfiguration.Configuration.Formatters.JsonFormatter.SerializerSettings.ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore;
        GlobalConfiguration.Configuration.Formatters.Remove(GlobalConfiguration.Configuration.Formatters.XmlFormatter);

@model MVCClient.Models.ProductDetails

@{
    ViewBag.Title = "ProductDetails";
}
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript">

    $(document).ready(function () {
        $("#Save").click(function () {
            var ProductDetails = new Object();
            ProductDetails.ProductName =  $("#txt_productName").val();
            ProductDetails.ProductDetail = $("#txt_desc").val();
            ProductDetails.Price= $("#txt_price").val();
            $.ajax({
                url: "http://localhost:24481/api/Product/addProduct",
                type: "Post",
                dataType:'JSON',
                data:ProductDetails,

                success: function (data) {
                    alert('Updated Successfully');
                    //window.location.href = "../Index";
                },
                error: function (msg) { alert(msg); }
            });
        });
    });
    </script>
<h2>ProductDetails</h2>

<form id="form1" method="post">
    <fieldset>
        <legend>ProductDetails</legend>


        <div class="editor-label">
            @Html.LabelFor(model => model.ProductName)
        </div>
        <div class="editor-field">

            <input id="txt_productName" type="text" name="fname">
            @Html.ValidationMessageFor(model => model.ProductName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.ProductDetail)
        </div>
        <div class="editor-field">

            <input id="txt_desc" type="text" name="fname">
            @Html.ValidationMessageFor(model => model.ProductDetail)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Price)
        </div>
        <div class="editor-field">

            <input id="txt_price" type="text" name="fname">
            @Html.ValidationMessageFor(model => model.Price)
        </div>



        <p>
            <input id="Save" type="button" value="Create" />
        </p>
    </fieldset>

</form>
    <div>
        @Html.ActionLink("Back to List", "Index")
    </div>

</form>



@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}