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

Question

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'
    });
});

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"
       }
    }
  }
});

what does ajax request return ? – David Jul 29 '13 at 09:06 — David, Jul 29 '13 at 09:06

score 2 · Answer 1 · edited Dec 08 '13 at 15:49

2

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.

edited Dec 08 '13 at 15:49

BenMorel

34,448
50
182
322

answered Jul 29 '13 at 09:32

developerCK

4,418
3
16
35

I followed your advice and did an update on callback response, see the post. I changed ajax success: function(data){ $(body).html(data.query.results);}); now I am still not understanding how the variable $responseArr in json_encode() is created. Based on the callback response I provided in the update, do I need to change the variable name or it can be just anything? When I did the test, I left $responseArr as it is, my result returns "(null)". – user1824996 Jul 29 '13 at 13:26
It's any array . b/c json_encode function takes array as parameter. lete you wanna send a result like "query": { "count": 1, "created": "2013-07-29T13:01:12Z", "lang": "en-US", "results": { "h3": { "class": "mytitle", "content": "Example" } } } } then you need to create an array like $responseArr = array("query"=>array("count"=>1,"created"=>"2003-07-29T13:01:122","lang"=>"en-US","results"=>array("h3"=>array("class"=>"mytitle","content"=>"Example")))); echo json_encode($responseArr); $responseArr is not particular. – developerCK Jul 29 '13 at 17:24
I think I understand what you are trying to say. However, following the above example, I set $responseArr = array(1,2,3) & I echoed both &_GET['inputdata'] as well as the callback value. I tested the remote site by typing "http://serverB.com/detail.php&inputdata=ocean-view&callback=?". Well, the result shows up as "([1,2,3])" but I really need "ocean-view" to show up as well! That was the whole point I wanted it to be echoed from the remote server to the browser. – user1824996 Jul 29 '13 at 20:02
for the "ocean view", check how the server communicate with browser in a direct hit(when page reload) and in a asynchronous request send by browser(ajax). You can ask another question for this, and i will explain how does it perform. b/c it is a topic itself . so first close this question and type a link to ur new question in comment. – developerCK Jul 30 '13 at 01:19

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

1 Answers1