POST (ajax)를 통해 JSON 데이터를 보내고 Controller (MVC)에서 JSON 응답을받습니다.


139

나는 자바 스크립트에서 다음과 같은 함수를 만들었습니다.

function addNewManufacturer() {
       var name = $("#id-manuf-name").val();
       var address = $("#id-manuf-address").val();
       var phone = $("#id-manuf-phone").val();

       var sendInfo = {
           Name: name,
           Address: address,
           Phone: phone
       };

       $.ajax({
           type: "POST",
           url: "/Home/Add",
           dataType: "json",
           success: function (msg) {
               if (msg) {
                   alert("Somebody" + name + " was added in list !");
                   location.reload(true);
               } else {
                   alert("Cannot add to list !");
               }
           },

           data: sendInfo
       });
}

jquery.json-2.3.min.js스크립트 파일을 호출 하여 toJSON(array)메소드에 사용했습니다 .

컨트롤러 에서이 Add작업 이 있습니다

[HttpPost]
public ActionResult Add(PersonSheets sendInfo) {
    bool success = _addSomethingInList.AddNewSomething( sendInfo );

    return this.Json( new {
         msg = success
    });

}

그러나 sendInfo메소드 매개 변수가 널이됩니다.

모델:

public struct PersonSheets
{
    public int Id;
    public string Name;
    public string Address;
    public string Phone;
}

public class PersonModel
{
    private List<PersonSheets> _list;
    public PersonModel() {
         _list= GetFakeData();
    }

    public bool AddNewSomething(PersonSheets info) {
         if ( (info as object) == null ) {
            throw new ArgumentException( "Person list cannot be empty", "info" );
         }

         PersonSheets item= new PersonSheets();
         item.Id = GetMaximumIdValueFromList( _list) + 1;
         item.Name = info.Name;
         item.Address = info.Address;
         item.Phone = info.Phone;

         _list.Add(item);

         return true;
    }
}

POST와 함께 데이터를 보낼 때 어떻게 조치를 취할 수 있습니까?

사용 방법을 모르겠습니다. 또한 JSON을 통해 응답을 아약스로 다시 보낼 수 있습니까?


2
스네이크 아이즈 수락 된 답변을 Neha의 답변으로 변경할 수 있습니까? Praveen Prasad의 답변은 현재 (작성 당시) JSON 인코딩에 실패하고 JSON Content-Type 헤더 설정에 실패하여 현재 중단되었습니다. Neha 's는이 두 가지를 모두 올바르게 수행합니다. 두 가지 답변을 모두 테스트했습니다.
null

답변:


120

모델 만들기

public class Person
{
    public string Name { get; set; }
    public string Address { get; set; }
    public string Phone { get; set; }
}

아래와 같은 컨트롤러

    public ActionResult PersonTest()
    {
        return View();
    }

    [HttpPost]
    public ActionResult PersonSubmit(Vh.Web.Models.Person person)
    {
        System.Threading.Thread.Sleep(2000);  /*simulating slow connection*/

        /*Do something with object person*/


        return Json(new {msg="Successfully added "+person.Name });
    }

자바 스크립트

<script type="text/javascript">
    function send() {
        var person = {
            name: $("#id-name").val(),
            address:$("#id-address").val(),
            phone:$("#id-phone").val()
        }

        $('#target').html('sending..');

        $.ajax({
            url: '/test/PersonSubmit',
            type: 'post',
            dataType: 'json',
            contentType: 'application/json',
            success: function (data) {
                $('#target').html(data.msg);
            },
            data: JSON.stringify(person)
        });
    }
</script>

141
var SendInfo= { SendInfo: [... your elements ...]};

        $.ajax({
            type: 'post',
            url: 'Your-URI',
            data: JSON.stringify(SendInfo),
            contentType: "application/json; charset=utf-8",
            traditional: true,
            success: function (data) {
                ...
            }
        });

그리고 실제로

public ActionResult AddDomain(IEnumerable<PersonSheets> SendInfo){
...

이런 식으로 배열을 바인딩 할 수 있습니다

var SendInfo = [];

$(this).parents('table').find('input:checked').each(function () {
    var domain = {
        name: $("#id-manuf-name").val(),
        address: $("#id-manuf-address").val(),
        phone: $("#id-manuf-phone").val(),
    }

    SendInfo.push(domain);
});

이것이 당신을 도울 수 있기를 바랍니다.


데이터를 변조하고 일부 XSS 취약점을 삽입 할 수있는 것처럼 모델을 엄격하게 지정하면 일부 보안 문제가 발생하지 않습니까?
Dave

@Dave no, 엔드 포인트 (이 경우 mvc 컨트롤러 기능)는 클라이언트를 절대 신뢰하지 않아야하므로 서버에서 XSS 검사를 수행해야합니다. 컨트롤러는 올바른 방식으로 데이터를 구문 분석하고 데이터를 호출자 (webapp)에게 다시 보냅니다. 호출자는 또한 피들러, 우체부 또는 다른 응용 프로그램과 같은 것일 수 있습니다. 이것이 합리적
이기를 바랍니다

6
참고로 application / json으로 문자 세트를 보내는 것은 유효하지 않습니다. 문자 세트는 text / * 유형에만 적용됩니다. application / json은 헤더에 관계없이 항상 UTF-8입니다.
Rich Remer

요청에서 dataType을 contentType으로 바꾸면 작동합니다.
huangli

3
내 문제는 JSON.stringify ()를 사용하여 해결되었으므로 누군가 json 객체를 보내는 동안 왜 이것이 필요한지 설명 할 수 있습니까?
Muhammad Zeshan Ghafoor

13

사용하십시오 JSON.stringify(<data>).

코드를 변경 : data: sendInfodata: JSON.stringify(sendInfo). 이것이 당신을 도울 수 있기를 바랍니다.


1
contentType을 'application / json'으로 설정해야 할 수도 있습니다. 일부 엔드 포인트는 추측 할 수 있지만 JSON이라고 말하는 것이 더 안정적입니다.
null

2

JSON을 게시하려면이를 문자열 화해야합니다. 옵션을 false로 JSON.stringify설정하십시오 processData.

$.ajax({
    url: url,
    type: "POST",
    data: JSON.stringify(data),
    processData: false,
    contentType: "application/json; charset=UTF-8",
    complete: callback
});

0

귀하의 PersonSheets는 속성이 int Id, Idmodelbinding 실패, 그래서 포스트에 있지 않습니다. Id를 nullable (int?)로 만들거나 POst로 atleast Id = 0을 보냅니다.


-2

전화를 걸고 $.toJSON추가 할 필요가 없습니다traditional = true

data: { sendInfo: array },
traditional: true

할것이다.


좋은 선택이 아닙니다! 코드를 따르면 메소드 매개 변수 Add(object[] sendInfo)는 null입니다!
뱀 눈
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.