モバイルアプリに取り組んでいるiam。私のコントローラーで、json配列とiamを作成し、配列の値をhtmlページのリストに表示しようとしました。HTMLページが自動的にロードされたときにリストを表示したい。
実際、私のjson配列には「category_id」 $ 「category_name」が含まれており、「category_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>
nextPage.js
var base_url="http://dev.edfutura.com/nithin/jps/edfuturaMob/";
$(document).on("pageinit","#catlist", function() {
var submitUrl = base_url+"categorylist/get_categorylist";
$("#loading").css("display", "block");
$.ajax({
url: submitUrl,
dataType: 'json',
type: 'POST',
success: function(response)
{
//do something pls
},
error: function()
{
alert("error");
}
});
});
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"}]
成功関数responseでを使用する必要があり$.ajaxます。このresponseオブジェクトはjsonオブジェクトである必要があるため、指定されたプロパティcategory_nameとを介して簡単にアクセスできますcategory_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));
}
},
});
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加