使用JSON数据和Javascript在HTML中创建可点击列表

时间:2018-09-16 21:26:10

标签: javascript html json

我正在使用Jquery mobile,我想在面板中创建一个可单击的视图列表。看起来像这样...

   <li><a href='#' onclick='getmoviepic_mobile(this) ;' > MovieTitle"</a> 
   </li>

MovieTitle是使用json_encode($ x)从我的MYSQL数据库数组中获得的,因此,当用户单击标题时,将触发功能getmoviepic_mobile(this)。

我的问题是如何用json数据设置我的javascript以填充我的html 页面。

我的HTML

<div data-role="panel"  id="Panelcategory" > 

      <ul data-role="listview" data-inset="true" id="MovieTitle">
          <li></li>        
      </ul> 


 </div >

PHP getcatagories2_mobile.php

<?php
include("includes/connection.php");

$q=$_POST['input'];

$resultActor = mysqli_query($con,"SELECT id,title, 
 plot,catagory,release_date,rated FROM ".TBL_DATA." WHERE catagory LIKE 
'%".$q."%' ORDER BY title  ");  




    while($rowMovie = mysqli_fetch_array($resultActor)) {



    $x[]=$rowMovie['title'];

    }

        $jsonarray=json_encode($x);
        echo $jsonarray;
?>

JavaScript

     function getcatagories(catagory){

        var catagoryValue = $(catagory).text();

       $.getJSON( "getcatagories2_mobile.php", {input:catagoryValue}, 

                function(json) {   this is the part I am stuck on

                               }

不确定即使我的HTML设置正确,也可能不需要“ li”。

谢谢大家

1 个答案:

答案 0 :(得分:0)

我将遍历JSON并通过键添加属性。例如,您可以查询列表并添加每个值。

$("#MovieTitle").append("<li>" + json["category"] + "</li>")

然后对要包含的每个键值对进行操作。