如何将动态JSON数据添加到PhoneGap应用程序中的JQuery Mobile List视图中？

Question

我在K.M.的指定距离内获得拼贴的JSON数据列表。现在我必须将此拼贴列表添加到JQuery Mobile列表视图。在注册页面中，学生信息将填写。然后在按下Register按钮后，javascript将执行，在Java脚本中我们将距离作为参数传递，在服务器上将获取位于给定距离内的拼贴列表。我故意没有提到经度和纬度简化原因。字母我们将传递两个参数当前经度和纬度而不是距离。现在提取的数据将在json formate中我必须将此信息添加到 ul view 下的 CollageOptions 页面。 请告诉我我应该在里面写些什么 成功：javascript中的功能（响应）。  数据库的结构是

<div data-role="page" id="register" data-theme="d" style="width: 100%;">           
    Name :<input type="text" placeholder="Name" name="userName">
    Email: <input type="text" placeholder="Email" name="eMail">
    Mobile: <input type="number" placeholder="Mobile" name="mobNumber">
    Distance: <input type="text" id="distance_id" name="distance" />
    <a href="#CollageOptions" class="ui-btn" style="background-color: #B6B6BC; color: black;"                         
       id="btnReg">Register</a>
</div>

<div data-role="page" id="CollageOptions">
<div style="width: 100%; margin-top:21%; margin-left: 1%; color: black; id="details" data-  
 role="listview">

   <ul id="listOfCollage" data-role="listview">
        Here I have to list list of collage available with in given distance
   </ul>
</div>

现在假设距离是35 k.m.然后拼贴列表将获取

<?php
header('Access-Control-Allow-Origin: *');//Should work in Cross Domaim ajax Calling request
mysql_connect("localhost","root","1234");
mysql_select_db("foodybuddy");
if(isset($_GET['type']))
{
    if($_GET['type']=="login"){
        $distanceInKM=$_GET['Distance'];       
        $query="Select * from collage where Distance<='$distanceInKM'";
        $result=mysql_query($query);
        $totalRows=mysql_num_rows($result); 
        if($totalRows>0){
            $recipes=array();
            while($recipe=mysql_fetch_array($result, MYSQL_ASSOC)){
                $recipes[]=array('Chef'=>$recipe);
            }
            $output=json_encode(($recipes));
            echo $output;
        }
    }
}
else{
    echo "Invalid format";
}

<script> 
            $(document).ready(function(){  
               $("#btnReg").click(function(){  
                  var distance = document.getElementById('distance_id').value;                
                  $.ajax({ 
                              url:"http://192.168.1.4/Experiements/webservices/getBuddy.php", 
                              type:"GET", 
                              dataType:"json", 
                              data:{type:"login", Distance:distance}, 
                              ContentType:"application/json", 
                              success: function(response){



                              }, 
                              error: function(err){ 
                                  alert(JSON.stringify(err)); 
                              } 
                  }) //ajax
               });  //click
            }); //ready
    </script> 

Answer 1

您可以使用每个循环来读取Json数据并准备列表项

var output = ""; // declare an empty variable inside click function

$("#listOfFoodOptions").empty(); // empty the list

.
.
.

success: function(response){ 

$.each(response, function(index,value){ // loop through the data

output += "<li>"+value.Chef.Name+"</li>"; 

}); 

$("#listOfFoodOptions").append(output).listview().listview('refresh'); // refresh the list

}

.
.
.