jquery $.ajax jsonp

Thinking80s picture Thinking80s · Aug 26, 2011 · Viewed 43.6k times · Source
$.ajax({
    type : "GET",
    dataType : "jsonp",
    url : '/',
    data : {}
    success: function(obj){

    }
});

How can i use $.ajax dataType: jsonp cross-domain to post data?

Answer

Jonathan Marzullo picture Jonathan Marzullo · Jan 31, 2013

To answer your question instead of sending you to another link like above:

The JS:

$.ajax({
     type : "GET",
     dataType : "jsonp",
     url : "http://domainname.com/json.php?callback=?", // ?callback=?
     success: function(data){
           // do stuff with data
     }
});

The PHP could possibly look like this:

<?php
include('connect.php');
$sql = "SELECT id, name, items FROM tablename ORDER BY id ASC"; 
$result = mysql_query($sql);
while($row = mysql_fetch_array($result))
{
    $rows[] = array(
            "id" => $row['id'], 
            "name" => $row['name'], 
            "items" => $row['items']);
}
$json = json_encode($rows);
$callback = $_GET['callback'];
echo $callback.'('. $json . ')';
?>

Setting the dataType to jsonp will allow jQuery to automatically add an extra ?callback=? to the end of your url to specify the callback. If you specify your own like above it will use the callback name you are passing. If you need to specify a json callback name use the jsonpCallback property. Or you can add as a param to the data property. If you need more info, please visit the jQuery API Ajax: http://api.jquery.com/jQuery.ajax/.

Don't forget to add the ; on the result string.

I hope this helps!