Как лучше передавать/получать данные с ajax?

Question

[Евгений Иванов]

Немного запутался при работе с ajax.
Конкретно - насчет того, как и куда возвращается результат.

Часть кода

$.ajax({
url: 'actions.php?show,success: function(data){$('#input_area').html(data);}
});

Как я понимаю, результат будет возвращаться в элемент с id=input_area.
Как он туда будет возвращаться?
Я поясню

Вот функция выводящая html код

function show($show)
{
echo '<div id="input_area"><a href="#" class="link">Link</a></div>';
}

А вот код страницы
<div><?php echo show(''); ?></div>

Итого html код

<div>
<div id="input_area">
<a href="#" class="link">Link</a>
</div>
</div>

Что будет при нажатии на ссылку? Если есть js код выше?
Будет ajax запрос с передачей параметра show, который вызовет функцию show (я этот код тут не писал - не важно).
Вообщем будет вызвана функция, которая вернет echo.
А там есть div id="input_area". Но у нас на странице уже есть div id="input_area" (первоначальный вызов ф-ции).
Итого ошибка? В блок с id="input_area" должен загрузится код, содержащий блок с id="input_area".
Но нет - мы получим ровно один div с id="input_area" и ссылкой. Что произошло? Куда произошла загрузка?

А есть и более простой и понятный вариант.
Вот функция выводящая html код

function show($show)
{
echo '<a href="#" class="link">Link</a>';
}

А вот код страницы
<div id="input_area"><?php echo show(''); ?></div>

И html код и результат аналогичен.

Куда и как происходит загрузка (ответ) в первом случае и какой из вариантов (определить id дива в загружаемой ф-ции или в html коде страницы вне зависимости от ф-ции) лучше?

Comments

[Sergej]

Т.е. вы возвращаете с сервера HTML ?
Зачем?

Вы должны возвращать json, а в js уже формировать html.
Отправлять вы должны тоже json (если post/put/update).

Сервер принимает и возвращает данные.
HTML и всей остальной составляющей, занимается js на основе данных.

Вот, почитайте. Пару дней назад опубликовали.
https://habrahabr.ru/post/350750/

[Евгений Иванов]

SharkMan

Не относится к вопросу. И что такого, что сервер возвращает html? А что он должен возвращать?
Всегда json? Это скорее исключение, чем правило.

[Максим Тимофеев]

Много текста нет вопроса.

[Евгений Иванов]

Максим Тимофеев
Подсказка - вопрос обычно заканчивается знаком "?"
Подсказка 2. Для невнимательных читателей важный текст выделяют жирным шрифтом.

Answer 1

[Вадим]

Сложно понять какая стоят задача. Что нужно сделать?

$.ajax({
  url: "some.php", // адрес куда отправляем запрос
  success: function(data){
    alert( "Прибыли данные: " + data ); // data можем вставлять в любое место $('#element_id').html(data);
  }
});

Comments

[Евгений Иванов]

Решить - как работать с ajax.
Понять почему при определенных действиях не происходит ожидаемого результата - что и вызывает вопрос почему и как лучше работать с ajax.

Кратко
Вариант 1.
DOM элемент определен в html коде. Прописан руками. Своего рода "статический".

<div id="input_area"><a href="#" class="link">Link</a></div>

В него мы загружаем данные.

Вариант 2.
DOM элемент определен в html коде вызовом (echo) функции из php скрипта.
<?php echo show(); ?>
Функция сформировала (вывела) нам html код. И этот DOM элемент.
При нажатии на ссылку идет вызов js.
Что вызывает js? Функцию.
Каков результат работы функции (что вернется в js success)? HTML код содержащий DOM элемент.
Куда вернется/будет вставлен этот html код? В DOM элемент.
Итого должно быть 2 DOM элемента с одинаковым id. Два вложенных дива.
Но по факту он будет один.

[Вадим]

Разницы нету 1 или 2 вариант - результат будет одинаковый.

> Что вызывает js?
какое событие прикрепите - то и будет вызывать

