建立从JSON

Question

的JavaScript VAR（阵列）在一个页面（API页）我有一个PHP数组是这样的：

$arr = array("headline1" => 
     array("name" => "Headline 1", 
       "description" => "Description of headline 1", 
       "items" => array(
         array("name"=>"John", "lastname"=>"Doe"), 
         array("name"=>"Peter", "lastname"=>"Pan") 
         ) 
       ), 
     "headline2" => array("name" => "Headline 2", 
       "description" => "Description of headline 2", 
       "items" => array(
         array("name"=>"Alexander", "lastname"=>"Doe"), 
         array("name"=>"Steven", "lastname"=>"Smith") 
         ) 
       ), 
     "headline3" => array("name" => "Headline 3", 
       "description" => "Description of headline 3", 
       "items" => array(
         array("name"=>"John", "lastname"=>"Doeh"), 
         array("name"=>"Peter", "lastname"=>"Pans") 
         ) 
       ) 
     ); 

而从这个数组中的脚本创建JSON编码版本：

echo json_encode($arr); 

所以，我的问题是在其他页面上的JavaScript。我想使用jQuery $ .getJSON函数来获取这个数据，并VAR是这样的：

var categoryData = { 
headline1: { 
    name: "Headline 1", 
    description: "Description of headline 1", 
    items: [ 
     { 
      name: "John", 
      lastname: "Doe" 
     }, 
     { 
      name: "Peter", 
      horoscope: "Pan" 
     } 
    ] 
}, 

headline2: { 
    name: "Headline 2", 
    description: "Description of headline 2", 
    items: [ 
     { 
      name: "Alexander", 
      lastname: "Doe" 
     }, 
     { 
      name: "Steven", 
      horoscope: "Smith" 
     } 
    ] 
}, 



headline3: { 
    name: "Headline 3", 
    description: "Description of headline 3", 
    items: [ 
     { 
      name: "John", 
      lastname: "Doeh" 
     }, 
     { 
      name: "Peter", 
      horoscope: "Pans" 
     } 
    ] 
} 
}; 

我如何用jQuery $ .getJSON函数实现这一目标？

编辑：

我的其他JavaScript函数（jQuery Mobile的功能）

function showCategory(urlObj, options) 
{ 

var categoryData = []; 
$.getJSON('http://localhost/tst/sig.php', function(json) { 
    categoryData = json; 
}); 

var categoryName = urlObj.hash.replace(/.*category=/, ""), 

    // Get the object that represents the category we 
    // are interested in. Note, that at this point we could 
    // instead fire off an ajax request to fetch the data, but 
    // for the purposes of this sample, it's already in memory. 
    category = categoryData[ categoryName ], 

    // The pages we use to display our content are already in 
    // the DOM. The id of the page we are going to write our 
    // content into is specified in the hash before the '?'. 
    pageSelector = urlObj.hash.replace(/\?.*$/, ""); 

if (category) { 
    // Get the page we are going to dump our content into. 
    var $page = $(pageSelector), 

     // Get the header for the page. 
     $header = $page.children(":jqmData(role=header)"), 

     // Get the content area element for the page. 
     $content = $page.children(":jqmData(role=content)"), 

     // The markup we are going to inject into the content 
     // area of the page. 
     markup = "<p>" + category.description + "</p>", 

     // The array of items for this category. 
     cItems = category.items, 

     // The number of items in the category. 
     numItems = cItems.length; 

    // Generate a list item for each item in the category 
    // and add it to our markup. 
    for (var i = 0; i < numItems; i++) { 
     markup += "<div data-role='collapsible' data-theme='a' data-content-theme='e'><h3>" + cItems[i].name + "</h3><p>"+ cItems[i].horoscope +"</p></div>"; 
    } 
    markup += "</ul><p><a href='#one' data-rel='back' data-role='button' data-inline='true' data-icon='back'>Vratite se nazad</a></p> "; 

    // Find the h1 element in our header and inject the name of 
    // the category into it. 
    $header.find("h1").html(category.name); 

    // Inject the category items markup into the content element. 
    $content.html(markup); 

    // Pages are lazily enhanced. We call page() on the page 
    // element to make sure it is always enhanced before we 
    // attempt to enhance the listview markup we just injected. 
    // Subsequent calls to page() are ignored since a page/widget 
    // can only be enhanced once. 
    $page.page(); 

    // Enhance the listview we just injected. 
    $content.find(":jqmData(role=collapsible)").collapsible(); 
    $content.find(":jqmData(role=button)").button(); 

    // We don't want the data-url of the page we just modified 
    // to be the url that shows up in the browser's location field, 
    // so set the dataUrl option to the URL for the category 
    // we just loaded. 
    options.dataUrl = urlObj.href; 

    // Now call changePage() and tell it to switch to 
    // the page we just modified. 
    $.mobile.changePage($page, options); 
     } 
    } 

Answer 1

jQuery.getJSON是异步的，需要一个回调函数，你不能直接将结果赋给变量。要使用它，您需要在“对象字面量”之前使您的PHP脚本的输出为单一的JSON string - 不是“var catData =”，并且在后面没有分号。另外不要忘记用appropriate MIME type来提供JSON。