使用javascript和json从数据库显示html5中的数据

时间:2012-09-13 06:20:15

标签: javascript json html5

我试图在mysql数据库的html中显示一个列表。要从mysql获取数据,我正在使用json和javascript。但它没有显示任何内容!

我的html页面是

<!DOCTYPE html>
<html class="ui-mobile-rendering">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css"/>
</head>
<body>
<div id="tenant" data-role="page">

    <div data-role="header">
        <a href="index.html" data-icon="back" class="back ui-btn-left">Back</a>
        <h1>My Lease</h1>
    </div>

    <div data-role="content">

        <ul id="actionList" data-role="listview"  data-inset="true">
        </ul>
    </div>  
    </div>
<script src="js/tenantlease.js"></script>
<script src="lib/jquery-1.7.1.min.js"></script>
<script src="js/jqm-config.js"></script>
<script src="lib/jquery.mobile-1.0.1.min.js"></script>
<script src="lib/underscore-min.js"></script>
<script src="lib/backbone-min.js"></script>
<script src="js/main.js"></script>
</body>
</html>

我的php文件是。当我从带有id的浏览器调用时工作正常。

<?php
session_start();
include 'connection.php';
$email=$_SESSION["PM"];

$sql = "select * from phpap105_tenantinfo where TenantEmailAddress=:id";
try {
$dbh = new PDO("mysql:host=$dbhost;dbname=$dbname", $dbuser, $dbpass);  
$dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$stmt = $dbh->prepare($sql);  
$stmt->bindParam("id", $_GET[id]);
$stmt->execute();
$employee = $stmt->fetchObject();  
$dbh = null;
echo '{"item":'. json_encode($employee) .'}'; 
} catch(PDOException $e) {
echo '{"error":{"text":'. $e->getMessage() .'}}'; 
}
?>

我的javascript文件是

    $('#tenant').live('pageshow', function(event) {
//var id = getUrlVars()["id"];
var id = 'mukul_kuet@yahoo.com';
$.getJSON('tenantlease.php?id='+id, displayEmployee);
    });

   function displayEmployee(data) {
var employee = data.item;
//console.log(employee);


if (employee.TenantFirstName) {
    $('#actionList').append('<li><h3>First Name</h3>' +
            '<p>' + employee.TenantFirstName + '</p></a></li>');
}
if (employee.TenantLeaseSigned) {
    $('#actionList').append('<li><h3>Lease Sign</h3>' +
            '<p>' + employee.TenantLeaseSigned + '</p></a></li>');
}
    $('#actionList').listview('refresh');
   }

请帮助我如何在html页面中获取数据。请提前获取任何帮助。

1 个答案:

答案 0 :(得分:0)

好问题。您需要做的是Step-Debug JavaScript,您将看到问题。

如果这是你熟悉或完全不熟悉的东西......我强烈推荐给你,它将开辟一个新的发展动力世界。

例如......

  
      
  1. 在Chrome中打开
  2.   
  3. 右键单击并选择 - &gt;检查元素。
  4.   
  5. 在“脚本”选项卡下,打开您的JavaScript文件。
  6.   
  7. 在左边距上,您可以点击“条形”区域来设置断点,该断点将显示为圆点。
  8.   
  9. 在所有功能中设置断点....
  10.   
  11. 点击刷新。 JavaScript的执行将在您的第一个有效断点处停止。
  12.   
  13. 此时,您可以检查变量,看看它们是否是您认为的值。
  14.   

如果您没有看到断点,那是因为您的“pageshow”事件无效。

Here is info on that.

Here is another example.

我的猜测是你会发现1)页面节目没有被调用,2)对你的php的调用意外地出错,或者你的回调没有被回调。

断点将可视化所有这些。

另外,检查你的回调函数它可能为null,如果它缺少一个大括号(它在你的帖子中)并且失败了。如果发生这种情况,Chrome Dev Tools的控制台中将显示红色错误消息。

这是一个功能强大的工作流程 希望有所帮助。