Question

我想使用JS / JQuery / PHP / MySQLi自动生成一个HTML表来填充页面上的div，该页面还包含一个允许用户输入搜索条件的div。例如：输入一系列日期，单击按钮将$ .post这些日期发送到查询MySQLi表的PHP文件，并向JS返回一个多维数组，然后在构建HTML时解析该数组。

因此，从用户的角度来看，他输入了开始日期和停止日期，并且在同一页面的其他位置，他看到了在这两个日期之间进行的所有预订的列表。

出于代码管理的目的，我希望将我的JS脚本保存为HTML页面标题中引用的单独文件，并将我的PHP脚本作为从JS脚本引用的单独文件。

我的JS脚本看起来像这样：

$(document).ready(function(){
    var startDate = new Date (2017,11,25);
    var stopDate = new Date (2017,11,31);
    displayBookings = function(startDate, stopDate) {
        $.post("php/getBookings.php", {
        startDate: startDate, 
        stopDate: stopDate
        },
        function(data){
            html = "<table>";   
            var i, j, result = JSON.parse(data); 
            while (i=0, i <= result.length, i++) {
               while (j=0, j <= result[i].length, j++) {          
                    html+= "<tr><td>"+result[i][j]+"</td></tr>";
                }
            }
            html += "</table>";
            $('#bookings').html(html);
        });
    };
});

我的php脚本（＆＃39; getBookings.php＆＃39;）看起来像这样：

<?php
$startDate = date('Y-m-d',strtotime($_POST["startDate"]));
$stopDate = date('Y-m-d',strtotime($_POST["stopDate"]));
$con = mysqli_connect("localhost","userid","password","database");
$sql = "SELECT * FROM bookings WHERE date BETWEEN '$startDate' AND '$stopDate'";
$result = mysqli_query($con,$sql);
$rows = mysqli_num_rows($result);
for ($i = 0; $i < $rows; $i++) {
    $row = mysqli_fetch_array($result);
    $newArray[$i]['reference'] = $row['reference'];
    $newArray[$i]['name'] = $row['name'];
    $newArray[$i]['price'] = $row['price'];
}
mysqli_free_result($result);
mysqli_close($con);
echo json_encode($newArray);
?>

我的HTML代码包括：

<button onClick='displayBookings()'>Press</button>
<div id="bookings"></div>

但是当我按下按钮时，我得到了：

Uncaught TypeError: Cannot read property 'length' of null

我是初学者，所以我知道我可能犯了一些基本错误。有人可以帮忙吗？

Answer 1

您的问题很可能是while (i=0, i <= result.length：while (i=0, i < result.length，j也是如此。

最好使用map或reduce：

$(document).ready(function () {
  var startDate = new Date(2017, 11, 25);
  var stopDate = new Date(2017, 11, 31);
  displayBookings = function (startDate, stopDate) {
    $.post("php/getBookings.php", {
      startDate: startDate,
      stopDate: stopDate
    },
      function (data) {
        console.log(JSON.stringify(data,undefined,2));
        html = "<table>" +
          data.map(
            row=>{
              row.map(
                item=>`<tr><td>${item}</td></tr>`
              ).join("");
            }
          ).join("") + "</table>";
        $('#bookings').html(html);
      });
  };
});

如果您的PHP返回一个属性为JSON的对象，那么您可以尝试以下方法：

$(document).ready(function () {
  var startDate = new Date(2017, 11, 25);
  var stopDate = new Date(2017, 11, 31);
  displayBookings = function (startDate, stopDate) {
    $.post("php/getBookings.php", {
      startDate: startDate,
      stopDate: stopDate
    },
      function (data) {
        console.log(JSON.stringify(data,undefined,2));
        html = "<table>" +
          Object.keys(data).map(
            key=>{
              Object.keys(data[key]).map(
                rowKey=>`<tr><td>${data[key][rowKey]}</td></tr>`
              ).join("");
            }
          ).join("") + "</table>";
        $('#bookings').html(html);
      });
  };
});

对象的问题在于没有关于订单的说明，例如：

Object.keys({
  first: 1,
  second:2
});

通常会产生["first","second"]，但不能保证它会。{/ p>

所以最好使用第一个代码块，但改变你的PHP：

$newArray = array()
for ($i = 0; $i < $rows; $i++) {
  $row = mysqli_fetch_array($result);
  $newArray[$i] = array(
    $row['reference'],
    $row['name'],
    $row['price']
  );
}

我认为您的原始data.map is not a function不是由于php没有正确转换数组引起的，因此使用该PHP可以像第一个代码块一样使用JavaScript（data.map和row.map）

使用JS显示多个SQL记录以解析多维数组

1 个答案: