Ajax-запрос: получить текст из базы данных и отобразить в div

Question

Моя цель - выполнить AJAX-запрос при нажатии на кнопку, чтобы получить «имя» и «историю», хранящиеся в моей базе данных.Каждая кнопка будет получать информацию о другом герое.Я работаю над несколькими файлами.

С моим текущим кодом (который ближе к тому, что мне кажется правильным), switchHeroInfo всегда будет менять текст на " TestName"и" StoryName"вместо" Гертруда"" Старушка"(хранится в базе данных).

Не могли бы вы рассказать мне о том, что может быть причиной моей борьбы?

файл php для подключения к базе данных: connect_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());
}
?>

Часть Javascript:

$(document).ready(function()
{
    $(".hero_portrait").click(function()
    {
        var index = $(this).data("id");

        $.ajax(
        {
           type: "POST",
           url: "../php/get_data.php",
           data: {newIndex:index},
           success: function(data)
            {
            // Display  {"nick":"Gertrude","0":"Gertrude","story":"Vieille folle senile","1":"Vieille folle senile"}
               alert(data);

            //Display : undefined
               alert(data.story);
                $("#hero_name").html(data.nick);
                $("#hero_story").html(data.story);
            },
            error: function() 
            { 
                alert("Request failure"); 
            }    
        });
    });
});

Файл php: get_data.php

<?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();
?>

Наконец, HTML относительно текущей проблемы:

<div id="squad_portraits">
            <div class="hero_portrait" id="1"></div>
            <div class="hero_portrait" id="2"></div>
            <div class="hero_portrait" id="3"></div>
            <div class="hero_portrait" id="4"></div>
        </div>

        <div id="hero_info">
            <h2 id="hero_name">Hero_Name</h2>
            <p id="hero_story"> Hero_Description</p>
        </div>

Еслия переключаю свой запрос sql:

$tempValue = $_POST['newIndex'];
$sql = $bdd->prepare('SELECT * FROM heroes WHERE ID = :indexValue');

на этот

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

и добавляю следующее в мой HTML-файл

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

все работает, но мой индекс всегда будетбыть "4".

Answer 1

В вашем коде есть несколько проблем и недоразумений.

Во-первых, в 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);

Теперь вы получаете содержимое $data в виде json в качестве параметра (data) в успешном обратном вызове вашего ajax, который вы можете использовать следующим образом:

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

Наконец давайте изменим сохранение идентификатора элемента из атрибута id в атрибут data:

В html:

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

ив javascript изменить

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

на

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