Question

如何使用Ajax基于div ID（或类似的东西）获取整行？

<div id="1">something inside</div>
<div id="2">something inside</div>
<div id="3">something inside</div>
<div id="4">something inside</div>
<div id="5">something inside</div>
<div id="6">something inside</div>
<div id="results"></div>

如果有人点击div，则应该从mysql中显示具有相同id的行。当有人点击<div id="3">时，它应该加载一行，ID为＃34; 3＆＃34;从mysql到结果div。

到目前为止，我只能编码：

$("#smash").click(function(){
        $.ajax({
            url: "loaditems.php",
            success: function(result){
            $("#items").html(result);
        }});
    });

PHP

        <?php
        include "mysql.php";

        $sql = "SELECT * FROM SmiteItems";
        $result = $conn->query($sql);

        if ($result->num_rows > 0) {
            // output data of each row
            while($row = $result->fetch_assoc()) {
                echo "<div class='item'>";
                // Name
                echo "<h3>" . $row["name"] . "</h3>";
                // DIV INFO
                echo "<div class='info'>";
                // Picture
                echo "<img src='img/" . $row["id"] . ".png'>";
                // Table Values
                echo "<table>";
                // Power
                if($row["power"]>0) {
                    echo "<tr><td>Power:</td><td> " . $row["power"] . "</td></tr>";
                }
                // Attack Speed
                if($row["attspeed"]>0) {
                    echo "<tr><td>Attack speed:</td><td> " . $row["attspeed"] . "</td></tr>";
                }
                // Lifesteal
                if($row["lifesteal"]>0) {
                    echo "<tr><td>Lifesteal:</td><td> " . $row["lifesteal"] . "</td></tr>";
                }
                // Penetration
                if($row["penetr"]>0) {
                    echo "<tr><td>Penetration:</td><td> " . $row["penetr"] . "</td></tr>";
                }
                // Physical Def
                if($row["physdef"]>0) {
                    echo "<tr><td>Physical:</td><td> " . $row["physdef"] . "</td></tr>";
                }
                // Magical Def
                if($row["magdef"]>0) {
                    echo "<tr><td>Magical:</td><td> " . $row["magdef"] . "</td></tr>";
                }
                // Health
                if($row["health"]>0) {
                    echo "<tr><td>Health:</td><td> " . $row["health"] . "</td></tr>";
                }
                // HP regen
                if($row["hp5"]>0) {
                    echo "<tr><td>HP5:</td><td> " . $row["hp5"] . "</td></tr>";
                }
                // Movement Speed
                if($row["mspeed"]>0) {
                    echo "<tr><td>Movement:</td><td> " . $row["mspeed"] . "</td></tr>";
                }
                // Cooldown
                if($row["cdown"]>0) {
                    echo "<tr><td>Cooldown:</td><td> " . $row["cdown"] . "%</td></tr>";
                }
                // Mana
                if($row["mana"]>0) {
                    echo "<tr><td>Mana:</td><td> " . $row["mana"] . "</td></tr>";
                }
                // MP5
                if($row["mp5"]>0) {
                    echo "<tr><td>MP5:</td><td> " . $row["mp5"] . "</td></tr>";
                }
                // Crowd Control Reduction
                if($row["ccr"]>0) {
                    echo "<tr><td>CCR:</td><td> " . $row["ccr"] . "</td></tr>";
                }
                // Stack YES output
                if($row["stack"]==1) {
                    echo "<tr><td>Stack:</td><td> Yes</td></tr>";
                }
                // Item Type Aura Passive etc
                if (!empty($row["itype"])){
                    echo "<tr><td>Type:</td><td> " . $row["itype"] . "</td></tr>";
                }
                // Table Close
                echo "</table>";
                // Item description
                if (!empty($row["text"])){
                    echo "<div class='text'>";
                    //echo "<h4>Description:</h4>";
                    echo "<p>" . $row["text"] . "</p>";
                    echo "</div>";
                }
                echo "</div>"; // CLOSE DIV INFO
                echo "</div>";
            }
        } else {
            echo "<p>0 results</p>";
        }
        $conn->close();
        ?>

我知道我的PHP并不好，我刚开始学习它。我的MySQL表中也有空行，所以我需要在将它添加到html之前检查它是否为空。

Answer 1

首先，您需要在div上发生onclick事件。单击div时，其ID将传递给getrow()函数。

<div id="1" onclick="getrow(this.id)">something inside</div>
<div id="2" onclick="getrow(this.id)">something inside</div>
<div id="3" onclick="getrow(this.id)">something inside</div>
<div id="4" onclick="getrow(this.id)">something inside</div>
<div id="5" onclick="getrow(this.id)">something inside</div>
<div id="6" onclick="getrow(this.id)">something inside</div>
<div id="results"></div>

这是getrow()函数。 div id通过变量divid传递并发送到loaditems.php

function getrow(clicked_id) {
   $.ajax({
      url: "loaditems.php",
      data: {divid: clicked_id},
      success: function(data){
         $("#result").html(data);
      }
   });
}

然后只需更改您的PHP查询（假设每行由递增ID表示）。我已经在PDO中写了这个，因为这是您应该使用的，以保证您的网站安全。

$sql = $conn->("SELECT * FROM SmiteItems WHERE ID=:rowid");
$sql->bindParam(':rowid', $_POST['divid']);
$sql->execute();
if($sql->rowCount() > 0) { // if a row is returned
   while($row = $sql->fetch()) {
      // rest of your code
   }
}

Answer 2

首先，您需要对事件进行函数调用，例如onclick on each div

<div id="1" onclick="getresult(1)">something inside</div>
<div id="2" onclick="getresult(2)">something inside</div>
<div id="3" onclick="getresult(3)">something inside</div>
<div id="4" onclick="getresult(4)">something inside</div>
<div id="5" onclick="getresult(5)">something inside</div>
<div id="6" onclick="getresult(6)">something inside</div>
<div id="results"></div>

然后在函数中使用ajax从PHP文件中获取结果并将其显示在结果div中

function getresult(id){
    var xhr= new XMLHttpRequest();
    var params = "id="+id;
    var url = address of your php file
    xhr.open('POST',url,true);
    xhr.onload=function(){
    if(this.status == 200)
        var resultarray = json_decode(this.responseText);
        //now you can access the data like an array in the variable resultarray and display it however you wish
    }
    xhr.send(params);
}

在PHP文件中使用POST变量获取id并执行你的mysql查询。

require('mysql.php');
$stmt = $con->prepare("SELECT * FROM SmiteItems WHERE id=?");
$stmt->bind_param("i",$id);
$id=$POST['id'];    //get the id from post variable
$stmt->execute();
$result=$stmt->get_result();
echo json_encode($result);

如何使用Ajax输出mysql行？

2 个答案: