jsonp, jQuery & PHP to make cross-domain ajax call

Question

1. http://serverA.com/list.php :

html:

<form id="myform">
   <input id="inputfield" name="view">
</form>

js:

var inputdata = $('#inputfield').val('ocean-view');

$('#myform').submit(function(e) {
    e.preventDefault();

    $.ajax({
       type: 'GET',
       url: 'http://serverB.com/detail.php',
       data: inputdata,
       dataType: 'jsonp'
    });
});

2. http://serverB.com/detail.php

php:

<?php
    $view = $_GET['callback'].'('.json_encode(name) .')';
?>

html:

<h4><?php echo $view; ?></h4>

what the code does is:

from serverA, assign a value "ocean-view" to an input field, submit this form to serverB, and display this value in a h4 tag.

I couldn't quite figure out how to write the server-side code to output the value, even though I have found the following posts.

this and this .

Any kind of help is appreciated.

UPDATE: I used YQL to help to see the jsonp callback response, here is the json structure:

callback({
  "query": {
    "count": 1,
    "created": "2013-07-29T13:01:12Z",
    "lang": "en-US",
    "results": {
       "h3": {
         "class": "mytitle",
         "content": "Example"
       }
    }
  }
});

Answer 1

Actually You are very close to success... just read these points.

• Whenever you are making an ajax request the browser sends a hit on ajax URL with respected parameters and details. On respected URL PHP code executes. It can return data in some format. It can not return data in directly PHP variable.

Formats are:

text/html
json
xml
......

Mainly for cross domain requests we use JSONP. And it means PHP script will return data in JSON. So you will just echo your json_encode in directly script. That will be the response of your ajax request.

• Now when you have got the data in ajax function, then jQuery uses success: function(response){ } where you response will come. So variable response will contain JSON. You can access JSON and put data in any tag by using jQuery selector. $().html(response.);

These thing can be analyzed in any browser in debug console. That what is requested and what is returned. even you can use Firebug in Mozilla to inspect ajax request.

So you will do three changes.

In Ajax function write a success function:

var inputdata = $('#inputfield').val('ocean-view');

$('#myform').submit(function(e) {
e.preventDefault();

$.ajax({
   type: 'GET',
   url: 'http://serverB.com/detail.php',
   data: "inputdata="+inputdata,
   dataType: 'jsonp',
success:function(response){
// response will be json type so access it 
// print ur json in html tag like resposne is {"data":23}
$(<jquery selector>).html(reponse.data);
}
});

});

<?php
// echo this 
$inputdata = $_GET['inputdata'];
// perform you logic , 

// make an array to encode it in json
echo  $_GET['callback'].'('.json_encode($responseArr) .')';
?>

and remove PHP code from h4 tag.