Почему не передается переменная через ajax?

Question

[Антон]

Приветствую, подскажите почему не передаются данные в переменную, переменная просто пуста.
js jquery:

$(document).on('click', '#button', function(){
  let txt = 'Hello';
  $.ajax({
    url: 'test.php',
    type: 'POST',
    data: txt,
    success: function(data){
     $('p.out').text(data);
   },
    error: function(){
	console.log('ERROR');
    }
 })
})

test.php:

<?
$txt = $_POST['txt']; //Почему-то пусто...
echo $txt;
?>

Comments

[Kneepy]

В поле data ты должен передавать объект к полям которого ты в последствии будешь обращаться через php

$(document).on('click', '#button', function(){
  let txt = 'Hello';
  $.ajax({
    url: 'test.php',
    type: 'POST',
    data: { txt: txt, },
    success: function(data){
     $('p.out').text(data);
   },
    error: function(){
  console.log('ERROR');
    }
 })
})

[Антон]

Kneepy, спасибо, работает.

Answer 1

[Илья]

Потому что data должен быть объект, а не строка:

$(document).on('click', '#button', function(){
  let txt = 'Hello';
  $.ajax({
    url: 'test.php',
    type: 'POST',
    data: { txt },
    success: function(data){
     $('p.out').text(data);
   },
    error: function(){
  console.log('ERROR');
    }
 })
})

Comments

[Kneepy]

Илья, это конечно так, но ты не сможешь таким образом обратиться к к этому элементу через $_POST поэтому правильнее будет сделать так:

$(document).on('click', '#button', function(){
  let txt = 'Hello';
  $.ajax({
    url: 'test.php',
    type: 'POST',
    data: { 
           text: txt,
    },
    success: function(data){
     $('p.out').text(data);
   },
    error: function(){
  console.log('ERROR');
    }
 })
})

[Tim]

Kneepy, почему не сможет ? У него такой же объект, только он сократил. Рекомендую вам двоим прочитать документацию

[Everybody_Lies]

Kneepy, Если имя переменной и ключа объекта схожи, то можно указать лишь имя переменной в объектных литералах вместо ключа и значения.

let obj = {text: text}; 
//эквивалентно 
let obj = {text};

[Илья]

Kneepy, это ты с чего это взял? Иди мамке своей ты-кай и заодно почитай про JS.

[Антон]

Спасибо что активно ведете беседу над вопросом!

Answer 2

[zkrvndm]

Если вам нужно просто отправить голый текст, то это делается немного не так.

Пример отправки чистого текста:

$('#button').click(async function() {
	
	var txt = 'Привет, мир!';
	
	var response = await $.ajax({
		url: 'test.php',
		type: 'POST',
		contentType: 'text/plain; charset=UTF-8',
		data: txt
	});
	
	$('p.out').html(response);
	
});

На сервере принимайте и выводите полученный текст так:

<?php

// Включаем отображение ошибок:
ini_set('error_reporting', E_ALL);
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);

// Указываем браузеру, что ответ сервера
// является обычным текстом в кодир. UTF-8:
header('Content-Type: text/plain; charset=UTF-8');

// Записываем в переменную то,
// что отправил нам браузер по AJAX:
$received = file_get_contents('php://input');

// Выводим полученный текст (отдаем его в браузер):
echo 'Из фронта (браузера) был получен следующий текст: ' . $received;