使用HTML表单值AJAX/PHP MySqli查询

Using HTML forms values for AJAX/PHP MySqli query

本文关键字：PHP MySqli 查询 AJAX HTML 表单 使用      更新时间：2023-09-26

我试图使用AJAX与php和MySqli从数据库中获得结果。我是非常新的ajax和javascript，所以任何帮助将不胜感激

这是我的表单:

<form method="get">
    <input type="number" min=0 name="gameId" id="gameId" placeholder="Game Id" required><br>
    <input type="number" min=0 step=0.01 name="price" id="price" placeholder="Price" required><br>
    <button type="submit" onClick="getGames()">Submit</button>
</form>
这是我在JS中的AJAX: 
function getGames() {
    var gameId = document.getElementById("gameId").value;
    var price = document.getElementById("price").value;
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("jumbotron").innerHTML = xmlhttp.responseText;
        }
    };
    xmlhttp.open("GET","getGames.php?gameId="+gameId+"&price="+price, true);
    xmlhttp.send();
}

这是php

    <?php
$servername = "localhost";
$serverusername = "root";
$dbname = "ryangames";
$gameId = intval($_GET["gameId"]);
$price = intval($_GET["price"]);
$conn = mysqli_connect($servername, $serverusername, "", $dbname);
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}
$sql = "SELECT * FROM GAMES WHERE GameId = ".$gameId." AND Price = ".$price; 
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
    while ($row = mysqli_fetch_assoc($result)) {
        echo "<div class='"gameHolder'">
                <img class='"gameImg'" src='"images/".$row["Code"].".png'" alt='"".$row["Name"]."'">
                <div class='"gameText'">
                    <h3 class='"gameName'">".$row["Name"]."</h3>
                    <p class='"gameDesc'">".$row["Description"]."</p>";
                    if ($row["Price"] == 0) {
                        echo "<p class='"gamePrice'">FREE</p>";
                    } else {
                        echo "<p class='"gamePrice'">£".$row["Price"]."</p>";
                    }
        echo"   </div>
            </div>";
    } 
} else {
    echo "0 results";
}
mysqli_close($conn);
?>

我可以看到我的地址的值，但什么也没有发生。查询工作，如果我只是包含在php中，并使用户刷新每次。

更新:将两个getElementByIds的末尾都改为.value

将按钮从input type="submit"更改为input type="button"

试试吧。也许你没有在html形式

中传递gameId和price值

var gameId = document.getElementById(gameId").value;

var price = document.getElementById("price").value;

#编辑

提交按钮的另一种选择是将提交事件附加到表单上，并使用e.p preventdefault ();

document.getElementById("myform").addEventListener("submit",function(e){
   e.preventDefault();
   var gameId = document.getElementById("gameId").value;
    var price = document.getElementById("price").value;
  document.write("gameId:"+gameId+"price"+price);
   //... to be continued
});
<form id="myform" method="get">
    <input type="number" min=0 name="gameId" id="gameId" placeholder="Game Id" required><br>
    <input type="number" min=0 step=0.01 name="price" id="price" placeholder="Price" required><br>
    <button type="submit">Submit</button>
</form>

相关文章：