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, наприклад ({ім'я: "Джон", час: "2 вечора"}), використовуйте тип вмісту application / json, якщо тіло вашої пошти формує кодовані дані, пов'язані з адресою (ім'я = Іван та час = 14:00), використовуйте 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']

— шантану чандру
джерело

Не можете використовувати його безпосередньо?

— rohitsakala

8

Я не думаю, що це відповідає на поставлене запитання. Я вважаю, що розробник хоче надіслати крапку JSON до PHP як Content-Type: application / json, а не загорнутий у обгортку, кодовану урленом.

— Форді

1

Це насправді не надсилає JSON, а надсилає форматні дані. Ви також можете надіслати JSON безпосередньо, і в цьому випадку ви не можете прочитати його за допомогою $ _POST, а натомість читати його за допомогою json_decode (file_get_contents ('php: // input'));

— Девід

Дорогі друзі, чи можете ви поділитися цим POST ajax з усім необхідним кодом, який потрібно використовувати на сторінці? Або дякую вам також, якщо у вас є добрий посилання на якийсь повний робочий приклад ванільного аяксу POST з JSON

— Роберт

1

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

Згорніть вміст, як показано нижче,

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

У моєму випадку я вже json масив і передав результат функції

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; }
}

Тоді переходимо в Action як

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, який вирішив проблему

— користувач3310115
джерело