Как с помощью jQuery ajax получить от php сервера 4 картинки?

Question

[Don2Quixote]

Есть страница с таблицей.

По нажатию на кнопку "START GAME" запускается скрипт js:

function distribution() {
			$.ajax({
				url: "getCard.php?username=<?=$_COOKIE[username];?>",
				cache: false,
				dataType: "text",
				success: function(dc1s, dc2s, pc1s, pc2s) {
					$("#dc1").html(dc1s);
					$("#dc2").html(dc2s);
					$("#pc1").html(pc1s);
					$("#pc2").html(pc2s);
				}
			})
		}

Вот результат работы "getCard.php":


Не смотрите, что указано в success в js скрипте - там неправильно. Я как раз и хочу узнать - что мне туда нужно записать, что бы заполнить ячейки таблицы картинками с сервера, используя id картинок на сервере и id полей таблицы в основном html документе. Первый раз ставлю сложность вопроса "Сложный", так как сам вообще нигде не смог найти информацию.

Comments

[Sergej]

Получить объект и перебрать его в цикле. .
У вас API должен возвращать что то типа

[
  "dc1": { ... },
   "dc2": { ... }
   "pc1": { ... }
   ....
]

Answer 1

[Дмитрий]

Добрый вечер.
На сервере формируете json строку и отдаёте назад клиенту
return json_encode($answer);
В jquery принимаете и распарсиваете json строку

success: function(data) {
           var response = jQuery.parseJSON(data)
           $("#dc1").html(response.dc1s);
        }

Но всё зависит от того, как Вы сформируете json на сервере, с какими данными. От этого зависит то, как Вы будете её разбирать и как передавать в браузер.

p.s.
Возможный вариант ответа сервера

$answer = ['fist' => 'dc1s', 'second' => 'pc1s'];
return json_encode($answer);

В jQuery

success: function(data) {
           var response = jQuery.parseJSON(data)
           $("#dc1").html(response.first);
           $("#dc1").html(response.second);
        }

Comments

[Don2Quixote]

Не разбираюсь пока в json, но теперь есть повод посмотреть, что это за зверь.

[Дмитрий]

Don2Quixote, а что там смотреть?))) я дал практически готовое решение. Ваша задача получить данные из базы и собрать массив.

[Don2Quixote]

slo_nik, Ну разобраться с механизмом же надо. Я сайт этот делаю, что бы изучать что нибудь новое.

[Don2Quixote]

slo_nik, Еще кое что. Вот эта строка:
$answer = ['fist' => 'dc1s']; //И последующие...
Что нужно записывать после символа "=>", если dc1s - это переменная?

$dc1 = convertation($_SESSION[$username][1], "dc1s"); 
//<img class="cards" id="dc1s" src="cards/pik9.png">

Так и записывать, как вы написали, или убрать кавычки и записать как переменную с символом "$" ?
$answer = ['fist' => $dc1s];

[Дмитрий]

Don2Quixote, уберите кавычки.

[Don2Quixote]

slo_nik,

$answer = ['first' => $dc1s];
//Или
$answer =['first' => dc1s];

[Дмитрий]

Don2Quixote, ну а Вы как думаете?)))

[Don2Quixote]

slo_nik, $answer = ['first' => $dc1s];

[Дмитрий]

Don2Quixote, так зачем спрашиваете, если знаете правильный ответ?)))

Answer 2

[po5epT]

success: function( data ){ ... }
Функция принимает данные от сервера в одну переменную. А уже из нее доставайте все что в ней есть.
Я бы рекомендовал использовать dataType: "json", а с сервера отправлять массив данных кодированый в json функцией json_encode. Тогда проще будет разобрать ответ. имхо

Comments

[Don2Quixote]

Не разбираюсь пока в json, но теперь есть повод посмотреть, что это за зверь.

[Андрей]

Так давно есть обёртка $.getJSON

[po5epT]

Если указать dataType: "json", то нет необходимости парсить ответ, он уже будет превращен в js объект из которого вы просто берете нужные данные и вставляете куда надо.