单击按钮时使用 ajax 更改 SQL 查询时出现问题

Question

更新@RoyalBG

按钮：

<button id="btn1" class="btn btn-default myButton" type="button" value="1">Auto</button>
<button id="btn2" class="btn btn-default myButton" type="button" value="2">Easy</button>

阿贾克斯：

$(function(){
    $(document).on("click",".myButton",function() {
    var value = $(this).val();
        $.ajax( {
            type: 'get',
            url: "auto.php",
            data: {
                auto_value : value
            }
            success: function (response) {
                $("#auto_content").html(response);
            }
        });
    });
});

auto.php:

<?php

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

$auto_value = '1';
if (isset($_GET['auto_value'])) {
    if ($_GET['auto_value'] == 1) {
        $auto_value = 't.style = 0 and t.type = 0';
    } else if ($_GET['auto_value'] == 2) {
        $auto_value = 't.style = 1 and t.type = 0';
    }
}

$sql = "SELECT m.MapName, SEC_TO_TIME(TRUNCATE(t.Time,3)) AS Time, p.User FROM times t INNER JOIN maps m ON t.MapID = m.MapID INNER JOIN players p ON p.PlayerID = t.PlayerID INNER JOIN (SELECT t.MapId, MIN(t.time) as time FROM times t WHERE ".$auto_value." GROUP BY t.MapId ) tmin ON tmin.MapId = t.MapId and tmin.time = t.time";
$result = $conn->query($sql);


if ($result->num_rows > 0) {
      echo "<table class='table table-striped table-fixedheader sortable'><thead><tr><th data-defaultsort='asc'>Map</th><th>Time</th><th>Player</th></tr></thead><tbody style='height:300px' class='searchable'>";
// output data of each row
      while($row = $result->fetch_assoc()) {
      echo "<tr><td>".$row["MapName"]."</td><td>".$row["Time"]."</td><td>".$row["User"]."</td></tr>";
 }
      echo "</tbody></table>";
 } else {
      echo "0 results";
 }
 $conn->close();

?>

并且包括：

 <div id="auto_content">
 <?php include 'auto.php'; ?>
 </div>

单击按钮后，table 不会改变。我不确定我是否做错了什么。还有，会不会是include之后加载了脚本？

Answer 1

if(isset($_GET['auto_value'])) {

   //Your code goes here

}else {

 echo "Auto Value not received!";

}

Answer 2

您的代码极易受到 SQL 注入攻击。

您正在将 BUTTON VALUE 直接传递给 SQL 语句，并明确更改 SQL 语句，例如向 WHERE 子句添加内容。

如果我将按钮的值更改为某些 1 OR 1 UNION ... 或任何其他 SQL 代码传递会破坏您的默认行为，会发生什么情况。

我强烈建议你改变你的方法。例如使用枚举。自动按钮将发送 auto_value=1 然后在您的代码中您需要测试 auto_value 并执行 SQL 附加的不同父项。

例如：

$auto_value = '1';
if (isset($_GET['auto_value'])) {
    if ($_GET['auto_value'] == 1) {
        $auto_value = 't.style = 0 and t.type = 0';
    }
}

$sql = "SELECT m.MapName, SEC_TO_TIME(TRUNCATE(t.Time,3)) AS Time, p.User FROM times t INNER JOIN maps m ON t.MapID = m.MapID INNER JOIN players p ON p.PlayerID = t.PlayerID INNER JOIN (SELECT t.MapId, MIN(t.time) as time FROM times t WHERE ".$auto_value." GROUP BY t.MapId ) tmin ON tmin.MapId = t.MapId and tmin.time = t.time";

如果 auto_value 不是通过请求发送，您也可以通过这种方式设置默认行为。默认行为是 WHERE 1 就像没有任何 where 子句一样，所以它会列出所有内容。

请记住，您的 success 回调中没有任何内容，因此在表示层中，单击时不会发生任何事情。 auto.php 将被调用，SQL 被执行，HTML 在服务器端呈现，但它的响应永远不会被捕获并呈现给最终用户。

您可能在页面加载时包含 auto.php，但这就是 HTTP 协议的工作方式 - 一旦交付，它就是静态的。您的异步请求不会改变包含的 auto.php 内容。您需要使用 DOM 才能更改页面视图。例如，在您的 success 承诺中，您可能希望使用 auto.php 显示的内容填充 HTML 元素。

让我用一个简单的例子来解释。

您在页面 x.php。

它包含以下代码：

index.php:

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>

<div id="auto_content">
    <?php include 'auto.php'; ?>
</div>
<button id="btn1" class="myButton" type="button" value="1">Button one</button>
<button id="btn2" class="myButton" type="button" value="2">Button two</button>
<script>
    $(function(){
        $(document).on("click",".myButton",function() {
            var value = $(this).val();
            $.ajax( {
                type: 'get',
                url: "auto.php",
                data: {
                    auto_value : value
                },
                success: function (response) {

                }
            });
        });
    });

auto.php:

<?php
$text = "default text";
if (isset($_GET)) {
    if ($_GET['auto_value'] == 1) {
        $text = "button 1 clicked";
    } else if ($_GET['auto_value'] == 2) {
        $text = "second button clicked";
    }
}
?>

<h1><?= $text; ?></h1>

此页面在加载时在 <h1> 个标签中打印 default text。

当您单击 Button one 或 Button two 时，将向 auto.php 发送请求，并收到 <h1>button 2 clicked</h1> 或 <h1>second button clicked</h1> 的响应.它将通过 HTTP 发送，并且不会更改任何内容。 index.php 中包含的实际 auto.php 不会更改。

如果您想在不重新加载页面的情况下更改演示文稿，您需要使用javascript 来控制UI。您可能会发现我在 ID 为 auto_content 的 div 中包含了 auto.php。您需要做的是，在 div 中加载来自 auto.php 的响应，因此它的内容会随着第一个按钮的点击或第二个按钮的点击而改变。

在您的成功回调中，您将在变量 response.

中收到纯文本形式的整个响应

在这个简单的示例中，您只需将它作为 HTML 加载到 div auto_content.

所以你需要这个：

success: function (response) {
    $("#auto_content").html(response);
}

单击按钮时使用 ajax 更改 SQL 查询时出现问题

Problems changing SQL query with ajax on button click

php

mysql

ajax