Javascript 在html页面中使用json数组的id将json数组值显示到列表中_Javascript_Php_Html_Json_Phonegap Build

Javascript 在html页面中使用json数组的id将json数组值显示到列表中

javascript php html json

Javascript 在html页面中使用json数组的id将json数组值显示到列表中,javascript,php,html,json,phonegap-build,Javascript,Php,Html,Json,Phonegap Build,我正在开发移动应用程序。在我的控制器中，我创建了一个json数组，iam试图将数组值显示在html页面的列表中。我想在自动加载html页面时显示列表实际上，我的json数组包含'category\u id'$'category\u name'，当点击'category\u name'时，我期待着下一页 nextPage.html <!DOCTYPE html> <html> <head> <meta name="viewport" cont

我正在开发移动应用程序。在我的控制器中，我创建了一个json数组，iam试图将数组值显示在html页面的列表中。我想在自动加载html页面时显示列表

实际上，我的json数组包含'category\u id'$'category\u name'，当点击'category\u name'时，我期待着下一页

nextPage.html

 <!DOCTYPE html>
  <html>
  <head>
 <meta name="viewport" content="initial-scale=1, maximum-scale=1">

    <link rel="stylesheet" href="css/jquery.mobile-1.4.4.min.css" />
    <script src="js/jquery-1.11.1.min.js"></script>     
    <script src="js/jquery.mobile-1.4.4.min.js"></script>    
    <script src="js/nextPage.js"></script>    
   <title>Edfutura1</title>
  </head>
  <center>
 <body id="category_id">
 <div data-role="page" id="catlist"> 
 <div  id="loading" > </div>  
 <div data-role="header" data-position="fixed" data-theme="b">
 <h1>category</h1>
 </div> 
 <div data-role="main" class="ui-content">


            <ul data-role="listview" data-inset="true" id="category">
              <li></li>        
            </ul> 

        </div>

 </div>                 
 </body>
</center>
 </html>

categorylist.php

 function get_categorylist() 
 {
   $cat=$this->categorylist_model->get_cat(); 


   echo json_encode($cat);  

  }

我的json数组

 [{"category_id":"1","category_name":"Academic Analysis"},         {"category_id":"2","category_name":"Teaching Analysis"},{"category_id":"3","category_name":"Skill Analysis"}]

您需要在

$.ajax

成功函数中使用

响应

。这个

响应

对象应该是您的json对象，因此可以通过指定的属性

category\u name

和

category\u id

轻松访问

$.ajax({
    // ...
    success: function(response){
        // do something with the json response! E.g. generate a new list item and append it to the list.
        var categoryList = $('#category');
        var category;
        for(var i = 0, len = response.length; i < len; i++){
            category = response[i];
            categoryList.append($('<li>').attr('id', category.category_id).html(category.category_name));
        }
    },
});

$.ajax({
// ...
成功：功能（响应）{
//对json响应执行一些操作！例如，生成一个新的列表项并将其附加到列表中。
变量类别列表=$（“#类别”）；
var类别；
对于（变量i=0，len=response.length；i'）.attr（'id'，category.category\u id）.html（category.category\u name））；
}
},
});

我遇到一个类似这样的错误，XMLHttpRequest无法加载。请求的资源上不存在“Access Control Allow Origin”标头。因此不允许访问源“null”。这是因为您无法从客户端轻松查询其他站点/域。关键词：跨域请求和同源策略。您可以通过在服务器端使用cURL进行查询来避免这种情况。

$.ajax({
    // ...
    success: function(response){
        // do something with the json response! E.g. generate a new list item and append it to the list.
        var categoryList = $('#category');
        var category;
        for(var i = 0, len = response.length; i < len; i++){
            category = response[i];
            categoryList.append($('<li>').attr('id', category.category_id).html(category.category_name));
        }
    },
});