0

According to same origin policy, I can't use regular json for ajax call, so I use jsonp instead. I have a simple input field and class name is "newCaller". In my js file

$(document).on("blur", ".newCaller", function(){
  var name = $(this).val();
  var tel = $(this).siblings(".tel").text();
  //console.log(name+tel);
  $.ajax({
    type: 'GET',
    url: 'xxx.xxx.com/phpFunc.php',
    data: ({ 'name' : name, 'tel' : tel }),
    dataType: 'jsonp',
    //I tried success instead of jsonpCallback as well
    jsonpCallback: function(data){
      console.log(data);
    }
  });
});

And here is the php:

<?php
 $name = $_GET['name'];
 $tel = $_GET['tel'];
 echo $name.$tel;
?>

When the ajax function is triggered, the value from the field is undefined. For example, I type "test" into text field and trigger the function, please see following image (sorry for the black line, privacy policy) enter image description here

I use success to callback and returns almost the same thing, "xxx is not defined". Could someone tell me how to fixed it? Thank!

Community
  • 1
  • 1
SPG
  • 6,109
  • 14
  • 48
  • 79

2 Answers2

1

The issues are mostly server-side as that script isn't quite enough to support JSONP.

  1. It has to output valid JSON:

    json_encode($name . $tel);

  2. And include the padding (the callback):

    echo $_GET['callback'] . '(' . json_encode($name . $tel) . ');';

And, you'll want to change jsonCallback back to success.

Jonathan Lonowski
  • 121,453
  • 34
  • 200
  • 199
  • Great! this works! u r my hero! I got "Resource interpreted as Script but transferred with MIME type text/html:". What does this mean? – SPG Jul 16 '13 at 09:57
  • @nich Ah. You'll have to specify the `Content-Type`: [`header('Content-type: application/javascript');`](http://stackoverflow.com/a/111306). Add that before the `echo`. – Jonathan Lonowski Jul 16 '13 at 10:00
  • Thanks again, may I ask you one more question. How can I extract the $tel and $name back to my js. In the end of my php, I do echo $name and $tel. I tried $name=$_GET['callback'] . '(' . json_encode($name) . ');'; and $tel=$_GET['callback'] . '(' . json_encode($name) . ');';. but it won't work. Could you give me a hand? – SPG Jul 16 '13 at 10:07
  • @nich You'll have to output them grouped together in one JSON value: `json_encode(array($name, $tel))` with `data[0]` and `data[1]`. Associative arrays work as well, but encode as `Object`s in JSON: `array("name" => $name, "tel" => $tel)` with `data.name` and `data.tel`. – Jonathan Lonowski Jul 16 '13 at 10:12
0

ur not converting the values to json in php page phpFunc.php.u need to give

$arr=array($name=>$tel);
json_encode($arr);

because ur doing it in json format..so u need to get data in json format only.but ur sending in normal text format soit shows mime/type error

to check exact error try this

$(document).on("blur", ".newCaller", function(){
 var name = $(this).val();
 var tel = $(this).siblings(".tel").text();
  //console.log(name+tel);
   $.ajax({
  type: 'GET',
   url: 'xxx.xxx.com/phpFunc.php',
   data: ({ 'name' : name, 'tel' : tel }),
    error: function(xhr, textStatus, errorThrown) {
    alert(errorThrown);
    //alert(xhr.responseText);
      return false;
         },
  dataType: 'jsonp',
  //I tried success instead of jsonpCallback as well
  success: function(data){
   console.log(data);
 }
 });

});

nickle
  • 4,636
  • 1
  • 13
  • 11
  • Thanks for your help. I added this two lines into my code. and then I do "echo $arr;". And I rerun my code, but still get "Resource interpreted as Script but transferred with MIME type text/html:". What have I done wrong? – SPG Jul 16 '13 at 09:52
  • ru doing json encode in phpFunc.php page and also make jsonpCallback to success – nickle Jul 16 '13 at 09:55