wordpress和walk score整合

时间:2014-05-05 10:43:16

标签: php ajax wordpress

我已经在这个问题上挣扎了3天,并且已经达到我的故障排除能力的最后阶段。我需要从Walk Score API获取特定地址的Walk Score。 API有3个参数:地址,纬度和经度。

当我使用Walk Score中的示例代码时,我得到了预期的结果。示例代码:walkscore.com/professional/api-sample-code.php。这是在我的服务器上工作:http://bigdevelopment.com/walkscore/(直接PHP,不在WordPress上)

当我使用相同的代码(仅添加"数据"和#34; dataType")并转储到WordPress时,我无法显示从API收到的Walk Score JSON。这是我的代码:

get_score.js

function injectWalkScore(address,lat,lon){
        address = encodeURIComponent(address);
        var url="http://suitesearch.bigdevelopment.com/wp-admin/admin-ajax.php?address=" + address + "&lat=" + lat + "&lon=" + lon;
        jQuery.ajax( {
            url: url,
             data: { 
                action: 'getwalkscore'
                },
            dataType: 'JSON',
            type:'GET',
            success: function(data) { displayWalkScores(data); },
            error: function(){ displayWalkScores(""); }
            }
        );
    }
    //to demonstrate all of our formatting options, we'll pass the json on to a series of display functions.
    //in practice, you'll only need one of these, and the ajax call could call it directly as it's onSuccess callback
    function displayWalkScores(jsonStr) {
        displayWalkScore(jsonStr);
    }

    //show the walk score -- inserts walkscore html into the page.  Also needs CSS from top of file
    function displayWalkScore(jsonStr) {
        var json=(jsonStr) ? eval('(' + jsonStr + ')') : ""; //if no response, bypass the eval

        //if we got a score
        if (json && json.status == 1) {
            var htmlStr = '<a target="_blank" href="' + json.ws_link + '"><img src="' + json.logo_url + '" /><span class="walkscore-scoretext">' + json.walkscore + '</span></a>';
        }
        //if no score was available
        else if (json && json.status == 2) {
            var htmlStr = '<a target="_blank" href="' + json.ws_link + '"><img src="' + json.logo_url + '" /> <span class="walkscore-noscoretext">Get Score</span></a>';
        }
        //if didn't even get a json response
        else {
            var htmlStr = '<a target="_blank" href="walkscore.com"><img src="http://cdn.walk.sc/images/api-logo.gif" /> <span class="walkscore-noscoretext">Get Score</span></a> ';
        }
        var infoIconHtml = '<span id="ws_info"><a href="walkscore.com/live-more" target="_blank"><img src="http://cdn2.walk.sc/2/images/api-more-info.gif" width="13" height="13"" /></a></span>';

        //if you want to wrap extra tags around the html, can do that here before inserting into page element
        htmlStr = '<p>' + htmlStr + infoIconHtml + '</p>';

        //insert our new content into the container div:
        jQuery("#walkscore-div").html(htmlStr);
    }

这是我的功能代码段:

add_action('wp_ajax_nopriv_getwalkscore_function', 'getwalkscore');
add_action('wp_ajax_getwalkscore_function', 'getwalkscore');

function getwalkscore($lat, $lon, $address) {
  $address=urlencode($address);
  $url = "http://api.walkscore.com/score?format=json&address=$address";
  $url .= "&lat=$lat&lon=$lon&wsapikey=93cc71faa070aa6d13dc3d84c1316671";
  $str = @file_get_contents($url); 
  echo $str; 
 } 

 $lat = $_GET['lat']; 
 $lon = $_GET['lon']; 
 $address = stripslashes($_GET['address']);
 $json = getwalkscore($lat,$lon,$address);
 echo $json; 

在我的模板页面中,我有这个:

<body onload="injectWalkScore('17901 Von Karman Avenue Irvine, CA 92614', '33.6832054', '-117.8497199')" <?php body_class(); ?>>

在测试页面上,我就是这样:

<div id="walkscore-div"></div>

结果页面不会给我一个walkcore但响应就好像有错误: suitesearch.bigdevelopment.com/testing-page/

正如您所看到的,我确实从API获得了正确的响应,但我无法在模板页面上显示JSON响应。

任何帮助都会受到极大的赞赏。

0 个答案:

没有答案