jQuery ajax request with json response, how to?

Question

I am sending an ajax request with two post values, the first is "action" which defines what actions my php script has to parse, the other is "id" which is the id of the user it has to parse the script for.

The server returns 6 values inside an array() and is then encoded to JSON with the PHP function: json_encode();

Some of my responses are HTML, but when I encode it to JSON, it escapes "/" so it becomes "\/"
How do I disable that?

Also when I don't know how to display this in jQuery when I get the server response, I just thought that putting it all into a div would just display the numbers and HTML codes I had requested, but it displays the array as it is encoded in PHP.

PHP

$response = array();
$response[] = "<a href=''>link</a>";
$response[] = 1;
echo json_encode($response);

jQuery:

$.ajax({
    type: "POST",
    dataType: "json",
    url: "main.php",
    data: "action=loadall&id=" + id,
    complete: function(data) {
        $('#main').html(data.responseText);
    }
});

How do I make this into working JSON?

Can you also dump your JSON response to get a better idea of the problem? Not sure what you mean by "/" so it becomes "/" — Sid
– Sid, Commented Feb 1, 2012 at 15:41
sorry sid i made a backslash but it kinda disappeared :) but every normal slash gets a backslash before it "backslash"+"normal slash" ka_lin: i looked at it but i didnt understand it, and if i did, how would i send some post data with the request ? — Flaashing
– Flaashing, Commented Feb 1, 2012 at 15:44

Guilherme · Accepted Answer · 2015-02-11 16:21:04Z

85

You need to call the

$.parseJSON();

For example:

...
success: function(data){
       var json = $.parseJSON(data); // create an object with the key of the array
       alert(json.html); // where html is the key of array that you want, $response['html'] = "<a>something..</a>";
    },
    error: function(data){
       var json = $.parseJSON(data);
       alert(json.error);
    } ...

see this in http://api.jquery.com/jQuery.parseJSON/

if you still have the problem of slashes: search for security.magicquotes.disabling.php or: function.stripslashes.php

Note:

This answer here is for those who try to use $.ajax with the dataType property set to json and even that got the wrong response type. Defining the header('Content-type: application/json'); in the server may correct the problem, but if you are returning text/html or any other type, the $.ajax method should convert it to json. I make a test with older versions of jQuery and only after version 1.4.4 the $.ajax force to convert any content-type to the dataType passed. So if you have this problem, try to update your jQuery version.

edited Feb 11, 2015 at 16:21

answered Feb 1, 2012 at 16:11

Guilherme

1,99022 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Flaashing Over a year ago

it returns an error: missing ) after argument list "alert(data.0);"

Guilherme Over a year ago

yes, it was an example. You have to define your array with a key that can be converted to an object, because numbers can be. like $response['html'] = "something"; than you call it using the parseJSON json.html (like the example above).

PHP Ferrari Over a year ago

pls make correction use alert(json.html); instead of alert(data.html);

low_rents Over a year ago

when dataType: "json" is used in the ajax-call then you should not need to $.parseJSON; from the jQuery docs: "(dataType:)"json": Evaluates the response as JSON and returns a JavaScript object. "

Guilherme Over a year ago

Yes @northkildonan, you are right, in fact, the @sgb answer is the right answer, but if you look at the jquery code, when you pass dataType it really converts the response in the specific type, but Flaashing done that already, and it didn't converted. I don't know why this happens, but I have this same problem once, and the only way is parsing the response.

|

sgb · Accepted Answer · 2012-02-01 15:50:38Z

49

Firstly, it will help if you set the headers of your PHP to serve JSON:

header('Content-type: application/json');

Secondly, it will help to adjust your ajax call:

$.ajax({
    url: "main.php",
    type: "POST",
    dataType: "json",
    data: {"action": "loadall", "id": id},
    success: function(data){
        console.log(data);
    },
    error: function(error){
         console.log("Error:");
         console.log(error);
    }
});

If successful, the response you receieve should be picked up as true JSON and an object should be logged to console.

NOTE: If you want to pick up pure html, you might want to consider using another method to JSON, but I personally recommend using JSON and rendering it into html using templates (such as Handlebars js).

edited Feb 1, 2012 at 15:50

answered Feb 1, 2012 at 15:45

sgb

2,3842 gold badges19 silver badges31 bronze badges

10 Comments

Flaashing Over a year ago

i tried your example, in my firebug console i get the response : missing } after property list "sucess: function(data){" yeah, you missed a coma after setting data. but now it gives me a response coded in json in firebug

sgb Over a year ago

I had a syntax error - "sucess" should be "success", and I missed a comma. You should be able to explore your response now and output parts of it into the DOM.

Flaashing Over a year ago

yes about that, how do u split the array into 6 bits in jquery and output them in 6 diffrent elements ?

sgb Over a year ago

it depends on the structure of your JSON, if you link a sample, I can help.

sgb Over a year ago

you'll need your PHP to output an array into JSON rather than html to do that.

|

ShankarSangoli · Accepted Answer · 2012-02-01 15:46:16Z

2

Since you are creating a markup as a string you don't have convert it into json. Just send it as it is combining all the array elements using implode method. Try this.

PHP change

$response = array();
$response[] = "<a href=''>link</a>";
$response[] = 1;
echo implode("", $response);//<-----Combine array items into single string

JS (Change the dataType from json to html or just don't set it jQuery will figure it out)

$.ajax({
   type: "POST", 
   dataType: "html", 
   url: "main.php", 
   data: "action=loadall&id=" + id,
   success: function(response){
      $('#main').html(response);
   }
});

answered Feb 1, 2012 at 15:46

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

2 Comments

ShankarSangoli Over a year ago

@Flaashing - Did you try this?

Flaashing Over a year ago

no because i want each of the 6 values to be displayed in 6 diffrent elements :)

ArtNazarov · Accepted Answer · 2014-02-19 10:31:30Z

2

Connect your javascript clientside controller and php serverside controller using sending and receiving opcodes with binded data. So your php code can send as response functional delta for js recepient/listener

see https://github.com/ArtNazarov/LazyJs

Sorry for my bad English

answered Feb 19, 2014 at 10:31

ArtNazarov

834 bronze badges

Comments

Dharman · Accepted Answer · 2020-10-13 10:55:07Z

1

Try this code. You don't require the parse function because your data type is JSON so it is return JSON object.

$.ajax({
    url : base_url+"Login/submit",
    type: "POST",
    dataType: "json",
    data : {
        'username': username,
        'password': password
    },
    success: function(data)
    {
        alert(data.status);
    }
});

edited Oct 13, 2020 at 10:55

Dharman♦

33.9k27 gold badges105 silver badges157 bronze badges

answered Jan 14, 2020 at 12:34

Pratik Bharodiya

1316 bronze badges

Collectives™ on Stack Overflow

jQuery ajax request with json response, how to?

5 Answers 5

6 Comments

10 Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

10 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related