jQuery JSON MySQLからのテンプレート

MySQLデータベースからデータを取得してJSON形式で出力するPHPサーバー側ファイルを呼び出すjQuery関数を作成しました。 JSONデータは、この関数では、HTML文書のリスト項目としてDIVに動的に挿入されるようにtemplate'dされています。jQuery JSON MySQLからのテンプレート

JSONデータが有効です - ツールで検証しました。ブラウザでPHPスクリプトを実行すると正しく表示されます（ChromeでJSONViewを使用）。しかし、私はデータをHTML文書に表示することはできません。

私はもともとPHPファイルでHTMLとしてデータを送信していましたが、これは正しく機能しましたが、別の問題（plz see this SO question）があったため、代わりにJSONを使用してテンプレートを使用しました。

私はデータベース行から追加しようとしています：透視HTMLタグにラベル、タイトル、discription、& gotoURL：

<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

あなたはパースあなたのAjaxの成功に配列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のサンプルを提供した場合、ブラウザに返す支援するために多くの方が簡単だろう。 JSONに基づいてEDIT

右ブラウザのコンソールからそれをコピーすることができますあなたがあなたの$.eachループを変更する必要があります提供：私はそれを前にしてみました思っていたが、それが無い与えた

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

出典

2012-03-29 19:57:56 charlietfl

結果を返すので、後でヘッダーのタイトルに必要になります。 JSONデータを私のSOに追加しますか？ – CelticParser

あなたのjsonは無効です.... jsonlint.comに入れてください。すべてに二重引用符が必要です。いくつかのキーを持つ必要があるが、あなたのAjax解析でそのキーを使う必要がある場合は、 '$ Output ['Some_Guidance_Library'] = $ row'を使用することもできます – charlietfl

申し訳ありません、私はそれを編集しました。 PHPコードは変更されておらず、jsonlint.comで有効になります – CelticParser

jQuery JSON MySQLからのテンプレート

答えて

関連する問題