Javascript: отправить объект JSON с помощью Ajax?

151

Это возможно?

xmlHttp.send({
    "test" : "1",
    "test2" : "2",
});

Может быть, с: заголовок с content type: application/json?:

xmlHttp.setRequestHeader('Content-Type', 'application/json')

В противном случае я могу использовать:

xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')

а затем JSON.stringifyобъект JSON и отправить его в параметре, но было бы здорово отправить его таким образом, если это возможно.

— Адам
источник

330

С помощью jQuery:

$.post("test.php", { json_string:JSON.stringify({name:"John", time:"2pm"}) });

Без jQuery:

var xmlhttp = new XMLHttpRequest();   // new HttpRequest instance 
xmlhttp.open("POST", "/json-handler");
xmlhttp.setRequestHeader("Content-Type", "application/json");
xmlhttp.send(JSON.stringify({name:"John Rambo", time:"2pm"}));

— Натан Романо
источник

2

но человек, я могу использовать тип контента: application/x-www-form-urlencodedтоже, если я использую stringify, то какой смысл использовать application/json? :)

— Адам

4

@CIRK: Что это значит? Настройка типа содержимого является абсолютно произвольной, если только сервер не обрабатывает один или другой специально. Это просто данные, текущие взад и вперед в конце дня.

— mellamokb

17

хорошо, если ваше тело сообщения должно быть в формате JSON, например ({name: "John", time: "2pm"}), используйте тип контента application / json, если ваше тело сообщения имеет данные в формате urlencoded (name = John & time = 2pm), используйте application / x-www-form-urlencoded

— Натан Романо

1

где я должен положить URL?

— Аарон Лю

6

@ShuruiLiu URL заменяет "/json-handler"2-й параметр open()метода

— Александр Нил

36

Если вы не используете jQuery, убедитесь, что:

var json_upload = "json_name=" + JSON.stringify({name:"John Rambo", time:"2pm"});
var xmlhttp = new XMLHttpRequest();   // new HttpRequest instance 
xmlhttp.open("POST", "/file.php");
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlhttp.send(json_upload);

И для конца получения php:

 $_POST['json_name']

— шантану чандра
источник

Не можете использовать это напрямую?

— Рохицакала

8

Я не думаю, что это отвечает на заданный вопрос. Я полагаю, что разработчик хочет отправить BLOB-объект JSON в PHP как Content-Type: application / json, а не в оболочке с кодировкой urlencoded.

— Fordi

1

На самом деле это не отправка JSON, а отправка форм-данных. Вы также можете отправить JSON напрямую, в этом случае вы не можете прочитать его с помощью $ _POST, а вместо этого прочитать его с помощью json_decode (file_get_contents ('php: // input'));

— Дэвид

Дорогие друзья, можете ли вы поделиться этим POST ajax со всем необходимым кодом, который будет использоваться на странице? Или также спасибо, если у вас есть

— Robert

1

Я боролся в течение нескольких дней, чтобы найти что-нибудь, что будет работать для меня, так как передавал несколько массивов идентификаторов и возвращал блоб. Оказывается, если я использую .NET CORE, я использую 2.1, вам нужно использовать [FromBody] и использовать его только тогда, когда вам нужно создать модель представления для хранения данных.

Заверните содержимое, как показано ниже,

var params = {
            "IDs": IDs,
            "ID2s": IDs2,
            "id": 1
        };

В моем случае я уже имел json'd массивы и передавал результат в функцию

var IDs = JsonConvert.SerializeObject(Model.Select(s => s.ID).ToArray());

Затем вызовите XMLHttpRequest POST и зафиксируйте объект

var ajax = new XMLHttpRequest();
ajax.open("POST", '@Url.Action("MyAction", "MyController")', true);
ajax.responseType = "blob";
ajax.setRequestHeader("Content-Type", "application/json;charset=UTF-8");           
ajax.onreadystatechange = function () {
    if (this.readyState == 4) {
       var blob = new Blob([this.response], { type: "application/octet-stream" });
       saveAs(blob, "filename.zip");
    }
};

ajax.send(JSON.stringify(params));

Тогда имей такую модель

public class MyModel
{
    public int[] IDs { get; set; }
    public int[] ID2s { get; set; }
    public int id { get; set; }
}

Тогда переходи в экшн вроде

public async Task<IActionResult> MyAction([FromBody] MyModel model)

Используйте это дополнение, если вы возвращаете файл

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>

— Дейв
источник

0

Добавление Json.stringfyвокруг JSON, который решил проблему

— user3310115
источник