Чем отличается ajax-запрос post от get?

Question

[Rasko338]

В плагине использую такой ajax-запрос с типом GET:

var data = [{"x":66.5,"y":192,"time":2},{"x":66.5,"y":192,"time":27},{"x":66.5,"y":192,"time":58}];
$.ajax({
	type: 'GET',
	url: '/site/request',
	data: 'data=' + JSON.stringify(data),
	contentType: 'application/json; charset=utf-8',
	dataType: "json",
	success: function (res) {
	  if (!res) console.log('Ошибка');
	  console.log(res);
	},
	error: function (exception) {
	  console.log('Exeption:' + exception);
	}
  })

Все вроде работает. На сервер данные передаются.
Но много данных так не передашь, и поэтому мне нежен тип post.
Меняю 'GET' на 'POST', данные также передаются, но скрипт отрабатывает ошибку, и браузер выдает код '500 Internal Server Error'. Не пойму где ошибка.
На сервере (php7) тестовый скрипт просто записывает массив $_POST в файл.

public function actionRequest()
    {
        $result = Yii::$app->request->post();
        file_put_contents('test.txt', print_r($result, true));
        return true;
    }

В логах только это:

"POST /site/request HTTP/1.1" 500 1597 "http://test/site/test" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.62 Safari/537.36"

Решение вопроса:
После еще несколько часов гугления и мучений я вроде нашел решение.
1) Первая ошибка была в параметрах запроса
contentType: 'application/json; charset=utf-8'
Если закомметировать эту строку, и оставить дефолтный заголовок
'application/x-www-form-urlencoded; charset=UTF-8'
данные появится в массиве $_POST.
2) Вторая ошибка в том, что работая с yii2 (это касается и CodeIgniter) вместе с данными оказывается надо передавать csrf-токен.
data: {data: data, _csrf: yii.getCsrfToken()},

Comments

[Андрей Саныч]

логи смотрите. Или хотя бы php код покажите

[Rasko338]

public function actionRequest()
    {
        $result = Yii::$app->request->post();
        file_put_contents('test.txt', print_r($result, true));
        return true;
    }

Answer 1

[Anton B]

Посмотрите логи ошибок PHP и web-сервера (nginx, apache), там будет ответ.

Answer 2

[ThunderCat]

смотрите логи, 500 ошибка обычно выводится когда вывод ошибок перенаправлен в лог и возник фатал ерор. Или задайте для выполнения скрипта ерор репортинг е_алл, и дисплэй еррорс 1.

Answer 3

[Роман]

Вот тут есть о разнице. Если вкратце то ГЕТ следует использовать для получения данных (чтения), ПОСТ для записи.

Comments

[ThunderCat]

как интересно, столько нового узнаешь ))) Кто и как получает гет данные не уточните?

[Роман]

ThunderCat,

var xhr = new XMLHttpRequest();
xhr.open('GET', 'phones.json', false);
xhr.send();
if (xhr.status != 200) {
  alert( xhr.status + ': ' + xhr.statusText ); 
} else {
  alert( xhr.responseText ); 
}

Обращайтесь, если еще нужны примеры обращения с ГЕТом и ПОСТом

[ThunderCat]

Роман, wow, то есть xhr.open('POST, 'phones.json', false); будет по вашей логике работать "в другую сторону"? ))

[Роман]

ThunderCat, если действительно хотите понять мою логику, короткий пример: работаем с API
GET - получаем список пользователей,
POST - добавляем нового пользователя,
PATCH - редактируем имеющегося пользователя.

Видимо вы меня не правильно поняли или что-то себе напридумывали.

[ThunderCat]

Роман, ну, в такой формулировке хоть не так бредово звучит, хотя все еще весьма спорно.

Answer 4

[askhat]

Чем POST отличается от GET

Семантика HTTP методов на высоком уровне подразумевает операции создания и получения сущности(-стей) методами POST и GET соответственно. На прикладном уровне это означает одно: у метода GET отсутствует `body`, в то время как оно присутствует в POST. Для передачи данных (payload), для создания сущности, например для сохранения новой строчки в БД.

Синтаксис XHR
Классическим способом создания такого запроса в браузере станет api `XMLHttpRequest`.

const data = {whatever: 'payload'};
// Создадим объект xhr для обработки запроса
const xhr = new XMLHttpRequest();
// Открываем запрос
// @param String - типзапроса
// @param String - путь до слушателя
// @param Boolean - true async / false sync
// Запрос ещё не отправлен
xhr.open('POST', '/someroute', true)
// Указываем что это AJAX запрос
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
// Указываем что это JSON payload
xhr.setRequestHeader('Content-Type', 'application/json');
// Коллбек запускается при смене состояния xhr
xhr.onreadystatechange = function () {
  if (xhr.status === 200) {
    console.log(xhr.reponseText);
  }
};
// Отправляем запрос
xhr.send(JSON.stringify(data));

fetch API

Вот многих браузерах уже имплементирован fetch API. Скорее всего это станет стандартом, однако используйте на свой страх и риск.

const data = {whatever: 'payload'};
// Начнём с заголовков
const headers = new Headers();
headers.append('Content-Type', 'application/json');
// Функция должна вернуть объект Promise
return fetch('/someroute', {
  method: 'POST',
  headers: headers,
  body: JSON.stringify(data);
}).then(raw => raw.json()).then(response => {
  console.log(response);
});

PS Обратите внимание, в примере отсутствует обработка ошибок, что приведёт к `warning: UnhandledPromiseRejectionWarning: Unhandled promise rejection`