Programing

JQuery를 사용하여 JSON 데이터를 게시하려면 어떻게해야합니까?

lottogame 2020. 11. 11. 07:54
반응형

JQuery를 사용하여 JSON 데이터를 게시하려면 어떻게해야합니까?


동일한 서버의 웹 서비스에 Json을 게시하고 싶습니다. 하지만 JQuery를 사용하여 Json을 게시하는 방법을 모르겠습니다. 이 코드로 시도했습니다.

$.ajax({
    type: 'POST',
    url: '/form/',
    data: {"name":"jonas"},
    success: function(data) { alert('data: ' + data); },
    contentType: "application/json",
    dataType: 'json'
});

그러나이 JQuery 코드를 사용하면 데이터가 서버에서 Json으로 수신되지 않습니다. 이것은 서버에서 예상되는 데이터 {"name":"jonas"}이지만 JQuery를 사용하면 서버가 name=jonas. 즉, Json이 아닌 "urlencoded"데이터입니다.

JQuery를 사용하여 urlencoded 데이터 대신 Json 형식으로 데이터를 게시하는 방법이 있습니까? 아니면 수동 ajax 요청을 사용해야합니까?


JSON 문자열이 아닌 객체를 전달하고 있습니다. 객체를 전달할 때 jQuery는 $.param객체를 이름-값 쌍으로 직렬화하는 데 사용 합니다.

데이터를 문자열로 전달하면 직렬화되지 않습니다.

$.ajax({
    type: 'POST',
    url: '/form/',
    data: '{"name":"jonas"}', // or JSON.stringify ({name: 'jonas'}),
    success: function(data) { alert('data: ' + data); },
    contentType: "application/json",
    dataType: 'json'
});

lonesomeday의 대답을 바탕으로 jpost특정 매개 변수를 래핑 하는 만듭니다 .

$.extend({
    jpost: function(url, body) {
        return $.ajax({
            type: 'POST',
            url: url,
            data: JSON.stringify(body),
            contentType: "application/json",
            dataType: 'json'
        });
    }
});

용법:

$.jpost('/form/', { name: 'Jonh' }).then(res => {
    console.log(res);
});

Ninh Pham의 솔루션을 시도했지만 조정하기 전까지는 작동하지 않았습니다. 아래를 참조하십시오. contentType을 제거하고 json 데이터를 인코딩하지 마십시오.

$.fn.postJSON = function(url, data) {
    return $.ajax({
            type: 'POST',
            url: url,
            data: data,
            dataType: 'json'
        });

최고의 답변은 잘 작동했지만 게시하기 전에 JSON 데이터를 변수에 저장하는 것이 좋습니다. 긴 형식을 보내거나 일반적으로 대용량 데이터를 처리 할 때 조금 더 깔끔합니다.

var Data = {
"name":"jonsa",
"e-mail":"qwerty@gmail.com",
"phone":1223456789
};


$.ajax({
    type: 'POST',
    url: '/form/',
    data: Data,
    success: function(data) { alert('data: ' + data); },
    contentType: "application/json",
    dataType: 'json'
});


객체가 유효한 JSON Promise인지 확인하고 사용 body합니다. 그렇지 않으면 약속 reject이 반환됩니다.

var DoPost = function(url, body) {
    try {
        body = JSON.stringify(body);
    } catch (error) {
        return reject(error);
    }
    return new Promise((resolve, reject) => {
        $.ajax({
                type: 'POST',
                url: url,
                data: body,
                contentType: "application/json",
                dataType: 'json'
            })
            .done(function(data) {
                return resolve(data);
            })
            .fail(function(error) {
                console.error(error);
                return reject(error);
            })
            .always(function() {
                // called after done or fail
            });
    });
}

참고 URL : https://stackoverflow.com/questions/6255344/how-can-i-use-jquery-to-post-json-data

반응형