Задать вопрос
@Rasko338
javascript

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

В плагине использую такой 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()},
  • Вопрос задан
  • 3367 просмотров
2 комментария
Подписаться 1 Простой 2 комментария
Пригласить эксперта
Ответы на вопрос 4
bigton
@bigton
Web-программист
Посмотрите логи ошибок PHP и web-сервера (nginx, apache), там будет ответ.
Ответ написан
Комментировать
Комментировать
ThunderCat
@ThunderCat Куратор тега JavaScript
{PHP, MySql, HTML, JS, CSS} developer
смотрите логи, 500 ошибка обычно выводится когда вывод ошибок перенаправлен в лог и возник фатал ерор. Или задайте для выполнения скрипта ерор репортинг е_алл, и дисплэй еррорс 1.
Ответ написан
Комментировать
Комментировать
r0n1x
@r0n1x
html, css, js
Вот тут есть о разнице. Если вкратце то ГЕТ следует использовать для получения данных (чтения), ПОСТ для записи.
Ответ написан
5 комментариев
5 комментариев
@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`
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
summer • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript разработчик
Мэтч
от 80 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Создание роликов и написание по машинному обучению
20 апр. 2024, в 15:40
3000 руб./за проект
Сделать 2 правки в веб-калькулятор стройматериалов
20 апр. 2024, в 15:38
10000 руб./за проект
Настроить рекламу в VK
20 апр. 2024, в 13:56
7000 руб./за проект
Ещё заказы