javascript - 如何将 JSON 数据动态添加到 PhoneGap 应用程序中的 JQuery Mobile ListView ？

Question

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

}

.
.
.

.