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

时间:2017-02-19 11:16:21

标签: javascript php ajax variables

我在PHP中有一个页面:

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

它可以很好地显示我的主页上由php生成的表的最后6个mysql条目(作为简要)和20个或最后一个条目,如果用户直接访问table.php。 现在我正在实现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);
?>

非常感谢

2 个答案:

答案 0 :(得分:0)

实现ajax意味着你将使用那些你要发送的参数发出请求,而不是监听响应(将返回表 - 最后6个条目),而不是使用该响应创建一些 - 最好渲染它。 / p>

这样,您可以在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

答案 1 :(得分:0)

当调用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.希望它将解决您的问题。