javascript - 从 PHP 获取 JSON 并以 HTML 显示

Question

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

[{"ID":"1","SubjectName":"主题 1"},{"ID":"2","SubjectName":"主题 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
});

1. type 是发送信息、发布或获取信息的方法
2. url是PHP文件
3. data 用于传递任何变量作为参数
4. success 你把下面的代码放到一个成功的通信中，在这个部分你可以将JSON结果分配给html文件中的字段
5. datatype 你放的是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>