Ajax Request for JSON Data

Question

I try to request the following JSON Data:

 {"status":"success","id":8,"title":"Test","content":"dies ist test 12"}

With this Ajax Request:

$.ajax({
url: 'http://www.XXX.de/?apikey=XXX&search=test',
type: "GET",
dataType: 'jsonp',
success: function(data){
$('#content_test').append(data.content);
 },
 error: function(data){
 //
 }
});

It is not working. What I'm doing wrong?

Are you sure you want to set the dataType to "jsonp". The json you show is not wrapped in jsonp. — bhspencer, Sep 16 '15 at 12:11
@Maddin please tell us the full error message and stack trace if there is one. — bhspencer, Sep 16 '15 at 13:24
The response is: "syntax error json parse unexpected end of data at line 1 of column 1 of the json data" I think there is something wrong with the json data. — desmeit, Sep 16 '15 at 13:26

Vlad Bezden · Answer 1 · 2015-09-16T13:07:30.247

0

Here is an example on how to use jsonp

$.ajax({
    url: 'http://www.XXX.de/?apikey=XXX&search=test',
    type: 'GET',        
    dataType: 'jsonp',
    jsonp: '$callback',
    success: function(data) {
        console.log(data);
        $('#content_test').append(data.content);
    },
    error: function(err) {
        console.log(err);
    }
});

Also open your development tool (Ctrl + Shift + J) and check if you have any errors in your console output.

edited Sep 16 '15 at 13:07

answered Sep 16 '15 at 12:18

Vlad Bezden

83,883
25
248
179

Not working. I created the JSON data by myself. Is that correct? – desmeit Sep 16 '15 at 12:20
The console says: SyntaxError: missing ; before statement – desmeit Sep 16 '15 at 12:22
Can you check in your console if you are getting data back? You might get data back but it's not properly formatted. If you getting data back, please post what you get back. – Vlad Bezden Sep 16 '15 at 12:36
The console says successful response. When I try to change from JSONP to JSON it works in Safari but in Firefox I get an Cross Domain error. – desmeit Sep 16 '15 at 12:47
Please change it to jsonp and since you are getting successful response, can you show what data you are getting back? You might have an issue with data that you are getting back. – Vlad Bezden Sep 16 '15 at 12:53
Sorry I did wrong. The response is: "syntax error json parse unexpected end of data at line 1 of column 1 of the json data" – desmeit Sep 16 '15 at 13:00
Looks like you are having issue with json that comes back from the server. Can you verify that you are getting data back from the server? And can you share the data that you are getting back? – Vlad Bezden Sep 16 '15 at 13:09
yes thats the strange thing. with an other JSON on the same server it is working. – desmeit Sep 16 '15 at 13:12
Can you share your working and not working JSON data? – Vlad Bezden Sep 16 '15 at 13:17
sure, working: {"status":"ok","page":{"id":2,"type":"page","slug":"beispiel-seite","url":"http:\/\/XXX.de\/beispiel-seite\/","status":"publish","title":"Beispiel-Seite","title_plain":"Beispiel-Seite","content":"\r\nicke bins\r\n\n","excerpt":"","date":"2015-09-03 13:34:56","modified":"2015-09-16 13:20:44","categories":[],"tags":[],"author":{"id":1,"slug":"admin","name":"admin","first_name":"","last_name":"","nickname":"admin","url":"","description":""},"comments":[],"attachments":[],"comment_count":0,"comment_status":"open","custom_fields":{}}} here i work with data.page.content – desmeit Sep 16 '15 at 13:19
not working: {"status":"success","id":8,"title":"Test","content":"dies ist testus 12"} – desmeit Sep 16 '15 at 13:20
In your success function, instead of calling $('#content_test').append(data.content); could you please call console.log(data); and share what you get? – Vlad Bezden Sep 16 '15 at 13:23
Since you are using different language you might encode your data before you sending it over the wire on the server side. Are you encoding that data? – Vlad Bezden Sep 16 '15 at 13:31
No i didn't encode something. I made it with Wordpress and wp_send_json. – desmeit Sep 16 '15 at 13:37
Thats the logging: Object { readyState: 4, setRequestHeader: .ajax/v.setRequestHeader(), getAllResponseHeaders: .ajax/v.getAllResponseHeaders(), getResponseHeader: .ajax/v.getResponseHeader(), overrideMimeType: .ajax/v.overrideMimeType(), abort: .ajax/v.abort(), done: f.Callbacks/p.add(), fail: f.Callbacks/p.add(), progress: f.Callbacks/p.add(), state: .Deferred/h.state(), 12 weitere… } – desmeit Sep 16 '15 at 13:40
It works now with this code: $.ajax({ url: 'http://XXX.de/?apikey=XXX&search=test', type: "POST", dataType: 'json', success: function(data){ $('#content_test').append(data.content); }, error: function(data){ console.log(data); } }); But why it works now with POST? – desmeit Sep 16 '15 at 13:47
wp_send_json is a right way of doing. I'm looking for log of the data that you are getting back from the server. I don't see your data. Can you share it? – Vlad Bezden Sep 16 '15 at 13:48
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/89817/discussion-between-maddin-and-vlad-bezden). – desmeit Sep 16 '15 at 13:55

score 0 · Accepted Answer · answered Sep 17 '15 at 14:33

My Solution::

To get the data it is necessary to have a correct callback like this in the PHP file of WP:

$callback = $_GET['callback'];
$response = json_encode( $return );

if ( ! empty ($callback)){
echo $callback . '(' . $response . ')';
} else {
echo $response;
}

die;

Ajax:

 $.ajax({
 url: 'http://www.XXX.de/?apikey=XXX&search=test&callback=?',
 type: "GET",
 dataType: 'json',
 success: function(data){
 $('#content_test').append(data.content);
  },
  error: function(data){
  //
  }
 });

Ajax Request for JSON Data

2 Answers2