Question

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

学生注册结构：

页面ID是＆＃34;注册＆＃34;。当我单击“注册”按钮时，会插入记录（学生信息），并立即调用页面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来填充＆＃34; ListOfColleges＆＃34;页。＆＃34; btnReg＆＃34;是页面注册上按钮的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（“刷新”）指令。

希望它有所帮助！

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

1 个答案: