javascript - 如何使用 Laravel 来使用函数回调?

标签 javascript jquery json widget

我创建了一个简单的小部件,它响应服务器和使用 html 响应的回调函数。这是我的代码片段

<div id="example-widget-container"></div>
<script type="text/javascript" src="js/library.js"></script>

以及来自此的响应

? ( {'html': '<strong>Hello World!</strong>' } )

此代码来自 pyton 并生成 html,这就是响应

hello from the other site: Hello World!

Hello World 来自使用回调函数的服务器。

这是我的 widget.js

(function() {

    // Localize jQuery variable
    var jQuery;

    /******** Load jQuery if not present *********/
    if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.4.2') {
        var script_tag = document.createElement('script');
        script_tag.setAttribute("type","text/javascript");
        script_tag.setAttribute("src",
            "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/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 {
          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: "css/style.css" 
            });
            css_link.appendTo('head');          

            /******* Load HTML *******/
            var jsonp_url = "http://jsonp.local/request-json-array?=callback=?";
            // http://al.smeuh.org/cgi-bin/webwidget_tutorial.py?callback=?

            $.getJSON(jsonp_url, function(data) {
              $('#example-widget-container').html("hello from the other site: " + data);
            });
        });
    }

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

我的问题是如何使用 laravel 从 json 通过 jsonp 创建回调函数。一直尝试搜索谷歌,到目前为止我还没有发现这对于我的项目来说足够好。

感谢http://alexmarandon.com/articles/web_widget_jquery/伟大的文章。大部分代码都来自那里。

更新: 我已经给出了我的答案,请随时更新新答案

最佳答案

通过实现跨资源源共享或称为 CORS,使我能够使用回调函数。

这里指导实现 Laravel 共享数据的依赖项:

https://github.com/barryvdh/laravel-cors

关于javascript - 如何使用 Laravel 来使用函数回调?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46108289/

相关文章:

javascript参数通过id传递给方法

javascript - 如何更改 JSON 结构

javascript - Chart.js 未显示在第二个选项卡上

javascript - jQuery滑动菜单功能

javascript - 如果包含特定类,则将类添加到父类

javascript - 使用 JQuery 显示 JSON

javascript - Ajax 调用以获取从 HTML 选择选项中选择的值

javascript - 如何使用 jQuery 将输入值传递给按钮变量

javascript - 异步调用导致信息在加载之前显示

json - 如何在json中输入标题?