如何在javascript小部件中使用Mysql数据库数据

Question

我正在创建一个小部件，供用户放置在他们的博客上，以将流量引导至我的优惠券代码网站。我希望小部件能够访问数据库并输出当天的 5 个顶级优惠券。这是我将他们放置在他们的网站上的内容：

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

现在 script.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");
    script_tag.onload = scriptLoadHandler;
    script_tag.onreadystatechange = function () { // Same thing but for IE
        if (this.readyState == 'complete' || this.readyState == 'loaded') {
            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: "style.css" 
        });
        css_link.appendTo('head');          

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

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

我遇到的问题是如何将 json 数组返回到 js 文件，以及如何循环它以输出无序列表中的每张优惠券都是其自己的列表项？

非常感谢任何帮助！

Answer 1

使用 Ajax，

从小部件发送 HttpRequest 到 Web 服务器，
从服务器发回 json 响应，例如在 PHP 中会是这样的

...
//access the database
$sql = "SELECT * FROM coupons LIMIT 5";
while ($row = mysql_fetch_assoc($sql)) {      
  $coupons[] = $row;
}

//return json object
echo json_encode($coupons);
...

所需的操作：

JSON.parse(strJSON)

一旦 js 小部件收到 json 字符串，您可以将其转换为 js 对象来执行jQuery ajax 请求示例

$.ajax({
  url: "test.html",
  context: document.body,
  success: function(){
    $(this).addClass("done");
  }
});