JQuery Ajax跨域请求并使用JSON String

时间:2014-11-19 22:15:52

标签: php jquery ajax json

我想创建一个自动完成功能,我需要将数据作为来自不同网站的来源。因此,当我手动访问链接时,我想创建一个Ajax请求,它只返回JSon String(我认为它是Json)。由于"允许来源"我遇到了一些错误。的事情。

这是我获取所有数据的链接:

http://www.futhead.com/15/players/search/quick/?term=

最后(在term =之后)我想稍后添加自动填充字段的输入,此链接会返回我的不同结果。

这是我在谷歌搜索后尝试过的,这提醒"错误":

$.ajax({
     url:"http://www.futhead.com/15/players/search/quick/",
     data: "term=Ibarbo",
     dataType: 'jsonp', // Notice! JSONP <-- P (lowercase)
     success:function(json){
         // do stuff with json (in this case an array)
         alert("Success");
     },
     error:function(){
         alert("Error");
     }      
});

我想要的是什么:

我想在我的php文件中按属性显示此页面的结果。

这是&#34; http://www.futhead.com/15/players/search/quick/?term=ibarbo&#34;:

的结果
[{"rating": 75, "club_image": "http://futhead.cursecdn.com/static/img/15/clubs/1842.png", "image": "http://futhead.cursecdn.com/static/img/15/players/204550.png", "revision_type": null, "workrates_short_string": "M/M", "xb_auction_average": null, "full_name": "V\u00edctor Ibarbo", "player_id": 204550, "id": 816, "nation_image": "http://futhead.cursecdn.com/static/img/15/nations/56.png", "pc_auction_average": null, "type": "15-player", "short_name": "V\u00edctor Ibarbo", "ps_auction_average": null, "club": 363, "nation": 12, "attr6": 78, "attr4": 80, "attr5": 39, "attr2": 71, "attr3": 66, "attr1": 91, "slug": "victor-ibarbo", "league": 1, "rare": true, "level": 0, "position": "ST"}]

然后我要输出:

评级= 75

Club_image = http://futhead.cursecdn.com/static/img/15/players/204550.png

等等。

1 个答案:

答案 0 :(得分:1)

使用JSONP,jQuery创建一个<script>标记并将函数名称发送到远程主机。远程主机需要将其结果包装在函数中,以便jQuery稍后可以调用该方法来获取结果。

见这里:jasonp cross domain request "wrapping json into a callback method"

如果远程主机通过包装结果不响应jQuery的JSONP,那么最好的解决方案可能是用PHP中的CURL请求调用服务。您在自己的站点上创建一个返回结果的PHP页面,然后您不再遇到跨站点问题。

我已经使用下面的代码向其他服务器发出请求,在我的情况下,由于需要凭据,我已经删除了,但它也可以在您自己的服务器上返回结果。 (注意,我可能在删除凭据等方面创建了一个错误,因此不确定这是否完美)。

<?php
namespace WebServices {

    class CurlRequest {
        const REQUEST_TYPE_GET      = 'GET';
        const REQUEST_TYPE_POST     = 'POST';
        const REQUEST_TYPE_PUT      = 'PUT';
        const REQUEST_TYPE_DELETE   = 'DELETE';

        public function get($path, array $params=array() ) {
            return $this->httpRequest(self::REQUEST_TYPE_GET,$path,$params);
        }
        public function post($path, array $params=array() ) {
            return $this->httpRequest(self::REQUEST_TYPE_POST,$path,$params);
        }
        public function put($path, array $params=array() ) {
            return $this->httpRequest(self::REQUEST_TYPE_PUT,$path,$params);
        }
        public function remove($path, array $params=array() ) {
            return $this->httpRequest(self::REQUEST_TYPE_DELETE,$path,$params);
        }
        protected function httpRequest($type, $path, array $params=array()) {
            if( $type == self::REQUEST_TYPE_GET || $type == self::REQUEST_TYPE_DELETE) {
                $queryParams    = count($params)==0 ? '' : '&'.http_build_query($params);
                $path          .= $queryParams;
            }

            $curl               = curl_init($path);

            if( $type == self::REQUEST_TYPE_POST || $type == self::REQUEST_TYPE_PUT ) {
                curl_setopt($curl, CURLOPT_POSTFIELDS, json_encode($params)); //-d
                curl_setopt($curl, CURLOPT_HTTPHEADER, array('Content-Type: application/json')); //-H
            }
            curl_setopt($curl, CURLOPT_VERBOSE, false); //-v
            curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
            curl_setopt($curl, CURLOPT_CUSTOMREQUEST, $type);

            $response   = curl_exec($curl);
            $error      = curl_error($curl);
            $className  = get_class($this);
            curl_close($curl);

            if( $response === false || !empty($error) ) {
                $err    = empty($error)
                        ? "{$className}::httpRequest to '{$path}' failed"
                        : "{$className}::httpRequest to '{$path}' failed with message ({$error})\r\nRESPONSE: '{$response}'";
                error_log($err);
                throw new \Exception($err);
            }

            return json_decode($response);
        }
    }
}

在要返回详细信息的页面上,您只需要执行以下操作:

$curlRequest = new CurlRequest();
echo json_encode($curlRequest->get('http://www.futhead.com/15/players/search/quick/?term=ibarbo'));

你也可以删除方法中的json_decode,这样它就会返回字符串,然后你就不必重新编码就可以输出它了。