2014-05-04 41 views
0

我試圖讓外部部件,將允許其他網站上用戶能夠在一個「投票」,這是我想收集和存儲的外部部件我D B。我試圖將這與我在Laravel的控制器/模型進行整合。但是,當我將JavaScript標記和div放在另一個站點上時,信息未顯示。現在我正試圖通過jsonp傳遞簡單的信息。下面是代碼:使用回調與Laravel 4.1 PHP控制器和JQuery/JSONP

WidgetController.php:

<?php 

class WidgetController extends BaseController { 


    public function external_widget() { 


     $data = "{Hello World!}"; 

     if(array_key_exists('callback', $_GET)){ 

      header('Content-Type: text/javascript; charset=utf8'); 
      header('Access-Control-Allow-Origin: http://www.example.com/'); 
      header('Access-Control-Max-Age: 3628800'); 
      header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE'); 

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

     }else{ 
      // normal JSON string 
      header('Content-Type: application/json; charset=utf8'); 

      echo $data; 
     } 
    } 

} 

widgetscript.js:

(function() { 

    // Localize jQuery variable 
    var jQuery; 

    if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.11.0') { 

     var script_tag = document.createElement('script'); 
     script_tag.setAttribute("type","text/javascript"); 
     script_tag.setAttribute("src","//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"); 

     if (script_tag.readyState) { 
      script_tag.onreadystatechange = function() { // For old versions of IE 
       if (this.readyState == 'complete' || this.readyState == 'loaded') { 
        scriptLoadHandler(); 
       } 
      }; 
     } else { // Other browsers 
      script_tag.onload = scriptLoadHandler; 
     } 

     // Try to find the head, otherwise default to the documentElement 
     (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag); 
    } else { 
     // The jQuery version on the window is the one we want to use 
     jQuery = window.jQuery; 
     main(); 
    } 

    /******** Called once jQuery has loaded ******/ 
    function scriptLoadHandler() { 
     // Restore $ and window.jQuery to their previous values and store the 
     // new jQuery in our local jQuery variable 
     jQuery = window.jQuery.noConflict(true); 
     // Call our main function 
     main(); 
    } 

    /******** Our main function ********/ 
    function main() { 
     jQuery(document).ready(function($) { 
      /******* Load CSS *******/ 
      var css_link = $("<link>", { 
       rel: "stylesheet", 
       type: "text/css", 
       href: "widgetstyle.css" 
      }); 
      css_link.appendTo('head');   

      /******* Load HTML *******/ 
      var jsonp_url = "http://myurl.com/widget/external_widget?callback=?"; 
      $.getJSON(jsonp_url, function(data) { 
       $('#example-widget-container').html("This data comes from another server: " + data.html); 
      }); 
     }); 
    } 

    })(); // We call our anonymous function immediately 

widgetstyle.css留空現在。

相關路線:

Route::get('/widget/external_widget', array('uses' => '[email protected]_widget')); 

最後,我嘗試調用該另一個網頁上:

<div id="example-widget-container"></div> 

這個 「Hello World」 我想上打印出來另一個網站不顯示。任何想法正在發生什麼問題?

回答

1

要使用JSONP技術,您應該返回包含它的函數調用的有效JSON對象。 JSON是無序的屬性值對的集合。 {Hello World!}不是有效的JSON,嘗試使用正確的JSON格式可能會解決您的問題。

PHP

$data = "{msg:'Hello World!'}"; 

的Javascript

var jsonp_url = "http://myurl.com/widget/external_widget?callback=?"; 
$.getJSON(jsonp_url, function(data) { 
    $('#example-widget-container').html("This data comes from another server: " + data.msg); 
});