I have two sites:
Both sites are served by the same wildcard SSL certificate
Part of https://a.site.com/a.php:
$(document).ready(function() {
var tURL = "https://b.site.com/b.php?i=1";
$.ajax({
type: "GET",
url: tURL,
async: false,
contentType: "application/json",
dataType: 'jsonp', // Notice! JSONP <-- P (lowercase)
success:function(json){
alert("Success");
},
error:function(){
alert("Error");
}
});
})
On https://b.site.com/b.php I have:
//A query that returns a single value
$u = array('id' => $valueFromSQLQuery);
header('Content-type: application/json');
echo json_encode($u);
//returns {"id":630115} -- "id" is always the same, the number changes
When I run https://b.site.com/b.php I get {"id":630115}
displayed in my browser as I'd expect.
When I run https://a.site.com/a.php I get SyntaxError: missing ; before statement Line 1 {"id":630116}
with an arrow in firebug pointing to the : in {"id":630116}
What am I doing wrong? From what I read, jsonp is the right way to go about doing ajax requests across domains. Is this because of SSL or am I missing something?
UPDATE @DrLivingston's answer pointed me in the right direction. The end result was:
https://b.site/b.php changed to :
//A query that returns a single value
header('Content-type: application/json');
echo $_GET['callback'] . '(' . "{'id' : $valueFromSQLQuery}" . ')';
And https://a.site.com/a.php changed to
$(document).ready(function() {
var tURL = "https://b.site.com/b.php?callback=callback&i=1";