How to get 4 images from php server using jQuery ajax?

Question

PHP

There is a page with a table.

By clicking on the "START GAME" button, the js script is launched:

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);
        }
      })
    }

Here is the output of "getCard.php":


Do not look at what is specified in success in the js script - it is wrong there. I just want to know what I need to write down there in order to fill the table cells with pictures from the server, using the id of the pictures on the server and the id of the table fields in the main html document. For the first time I put the complexity of the question "Complicated", since I myself could not find information anywhere.

Answer 1

Good evening.
On the server, you form a json string and give it back to the client
In jquery, you receive and parse the json string

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

But it all depends on how you generate json on the server, with what data. It depends on how you will parse it and how to transfer it to the browser.
ps
Possible server response

$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);
        }

Answer 2

success: function( data ){ ... }
The function receives data from the server into one variable. And already from it, get everything that is in it.
I would recommend using dataType: "json", and send an array of data encoded in json using the json_encode function from the server. Then it will be easier to parse the answer. IMHO