Question

我有一个链接到PHP页面的SQL数据库，它产生以下JSON：

[{"ID":"1","SubjectName":"Subject 1"},{"ID":"2","SubjectName":"Subject 2"}]

我想知道如何在单独的HTML页面中格式化和显示它。例如：（使用JQuery Mobile）

<ul data-role="listview" data-divider-theme="b" data-inset="true">
    <li data-role="list-divider" role="heading">Subject1</li>
    <li data-theme="c">1</li>
    <li data-role="list-divider" role="heading">Subject2</li>
    <li data-theme="c">2</li>
</ul>

$dbhandle = mysql_connect($hostname, $username, $password)
    or die("Unable to connect to MySQL at".$hostname/"<br />");

//Select Database
$selected = mysql_select_db($databasename,$dbhandle)
    OR die("Could not select Database:".$databasename."<br />");

//SQL Query
$result = mysql_query("SELECT ID, SubjectName FROM Subject");
$rows = array();

while($r = mysql_fetch_assoc($result)) {
    $rows[] = $r;
    }
print json_encode($rows);
//while ($row = mysql_fetch_array($result)) {
//  echo "ID:".$row{'ID'}." Subject:".$row{'SubjectName'}."<br />";
//  }

mysql_close($dbhandle);
?>

我正在使用PhoneGap，因此我只能使用Javascript来执行此操作。

<小时/> 我找到了一些教程，但他们使用了URL中的JSON，但这只显示在页面上。

Answer 1

选项可以使用 AJAX 或任何类似 jQuery 的实现。

您可以在 html 文件中使用jQuery AJAX对象，如下所示：

$.ajax({
  type: "POST",
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

类型是发送信息，发布或获取的方法
url 是PHP文件
数据
成功您将以下代码添加到成功通信中，在此部分中，您可以将 JSON 结果分配给html文件中的字段
数据类型您放置了wheter json或xml

如果需要，您可以使用简化的 jQuery对象，就像这段代码一样：

$.post('ajax/test.php', function(data) {
  $('#result').html(data);
});

ajax / test.php 是PHP文件
数据是您在PHP文件中生成的json
'＃result'是您的html元素的标识符（ID）
.html（数据）您正在将json分配给html元素

当您获得JSON对象作为响应时，您可以按如下方式访问元素：

data.id，data.name或data.lastName

然后你可以写这个

 function send(){
    $.post('ajax/test.php', function(data) {
      if(data.error == 'false'){
        $('#id').html(data.id);
        $('#name').html(data.name);
        $('#lastName').html(data.lastName);
      }
      else{
        alert('Error in communication due ' + data.error);
      }
    });
}

<强>更新

这可能是准备使用上述jQuery函数的HTML表单的示例。（注意 onClick 方法正在调用名为 send（）的javascript函数，

注意：我使用HTML修改了jQuery代码以匹配示例。

<form id="form">
   SomeId <input type="text" id="id" />
   Name <input type ="text" id="name" />
   Last Name <input type ="text" id="lastName" />
   <input type="submit" value="Send" onClick="send()" />
</form>

Answer 2

JSON {"ID":"1","SubjectName":"Subject 1"}

$.ajax({
    url: 'THE_URL_YOU_GET_THE_DATA_FROM',
    dataType: 'json'
    success: getInfo1
});
function getInfo1(json) {
    var r = '<ul data-role="listview">';
    var l = json.length;
    for (i = 0; i < l; i++) {
        r += '<li><h4>' + json[i].SubjectName+ '</h4><p>ID: ' + json[i].ID. + '</li>';
        }
        document.getElementById('someDiv').innerHTML = r + '</ul>';
    }

然后，这将从php页面中提取数据，并将内容插入分配为someDiv的Div元素

从PHP获取JSON并以HTML格式显示

2 个答案: