如何将记录从外部数据库填充到 phonegap 应用程序中的未排序列表

Question

我正在申请大学入学申请，学生可以在其中自行注册，注册申请后将立即打开下一页，其中包含他们附近的大学列表。我正在 phonegap 中开发此应用程序。我正在获取 JSON 格式的记录。我必须将此数据填充到未排序的动态列表中。

学生注册结构：

页面 ID 为 "Registration"。当我点击注册按钮时，记录（学生信息）被插入，我立即调用页面 ID ListOfColleges，我必须在其中显示学院列表。

<div data-role="page" id="Registration" data-theme="d" style="width: 100%;">        
    <div data-role="main" style="width: 100%;">

        <div  style="width: 76%; margin-left: 10%; margin-top: 3%;" id="studentRegister">
            <input type="text" placeholder="Name" name="userName">
            <input type="text" placeholder="Email" name="eMail">
            <input type="number" placeholder="Mobile" name="mobNumber">
            <input type="number" placeholder="Course" name="Course">
            <a href="#ListOfColleges" class="ui-btn"  id="btnReg" style="background-color: #B6B6BC; color: black;">Register</a>
        </div>
    </div>        
</div>

学院列表页面结构

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

                    </li>
                </ul>
            </div>
    </div>

JSON数据和php代码的格式

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

我正在尝试编写以下 JavaScript 来填充 "ListOfColleges" 页面。 "btnReg"是页面按钮的id 注册.

请帮我写这个脚本，欢迎修改结构的建议..

<script> 
            $(document).ready(function(){ 

               $("#btnReg").click(function(){ 
                  $.ajax({ 
                      url:"http://192.168.1.4/Experiements/webservices/api.php", 
                      type:"GET", 
                      dataType:"json", 
                      data:{type:"login", UserName:userId,Password:userPassword}, 
                      ContentType:"application/json", 
                      success: function(response){    
                           //
                              // *Logic for populate the dynamic list*
                           //   

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

Answer 1

我应该寻找教程，但这里有一个指南...

在HTML中，给ListView添加一个ID：

<ul id="listCollege" data-role="listview">

然后在 Javascript 按钮点击函数中执行以下循环：

$("#listCollege").empty;
for (i=0; i< iElements; i++)
{
  $("#listCollege").append("<li><a href=''>College 1</a></li>");
}

显然您必须使用 json 数据创建 "li" 元素...但这是文本结构。

某些 JQMobile 版本或在某些情况下，您可能需要在 "FOR LOOP" 之后添加以下内容：

$("#listCollege").listview("refresh")

但有时您不必这样做，如果您编写它，您的代码将会失败，因此请考虑尝试使用或不使用 listview("refresh") 指令。

希望对您有所帮助！

如何将记录从外部数据库填充到 phonegap 应用程序中的未排序列表

How to populate records from external database to unsorted list in phonegap application

php

ajax

jquery

json

cordova