來自MySQL的jQuery JSON模板

我創建了一個jQuery函數，它調用一個PHP服務器端文件，該文件從MySQL數據庫中提取數據並以JSON格式輸出。 JSON數據在此函數中被模板化，以便在我的HTML文檔中以列表項的形式動態插入到DIV中。來自MySQL的jQuery JSON模板

JSON數據很好 - 我使用工具驗證了它，如果我在瀏覽器中運行PHP腳本，它將正確顯示（在Chrome中使用JSONView）。但是，我不能讓數據顯示在HTML文檔中。

我原本是在PHP文件中以HTML格式發送數據，並且這個工作正常，但我有其他問題（plz see this SO question），所以我希望以另一種方式來解決這個問題 - 使用JSON代替它並進行模板化。

我試圖從數據庫中添加行：標籤，標題，詳細描述，& gotoURL成角度的HTML標籤：

<div id="navContent"> 
    <li id="navItem"> 
     <a href=""> 
     <h1>Label</h1> 
     <h2>Title</h2> 
     <p>Dispription</p> 
     </a> 
    </li> 
</div>

我不知道我有什麼錯我的編碼;你能否通過片段查看並在你的答案中進行適當的修改。日Thnx

曾任PHP：

<?php 
//MySQL Database Connect 
include 'mylogin.php'; 

mysql_select_db("myDB"); 
$sql=mysql_query("select * from my_list"); 

$output = new stdClass(); 

while($row = mysql_fetch_assoc($sql)) { 
    $output->Some_Guidance_Library[] = $row; 
} 

header('Cache-Control: no-cache, must-revalidate'); 
header('Content-type: application/json'); 
echo (json_encode($output)); 

mysql_close(); 
?>

HTML文件：

<html> 
. . . 
<head> 
. . . 
<script type="text/javascript"> 
    . . . 
    var ajaxLoader = ''; 
    var dns = 'http://192.168.1.34'; 
    var navContent = '/andaero/php/my_list.php'; 
    var bodyContent = '/wiki/index.php/Document #content'; 

    <!-- ================ When Ready Do This ============================ --> 
    <!-- **************************************************************** --> 
    $(document).ready(function(){ 
      loadNav(dns + navContent, "navContent");//<- This gets loaded into the navContent<div 
      loadPage(dns + bodyContent, "bodyContent"); 
    }); 
    . . . 
</script> 
</head> 
<body> 
    . . . 
    <div id="navScrollContainer" class="navContentPosition"> 
     <div id="navContent"> 
     <li id="navItem"> 
      <a href=""> 
      <h1>Label</h1> 
      <h2>Title</h2> 
      <p>Dispription</p> 
      </a> 
     </li> 
     </div> 
    </div> 
    . . . 
</body> 
<!-- ================ Functions ===================================== --> 
<!-- **************************************************************** --> 
. . . 
<script type="text/javascript"> 

    /* --------------- Handle Pg Loading ----------------- */ 
    function loadPage(url, pageName) { 
     $("#" + pageName).load(url, function(response){ 
      $('#navHeaderTitle').text($(response).attr('title')); 
    //   transition("#" + pageName, "fade", false); 
     }); 
    }; 

    function loadNav(url, divId) {//<-- THIS FUNCTION'S BROKE!! 
     $.getJSON(url, function(data){ 
      $.each(data, function(){ 
       var newItem = $('#' + divId).clone(); 
       // Now fill in the fields with the data 
       newItem.find("h1").text(this.label); 
       newItem.find("h2").text(this.title); 
       newItem.find("p").text(this.description); 
       newItem.find("a").text(this.gotoURL); 
       // And add the new list item to the page 
       newItem.children().appendTo("#navScrollContainer") 
      }); 
      //transition(pageName, "show"); 
     }); 
    }; 
</script> 
</html>

返回的JSON數據：

{"Regulatory_Guidance_Library":[{"_id":"1","label":"AC","title":"Advisory Circulators","description":"Provides guidance such as methods, procedures, and practices for complying with regulations and requirements.","date":"2008-03-03","gotoURL":null},{"_id":"2","label":"AD","title":"Airworthiness Directives","description":"Legally enforceable rules that apply to aircraft, aircraft engines, propellers, and appliances.","date":"2012-06-08","gotoURL":"\/wiki\/index.php\/Airworthiness_Directive"},{"_id":"3","label":"CFR","title":"Code of Federal Regulations","description":"Official Rulemaking documents of the CFR in Title 14 and have been published in the Federal Register","date":"2012-01-31","gotoURL":null},{"_id":"4","label":"PMA","title":"Parts Manufacturer Approvals","description":"Parts Manufacturer Approvals","date":"2012-01-31","gotoURL":null},{"_id":"5","label":"SAIB","title":"Special Airworthiness Info Bulletins","description":"Bulletins issued by manufacturers to provide modification or inspection instructions.","date":"2012-01-31","gotoURL":null},{"_id":"6","label":"SFAR","title":"Special Federal Aviation Regulation","description":"Official Rulemaking documents that have changed the language of the CFR in Title 14 CFR for aviation.","date":"2012-01-31","gotoURL":null},{"_id":"7","label":"STC","title":"Supplemental Type Certificates","description":"Document issued by the Federal Aviation Administration approving a product (aircraft, engine, or propeller) modification","date":"2012-01-31","gotoURL":null},{"_id":"8","label":"TSO","title":"Technical Standard Orders","description":"Minimum performance standards issued by the FAA for specified materials, parts, processes, and appliances used on civil aircraft.","date":"2012-01-31","gotoURL":null},{"_id":"9","label":"TCDS","title":"Type Certificate Data Sheets","description":"Repository of Make and Model information of aircraft, engine or propeller including airspeed, weight, and thrust limitations, etc.","date":"2012-01-31","gotoURL":null}]}

來源

2012-03-29 CelticParser

你永遠不會是指在阿賈克斯成功解析陣列Some_Guidance_Library。可能更容易擺脫它。

嘗試改變

$output = new stdClass(); 

while($row = mysql_fetch_assoc($sql)) { 
    $output->Some_Guidance_Library[] = $row; 
}

TO：

$output = array(); 

while($row = mysql_fetch_assoc($sql)) { 
    $output[] = $row; 
}

會輕鬆很多幫助，如果你提供的JSON的樣品返回給瀏覽器。可以直接從瀏覽器控制檯複製

編輯

基於提供你需要你的$.each循環改爲JSON：

$.each(data.Regulatory_Guidance_Library, function(){.......

來源

2012-03-29 19:57:56 charlietfl

我原以爲之前和嘗試，但給了沒有結果，所以我把它放回 - 我將在稍後需要標題標題。我會在我的SO中添加返回的JSON數據？ – CelticParser 2012-03-29 20:02:45

你的json無效....把它放在jsonlint.com。需要雙引號的一切。可以使用'$ output ['Some_Guidance_Library'] = $ row'，如果你需要有幾個鍵，但你需要在你的ajax解析中使用該鍵 – charlietfl 2012-03-29 20:36:29

對不起，我把輸出錯誤的複製到了我的SO中？所以我編輯了它。 php代碼保持不變，並在jsonlint.com上重新生效 – CelticParser 2012-03-29 20:46:37

來自MySQL的jQuery JSON模板

回答

相關問題