Javascript Ajax请求：从数据库中获取文本并在div中显示

我的目标是在单击按钮检索数据库中存储的“名称”和“故事”时执行AJAX请求。每个按钮将获得另一个英雄的信息。 我正在处理多个文件

使用我当前的代码（在我看来这是最接近正确的代码），switchHeroInfo将始终将文本更改为“TestName”和“StoryName”，而不是“Gertrude”“一位老太太”（存储在数据库中）

你能告诉我我奋斗的原因吗

用于连接到数据库的php文件：connect\u database.php

<?php
try
{
    $bdd = new PDO('mysql:host=localhost;dbname=biomass;charset=utf8', 'root', '', array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));
}
catch(Exception $e)
{

    die('Error : '.$e->getMessage());
}
?>

<?php
$tempValue = $_POST['newIndex'];
$sql = $bdd->prepare('SELECT * FROM heroes WHERE ID = :indexValue');
$sql->bindParam(":indexValue", $tempValue, PDO::PARAM_STR);
$sql->execute();

while($data = $sql->fetch())
{       
    ?>
    <script>
        $heroNameTemp = <?php echo json_encode($data["name"]); ?>;
        $heroStoryTemp = <?php echo json_encode($data["story"]); ?>;
    </script>

    <?php
}
$sql->closeCursor();
?>

php文件：get_data.php

<?php
try
{
    $bdd = new PDO('mysql:host=localhost;dbname=biomass;charset=utf8', 'root', '', array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));
}
catch(Exception $e)
{

    die('Error : '.$e->getMessage());
}
?>

<?php
$tempValue = $_POST['newIndex'];
$sql = $bdd->prepare('SELECT * FROM heroes WHERE ID = :indexValue');
$sql->bindParam(":indexValue", $tempValue, PDO::PARAM_STR);
$sql->execute();

while($data = $sql->fetch())
{       
    ?>
    <script>
        $heroNameTemp = <?php echo json_encode($data["name"]); ?>;
        $heroStoryTemp = <?php echo json_encode($data["story"]); ?>;
    </script>

    <?php
}
$sql->closeCursor();
?>

对此

$tempValue = 4;
$sql = $bdd->prepare('SELECT * FROM heroes WHERE ID = 4');

并将以下内容添加到我的HTML文件中

<?php include("../php/get_data.php"); ?>

---

一切正常，但我的索引始终为“4”。

您的代码中存在一些问题和误解

首先，在ajax中将数据更改为：

data: {newIndex:index},   // remove the (), simple syntax misstake

这应该可以解决sql问题

现在是get_data.php：

<?php
// including db connection is missing here for $bdd

// You should add a test here, wether you've received any and correct data in 'newIndex'
if(empty($_POST['newIndex']) {
    // throw an error, send that back to ajax (with a fitting http response code) and exit script
    http_response_code(400);
    $error = new stdClass();
    $error->msg = "Parameter newIndex was missing";
    header('Content-Type: application/json');  // tell the browser that there is some json coming!
    echo json_encode($error);
    exit;
}
$tempValue = $_POST['newIndex'];

                     // only select the values you need (name, story)
$sql = $bdd->prepare('SELECT name, story FROM heroes WHERE ID = :indexValue');
$sql->bindParam(":indexValue", $tempValue, PDO::PARAM_STR);
$sql->execute();

$data = $sql->fetch(); // if you only expect/need one row, no while is needed
// echo ONE json string as plain string:
header('Content-Type: application/json');  // tell the browser that there is some json coming!
echo json_encode($data);

最后，让我们将存储项目id的属性从id属性更改为data属性：

在html中：

 <div class="hero_portrait" data-id="1"></div>
 <div class="hero_portrait" data-id="2"></div>

到

---

您不应该使用属性

id

来保存数据。

id

用于保存该字段的名称以便与javascript一起使用，并在DOMDocument中寻址该字段在get_data.php中放置脚本标记（和javascript）是完全错误的做法。get_data.php应该只回显json字符串（或任何其他可以由javascript解析/解释的字符串），如果（空（$_POST['newIndex']）错误返回，我必须承认我完全不知道正确的处理方法。我在成功函数中添加了一个警报（数据）（返回：{“nick”：“Gertrude”，“0”：“Gertrude”，“story”：“Vieille folle Seniodic”，“1”：“Vieille folle Seniodic”}…单击另一个按钮时，名称和故事确实会发生变化。我将“name”更改为“nick”Everywhere$sql->closeCursor（）；在get_data.php结束时仍然需要吗？我更新了代码get-data.php，与您在示例中所做的一样，但出现了一个警报（data.nick）；进入ajax成功函数显示“未定义".closeCursor是不必要的，因为你无论如何都要退出脚本，所以所有连接都将关闭。在经历了这些天的头痛之后，我再感谢你也不为过了！结果是完美的。你谈论了几个问题和误解，我花了很多时间面对视频/文本教程+尝试和错误，只是因为这个问题造成了很多混乱n在我的脑海里混合着其他人的不同经历。

success: function(data){
   $("#hero_name").html(data.name);
   $("#hero_story").html(data.story);
}

 <div class="hero_portrait" data-id="1"></div>
 <div class="hero_portrait" data-id="2"></div>

 var index = $(this).attr("id");

 var index = $(this).data("id");  // $(this).attr("data-id"); will also work