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

Question

我正在以 K.M. 的给定距离获取拼贴的 JSON 数据列表。现在我必须将此拼贴列表添加到 JQuery Mobile 列表视图。在注册页面学生信息将填写。然后在按下注册按钮后，javascript 将执行，在 Java 脚本中，我们将距离作为参数传递，在服务器上将获取位于给定距离内的拼贴列表。我故意没有提到经度和纬度简化原因。 Letter 我们将传递两个参数当前的经度和纬度而不是距离。现在获取的数据将以 json 格式生成，我必须将此信息添加到 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 公里。然后将获取拼贴列表

<?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

您可以使用 each 循环来读取 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

}

.
.
.

.