Javascript 如何使用PHP/JQuery/JSONP动态（Laravel项目）进行回调

现在我正在开发一个小部件，我希望某些人把它放在他们的网站上，向他们发送信息，并从中获取一些信息。现在，我让他们在代码中使用以下内容：

<script src="http://myurl.com/widget/widgetscript.js" type="text/javascript"></script>
<div id="example-widget-container"></div>

此处调用的路由调用my WidgetController.php中的函数：

public function external_widget($id) {

    $array = Fan::likes_by_city($id);

    $data = "{msg:'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;
    }

我希望这个函数是动态的，这样我就可以为每个使用小部件的用户定制这个函数中的数据（以$id为参数）。我知道我可以用我的路线这样做：

Route::get('/widget/external_widget/{id?}', array('uses' => 'WidgetController@external_widget'));

只需将id参数添加到url

---

然而，在放在用户端（脚本和div）的代码中，我看不到任何方法可以使其动态化。有没有一种方法可以从脚本或div获取id数据，从而改变widgetscript.js，从而改变调用的路由？谢谢你的帮助

这与任何请求一样：向url添加参数以自定义请求

一个简单的例子是将

widgetscript.js

脚本更改为如下内容：

//create a function for your widget. 
//In javascript a function is also a class and this keeps all your variables and settings within your own scope so you dont have to worry about other scripts

//Keep in mind that I do some basic error checking, but not much.
//If you dont check for errors and a user provides wrong information he might get JS errors on his site.
//If you want to have a user friendly widget, make sure you check as much as possible and provide usefull information about the problems.

function MyCoolWidgetClass() {
  //In javascript it is possible to alter the reference to this, EG: using apply
  //To make sure you can always reference your own class, store the reference.
  var self = this;

  //define the basic settings
  self.defaultSettings = {
    container: '#example-widget-container',
    title: "Widget result",
    background: "#ccc",
    userId: 0
  }

  self.settings = {};

  //start your widget
  self.start = function(options) {  
    //merge the provided settings with the default settings
    $.extend(self.settings, self.defaultSettings, options);

    //check if the userid is provided
    //you could add more checks to validate the userId
    if (self.settings.userId==0) {
      alert("We need to know who you are");
      return;
    }

    var jsonp_url = "http://myurl.com/widget/external_widget?userId="+self.settings.userId+"&callback=?";
    $.getJSON(jsonp_url, function(data) {
        //create the response
        //This is just to show how you could use the settings to show a title or anyting else.
        //Again, you could check if the settings are correct.
        var html = '<div class="title">'+self.settings.title+'</div><div class="content" style="background:'+self.settings.background+'">'+data.msg+'</div>';

        //add it to the provided container
        //keep in mind that a user could provide a container like '.items' or 'div' and then it will be added to multiple instances
        $(self.settings.container).html(html);
    });
  }
}
//create a globally approachable instance of your class
window.MyCoolWidget = new MyCoolWidgetClass();

//为小部件创建一个函数。
//在javascript中，函数也是一个类，它将所有变量和设置保持在自己的范围内，因此您不必担心其他脚本
//请记住，我做了一些基本的错误检查，但不是很多。
//如果你不检查错误，而用户提供了错误的信息，他可能会在他的网站上得到JS错误。
//如果您想要一个用户友好的小部件，请确保尽可能多地检查并提供有关问题的有用信息。
函数myColWidgetClass（）{
//在javascript中，可以更改对此的引用，例如：使用apply
//要确保始终可以引用自己的类，请存储引用。
var self=这个；
//定义基本设置
self.defaultSettings={
容器：“#示例小部件容器”，
标题：“小部件结果”，
背景：“ccc”，
用户标识：0
}
self.settings={}；
//启动你的小部件
self.start=函数（选项）{
//将提供的设置与默认设置合并
$.extend（self.settings、self.defaultSettings、options）；
//检查是否提供了用户ID
//您可以添加更多检查来验证用户ID
if（self.settings.userId==0）{
警惕（“我们需要知道你是谁”）；
回来
}
var jsonp_url=”http://myurl.com/widget/external_widget?userId=“+self.settings.userId+”&callback=？”；
$.getJSON（jsonp_url，函数（数据）{
//创建响应
//这只是为了显示如何使用设置来显示标题或其他内容。
//同样，您可以检查设置是否正确。
var html=''+self.settings.title+''+data.msg+''；
//将其添加到提供的容器中
//请记住，用户可以提供类似“.items”或“div”的容器，然后将其添加到多个实例中
$（self.settings.container）.html（html）；
});
}
}
//创建类的全局可接近实例
window.myColWidget=新的myColWidgetClass（）；

现在用户可以将您的小部件添加到他的站点并提供一些选项

<script src="http://myurl.com/widget/widgetscript.js" type="text/javascript"></script>
<script>
$(function(){
  //notice that I dont provide a background, and thus the default will be used.
  MyCoolWidget.start({title: "Another title", container: "#mywidgetcontainer", userId: 10});
});
</script>
<div id="mywidgetcontainer"></div>

$（函数（）{
//请注意，我没有提供背景，因此将使用默认设置。
开始（{title:“另一个标题”，容器：#mywidgetcontainer，userId:10}）；
});

现在我不确定您的响应是什么，但是在大多数情况下，简单地使用实际的用户ID是不可取的。人们可以简单地使用另一个数字来检查其他人的回答

因为每个人都可以在访问你的网站（小部件所在的网站）时查看JS代码，你永远无法真正阻止人们使用他人的ID，但是如果ID是一个长的随机区分大小写的密钥，至少他们无法猜测其他帐户滥用你的服务。例如，如果每天每个ID的请求限制为1000个或更多

---

你想让别人的网站“动态化”？除非你能控制他们的网页，否则你希望如何控制他们网站上的信息？不，不，让小部件动态。对不起，这不清楚。我希望小部件根据它们使用的div（或其他输入）看起来有所不同。我不理解您的需求，当您说：“我希望这个函数是动态的”时，您指的是控制器中的php函数public function external_小部件（$id）？

<script src="http://myurl.com/widget/widgetscript.js" type="text/javascript"></script>
<script>
$(function(){
  //notice that I dont provide a background, and thus the default will be used.
  MyCoolWidget.start({title: "Another title", container: "#mywidgetcontainer", userId: 10});
});
</script>
<div id="mywidgetcontainer"></div>