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

голоса
2

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

С моим текущим кодом (который ближе к тому , что кажется правильным в моем уме) switchHeroInfo всегда будет изменить текст « АСМАП » и « 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».

Задан 27/11/2018 в 14:59
источник пользователем
На других языках...                            


1 ответов

голоса
0

Есть несколько вопросов, и missunderstandings в вашем коде.

первых, в АЯКС данных изменений в этом:

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);
}

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

В 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
Ответил 27/11/2018 в 15:11
источник пользователем

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more