web-dev-qa-db-ja.com

シンプルなjQuery、PHPおよびJSONPの例？

私は同じ起源のポリシーの問題に直面しており、主題を調査することにより、特定のプロジェクトにとって最善の方法はJSONPを使用して起源間リクエストを行うことであることがわかりました。

JSONPに関するIBMのこの記事 を読んでいますが、何が起こっているのかについて100％明確ではありません。

私がここで求めているのは、単純なjQuery> PHP JSONPリクエスト（または用語が何であれ;）です）-このようなもの（明らかに間違っています、あなたが得ることができるように私が達成しようとしているもののアイデア:)）：

jQuery：

$.post('http://MySite.com/MyHandler.php',{firstname:'Jeff'},function(res){
    alert('Your name is '+res);
});

PHP：

<?php
  $fname = $_POST['firstname'];
  if($fname=='Jeff')
  {
    echo 'Jeff Hansen';
  }
?>

これを適切なJSONPリクエストに変換するにはどうすればよいですか？そして、返される結果にHTMLを格納する場合、それも動作しますか？

phpjqueryajaxjsonjsonp
53
Jeff

外部ドメインで$ .getJSONを使用すると、たとえば Tweetスライダー などのJSONPリクエストが自動的に処理されます

ソースコードを見ると、.getJSONを使用してTwitter APIを呼び出していることがわかります。

あなたの例は次のようになります：THIS IS TESTED AND WORKS（ http://smallcoders.com/javascriptdevenvironment.html にアクセスして動作を確認できます）

//JAVASCRIPT

$.getJSON('http://www.write-about-property.com/jsonp.php?callback=?','firstname=Jeff',function(res){
    alert('Your name is '+res.fullname);
});

//SERVER SIDE
  <?php
 $fname = $_GET['firstname'];
      if($fname=='Jeff')
      {
          //header("Content-Type: application/json");
         echo $_GET['callback'] . '(' . "{'fullname' : 'Jeff Hansen'}" . ')';

      }
?>

？callback =？に注意してください。および+ res.fullname

89
Liam Bailey

まず、JSONPを使用してPOSTリクエストを作成できません。

基本的には、スクリプトタグが動的に挿入されてデータが読み込まれます。したがって、GETリクエストのみが可能です。

さらに、データを変数にロードするためにリクエストが終了した後に呼び出されるコールバック関数でデータをラップする必要があります。

このプロセス全体がjQueryによって自動化されています。ただし、外部ドメインで$ .getJSONを使用するだけでは動作しません。私は個人的な経験から伝えることができます。

最善の方法は、＆callback =？を追加することですあなたにURL。

サーバー側では、データがこのコールバック関数でラップされていることを確認する必要があります。

すなわち。

echo $_GET['callback'] . '(' . $data . ')';

編集：

Liamの答えについてコメントするのに十分な担当者がまだいないので、ここで解決策を示します。

リアムのラインを交換

 echo "{'fullname' : 'Jeff Hansen'}";

と

 echo $_GET['callback'] . '(' . "{'fullname' : 'Jeff Hansen'}" . ')';
19
Ewout Kleinsmann

その他の提案

JavaScript：

$.ajax({
        url: "http://FullUrl",
        dataType: 'jsonp',
        success: function (data) {

            //Data from the server in the in the variable "data"
            //In the form of an array

        }

});

PHPコールバック：

<?php

$array = array(
     '0' => array('fullName' => 'Meni Samet', 'fullAdress' => 'New York, NY'),
     '1' => array('fullName' => 'Test 2', 'fullAdress' => 'Paris'),
);

if(isset ($_GET['callback']))
{
    header("Content-Type: application/json");

    echo $_GET['callback']."(".json_encode($array).")";

}
?>
15
Meni Samet

サーバーが有効なJSONP配列で応答するようにするには、JSONを角かっこで囲みます()そしてcallbackを前に付けます：

echo $_GET['callback']."([{'fullname' : 'Jeff Hansen'}])";

json_encode（） を使用すると、ネイティブのPHP配列をJSONに変換します。

$array = array(
    'fullname' => 'Jeff Hansen',
    'address' => 'somewhere no.3'
);
echo $_GET['callback']."(".json_encode($array).")";
7
mckoch

シンプルなjQuery、PHPおよびJSONPの例を以下に示します。

window.onload = function(){
        $.ajax({
                cache: false,
                url: "https://jsonplaceholder.typicode.com/users/2",
                dataType: 'jsonp',
                type: 'GET',
                success: function(data){
                        console.log('data', data)
                },
                error: function(data){
                        console.log(data);
                }
        });
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
2
Mayur S

これを使って ..

    $str = rawurldecode($_SERVER['REQUEST_URI']);
    $arr = explode("{",$str);
    $arr1 = explode("}", $arr[1]);
    $jsS = '{'.$arr1[0].'}';
    $data = json_decode($jsS,true);

今..

つかいます $data['elemname']で値にアクセスします。

jSONオブジェクトでjsonpリクエストを送信します。

リクエスト形式：

$.ajax({
    method : 'POST',
    url : 'xxx.com',
    data : JSONDataObj, //Use JSON.stringfy before sending data
    dataType: 'jsonp',
    contentType: 'application/json; charset=utf-8',
    success : function(response){
      console.log(response);
    }
})
0
Atul Sharma
$.ajax({

        type:     "GET",
        url: '<?php echo Base_url("user/your function");?>',
        data: {name: mail},
        dataType: "jsonp",
        jsonp: 'callback',
        jsonpCallback: 'chekEmailTaken',
        success: function(msg){
    }
});
return true;

コントローラー内：

public function ajax_checkjp(){
$checkType = $_GET['name'];
echo $_GET['callback']. '(' . json_encode($result) . ');';  
}
0
user4000483