Jquery ajax with JSON return can't access to data inside the JSON

Question

So I have this jquery code:

$(function(){
    var url = 'template/traitComTest.php';
    window.onload = function(e) {
        //  $(".formCom").ajaxForm({url: 'template/traitComTest.php', type: 'post'});
        $.ajax({
            type: "POST",
            url: url,
            data:  $( ".formCom").serializeArray(),
            success: function(reponse){
                console.log(reponse);
            }
        });
    }
});

with this php code:

if (isset($_REQUEST)) {
    $adresse = $_POST['adresse'];
    $com = $_POST['commentaire'];
    $sql = $bdd->prepare('UPDATE tempSelector_template SET commentaire= :com WHERE exemple = :exem ');
    $sql->execute(array(
        ":com" => $com,
        ":exem" => $adresse
    ));
    $myData1 = array('result' => $sql);
    echo json_encode($myData1);
    $sql->closeCursor();

    $sqlSelect = $bdd->prepare("SELECT commentaire FROM tempSelector_template WHERE exemple= :exemp");

    $sqlSelect->execute(array(
        ":exemp" => $adresse
    ));

    $myData = array('result1' => $sqlSelect);
    echo json_encode($myData);
}

I get this response from ajax on chrome' console =>

{"result":{"queryString":"UPDATE tempSelector_template SET commentaire= :com WHERE exemple = :exem "}}{"result1":{"queryString":"SELECT commentaire FROM tempSelector_template WHERE exemple= :exemp"}}

and my issue is that I can't access to the data inside the json and need your help

Answer 1

You have 2 problems:

1. You are sending back invalid json: Instead of echoing out different json strings, you need to build a data-structure (an array or object) and only at the end encode and echo that once. Now you have concatenated json in your response and that makes it really hard to parse.

2. You are not parsing the json you get back in your javascript. When you return valid json (see 1.), you can add dataType: 'json' to your ajax call to have jQuery parse the response automatically:

   $.ajax({ type: "POST", dataType: 'json', url: url, // etc.

Answer 2

Ok so you are basically returning 2 seperate sets of json encodes. It does not work that way. you can only accept a single set of json while reading through ajax. Not two. In your php script i see that you have included that following parts.

$myData1 = array('result' => $sql);
    echo json_encode($myData1);

and

$myData = array('result1' => $sqlSelect);

  echo json_encode($myData);

you should remove both parts and combine them into one single array using array_merge

$myData1 = array('result' => $sql);
$myData = array('result1' => $sqlSelect);
echo json_encode(array_merge(myData1,  $myData));

also in your ajax request, set dataType to json

$.ajax({
    type: "POST",
    url: url,
    dataType: 'json',
    data:  $(".formCom").serializeArray(),
    success: function(reponse){
        console.log(reponse);
    });

Answer 3

So you have a form and you want to submit and that ajax will return some data after submitting the form. And if you want to access the data of response. You need to add this things

1.) Add type = 'post' in your $.ajax object 2.) And use JSON.parse(response)