web-dev-qa-db-ja.com

JQueryを使用してJSONデータを投稿するにはどうすればよいですか?

同じサーバー上のWebサービスに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ではなく「エンコードされた」データです。

JQueryを使用してurlencodedデータの代わりにJson形式でデータを投稿する方法はありますか?または、手動のajaxリクエストを使用する必要がありますか?

67
Jonas

オブジェクトを渡しています、notJSON文字列。オブジェクトを渡すとき、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'
});
130
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);
});
8
Ninh Pham