我应该如何将我的json代码包含在我的php文件和html文件中

时间:2015-12-03 06:14:18

标签: php html mysql json

目前这些是我的代码。我的php页面:

<html>

<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.15.0/plottable.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.1/basic/jquery.qtip.css" rel="stylesheet" />


</head>

<body>


  My Plot

  <!-- Show histograms -->
  <div id="sample-pies"></div>
  
  Legend here:
  <div id="pies-legend"></div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.15.0/plottable.js"></script>





</body>

</html>

我的HTML代码:

$con = mysqli_connect($host, $username, $password, $db_name);
if (!$con) {
    die('Could not connect: ' . mysqli_error($con));
}

mysqli_select_db($con,"ajax_demo");

$sql = "SELECT problem.id, problem.DateTimeCreated, status.status_desc, users.username FROM problem
                JOIN issue ON problem.issue_id = issue.id
                JOIN status ON problem.status = status.id
                JOIN users ON problem.reported_account_id = users.id
                where issue_id = '3'";

$result = mysqli_query($con,$sql);

echo '<table width="200" border="0" cellpadding="0" cellspacing="0">';
echo "<table>
      <tr>
      <th>Unique ID</th>
      <th>Date</th>
      <th>Status</th>
      <th>Reported by</th>
      </tr>";

while($row = mysqli_fetch_array($result)) {
    echo "<tr>";
    echo "<td>" . $row['id'] . "</td>";
    echo "<td>" . $row['DateTimeCreated'] . "</td>";
    echo "<td>" . $row['status_desc'] . "</td>";
    echo "<td>" . $row['username'] . "</td>";

    echo "</tr>";
}
echo "</table>";

mysqli_close($con);

我无法在我的html代码上显示从数据库中获取的php表。如果我直接输入我的php页面的url,它将显示该表,但是当我将我的代码插入我的andriod设备时,表格不会显示。

1 个答案:

答案 0 :(得分:0)

你必须定义一个div或者在点击时显示服务器响应的地方。我稍微修改了你的JavaScript和HTML,以便正确地呈现AJAX响应。

以下是修改后的html

<script>
function display(){
    var xmlhttp = new XMLHttpRequest();
    var url = serverURL() + "/gwifiv2.php";

    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
           document.getElementById("test").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET", url, true);
    xmlhttp.send();
}
</script>
</head>

<body>
<div data-role="page" data-theme="a">
    <div data-role="header" data-position="inline">
        <a href="index.html" data-icon="home" data-theme="a"><br></a>
        <h1>Issues</h1>
        <a href="domain.html" data-icon="arrow-l" data-theme="a"><br></a>
    </div>
    <div data-role="content" data-theme="a">
        <div data-role="main" class="ui-content">
            <table data-role="table" data-mode="columntoggle" class="ui-responsive ui-shadow" id="myTable">
                <thead>
                    <form>
                       <input type="button" value="Display" onclick="display()">
                       <div id="test"></div>
                    </form>
                    <tr>
                        <th>Unique ID</th>
                        <th data-priority="1">Date</th>
                        <th data-priority="2">Status</th>
                        <th data-priority="3">Ticket</th>
                    </tr>
                </thead>