如何在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); 
... 

一旦JS窗口小部件已收到JSON字符串，可以將其轉換成JS對象你需要

JSON.parse(strJSON) 

jQuery的Ajax請求例如什麼：

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