1

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

[{"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，但这仅显示在页面上。

4

2 回答 2

2

一个选项可以是使用AJAX或任何实现，如jQuery。

您可以像这样在html文件中使用 jQuery AJAX 对象：

$.ajax({
  type: "POST",
  url: url,
  data: data,
  success: success,
  dataType: dataType
});
  1. type是发送信息、发布或获取的方法
  2. url是 PHP 文件
  3. 如果您想将任何变量作为参数传递，则使用数据
  4. 成功您将以下代码用于成功通信，在本节中您可以将JSON结果分配给 html 文件中的字段
  5. 您输入的数据类型是 json 还是 xml

如果你愿意，你可以使用一个简化的jQuery 对象，就像下面的代码：

$.post('ajax/test.php', function(data) {
  $('#result').html(data);
});
  1. ajax/test.php是 PHP 文件
  2. data是您在 PHP 文件中生成的 json
  3. '#result'是您的 html 元素的标识符 (ID)
  4. .html(data) 您正在将 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>
于 2013-08-15T14:11:49.287 回答
0

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 页面中提取数据并将内容插入到分配为的 Div 元素中someDiv

于 2013-09-18T07:38:30.063 回答