$('a.link').click(function(){
	// при клике на ссылку с класом link выполняем этот код...
});

можно вставить сюда например выполнение Ajax запроса

> Каков результат работы функции
Результат выполнения - то что отдаст сервер в ответ на запрос (в примере в переменную data)
что напишите в скрипте - то он и будет отдавать

> Куда вернется/будет вставлен этот html код

$.ajax({
  url: "some.php", // адрес куда отправляем запрос
  success: function(data){
    $('#element_id').html(data); // сюда
    $('.class_name').html(data); // или туда где class = class_name
    $('[data-attr]').html(data); // или туда где есть data-attr
  }
});

> Итого должно быть 2 DOM элемента с одинаковым id.
ID должен быть уникальный, если нужно в несколько элементов вставить одно и тоже используйте class или data-attr

[Евгений Иванов]

Вадим
Чего я пытаюсь добиться - что я хочу понять.
Идет ли перезапись дива с input_area полностью или идет перезапись его содержимого?
Пусть див - коробка. Перезапись его полностью - выкинуть коробку и взять аналогичную коробку с содержимым. Коробка=див.
Перезаписать его содержимое -выкинуть всё из коробки и положить туда новое содержимое.
Как оно работает?

Я могу прочитать документацию (уже прочел и не раз). Мне понятны строки кода.
Но я сам написал код (вы можете его проверить) и увидите, что в одном одном случае идет перезапись, а в другом замена содержимого. Или что то ещё.
Почему пропадает второй див с копией идентификатора?
Да идентификатор должен быть уникален, но никто не запрещает в html делать их копии.

Результат разный. Код на странице одинаков.
Во втором случае пропадает див. Он написан в echo и значит должен быть выведен в див.
Но его нет.

[Вадим]

Евгений Иванов, если $('#element_id'). html('....'); то идет замена содержимого.
если $('#element_id'). replaceWith('....'); то полная замена блока #element_id

Answer 2

[ThunderCat]

Как я понимаю, результат будет возвращаться в элемент с id=input_area.

$.ajax({
   url: 'actions.php?show',
   success: function(data){ // <-- сюда вернутся данные из скрипта php, попав в data
          $('#input_area').html(data); // здесь они будут вставлены в соответствующий DOM элемент
   }
});

PS: так как у вас пропущена кавычка, работать у вас скорее всего скрипт не будет

Comments

[Евгений Иванов]

Кавычка - не важно. Не заметил. Важна суть.
И всё таки - почему не происходит дублирование DOM элемента, при вставке данных?
Это в первом примере.

Ещё раз кратко.
Я вызвал php ф-цию которая вывела на страницу div с id=input_area и ссылку. Теперь у нас есть DOM элемент куда вернуться данные (div с id=input_area).
Далее я кликаю по ссылке. Идет вызов скрипта с помощью ajax.
Данные - результат работы ф-ции т.е. вывод div с id=input_area .
Итого в уже имеющуюся div с id=input_area будет вставлен div с id=input_area
Такая работа ф-ции. Она это выводит. Она вывела это при начальной загрузке страницы - сформировав нам DOM объект, она и выводит (возвращает) нам это сейчас - в наш DOM объект.
И мы видим - ссылку и один div с id=input_area.
Почему? Где второй div с id=input_area? Да два div с одним id не верно, но все же где вывод того, что должна выводить функция? Куда пропали данные?

И тут возникает вопрос - а что и так можно было? И как правильно/лучше?

[ThunderCat]

Евгений Иванов, достаточно сумбурно у вас все...
Итак, есть скрипт который отправляет запрос на сервер (по событию), в ответ получает некий набор символов, в вышеприведенном скрипте они попадают в переменную data. Далее скрипт находит элемент с id='input_area' и заменяет его содержимое набором из data, полученным с сервера. Далее, второй раз вызвав то же скрипт - мы получим точно такой же набор символов и точно так же ЗАМЕНИМ СОДЕРЖИМОЕ элемента с id='input_area' полученными данными. По этому ни со второго ни с третьего раза ничего меняться не будет.