将表大小变量从js传递到php

Question

我在PHP中有一个页面，其中：

$sizelimit = "6"; 
include ('table.php');

它可以很好地在我的主页上显示php生成的表的最后6个mysql条目（作为简要介绍），如果用户直接访问table.php，则可以显示20个或最后一个条目。 现在，我正在实现ajax，以便在每次有新条目时都加载该表，但是如何将变量$sizelimit从ajax传递到php，因此在我的主页上，此table.php只有6个条目，但是如果table.php是单独访问的，它具有最后20个条目？ 我的代码现在是：

 $sizelimit = "6"; 
// include ('table3.php'); 
echo'    <div id="results">Loading data ...</div>';

table.php是：

<?php   
require_once '../db/dbconfig.php';
// Create connection.
if ($sizelimit <> "" and $sizelimit > 0) {
$limit = $sizelimit;
} else {
$limit = "20";
}

$conn = mysqli_connect($servername, $username, $password, $dbname);
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}
// Get the most recent 25 entries.
$result = mysqli_query($conn, "SELECT Time, T1, T2, Height FROM temp ORDER BY Time DESC, Time DESC  LIMIT ".$limit);
?>
<table class="table striped  bordered hoverable white">
    <tr><th>Time</th><th>Water Temp</th><th>Air Temp</th><th>Tank level</th></tr>
<?php
while($row = mysqli_fetch_assoc($result)) {
    echo "<tr><td>";
    echo $row["Time"];
    echo "</td><td>";
    echo $row["T1"];
    echo "&deg;C</td><td>";
    echo $row["T2"];
    echo "&deg;C</td><td>";
    echo $row["Height"];
    echo "mm</td></tr>";
}
echo "</tr></table>";

// Close connection.
mysqli_close($conn);
?>

非常感谢

Answer 1

实现ajax，意味着您将使用您要发送的参数进行请求，而不是侦听响应（它将返回表-最后6个条目），而不是通过该响应进行操作-最好呈现它。

这样，您可以在ajax请求上发送$ size参数，并保持相同的逻辑。

最佳实践是检测ajax请求，将表数据编码为JSON，然后根据客户端大小进行呈现。 为此，您可以简单地将ajax请求设为POST，然后在服务器端以不同的响应对待GET和POST。

AJAX示例-这是客户端逻辑的示例，使用普通JavaScript而不需要其他框架：

var getMyTable = function(url, data) {
    var xmlhttp;
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4) {
        if (xmlhttp.status == 200) {
            data = JSON.parse(xmlhttp.responseText);
            console.log('Post ajax call was a success')
            // SUCCESS - get ready to render the response.
            // call function responsible for data render
            // - in your case you can render all html response directly:
            displayTable(xmlhttp.responseText);
        } else if (xmlhttp.status == 400) {
            console.log('There was an error 400 for POST')
        } else {
            console.log('something else other than 200 was returned for POST! The status is ' + xmlhttp.status)
        }
        }
    }

    xmlhttp.open("POST", url, true);
    //...
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.send(data);
};

function displayTable(htmlData) {
    // get the table element and update the data to display
    document.getElementById("#table-response").innerHTML = htmlData;
}

//This is a direct call - you can place it somewhere else.
getMyTable("/table.php", "limit=8");

在服务器端，检测您是否已在POST上接收到数据，然后更新逻辑...

$ajaxRequest = false;
if(isset($_POST["limit"])){
    $ajaxRequest = true;
    $sizelimit = $_POST["limit"];
}

if ($ajaxRequest) {
    // ... can do additional operations if needed.
}

// continue with your connection and $sizelimit check

Answer 2

调用ajax时，请像这样使用它：

.ajax({
    url: 'table.php',
    type: 'POST',
    data: { limit: "5"} ,
    contentType: 'application/json; charset=utf-8',
    success: function (response) {
        //success
    },
    error: function () {
        //error
    }
}); 

并在您的php文件中：

require_once '../db/dbconfig.php';
// Create connection.
if(isset($_POST["limit"])){
   $sizelimit = $_POST["limit"];
}
if ($sizelimit <> "" and $sizelimit > 0) {
$limit = $sizelimit;
} else {
$limit = "20";
}

如果您使用javascript发送20，您将获得20，如果您使用javascript发送6，您将获得6。希望它能解决您的问题。