Как мне совместно использовать методы .post и .getJSON для вывода моих данных JSON в html-таблицу с использованием jQuery? - PullRequest
Новая
       24

Как мне совместно использовать методы .post и .getJSON для вывода моих данных JSON в html-таблицу с использованием jQuery?

0 голосов
/ 21 марта 2019

Вот ссылка на мои фрагменты кода: https://jsfiddle.net/dialcoding/5tx31g6z/11/

Я знаю, как использовать метод getJSON из файла JSON, но я не знаю, как извлечь JSON, сгенерированный из PHPскрипт, чтобы я мог генерировать таблицу в html, используя jQuery.Мой вывод не сгенерирует желаемую html-таблицу, однако я могу поставить предупреждение перед методом getJSON, который покажет, что JSON-массив был сгенерирован из скрипта PHP.Мне нужна помощь в понимании того, как использовать метод jQuery getJSON, чтобы получить файл JSON, сгенерированный из скрипта PHP, чтобы я мог вывести html-таблицу, пожалуйста?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
        <label>Name:</label><input type="text" id="name">
        <input id="name-submit" type="submit" value="Grab">
    <br><br><br>
    <div class="container">
        <div class="table-responsive">
        <table class="table tabe-bordered table-striped" id="employee_table">
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>

        </table>
        </div>
    </div>
</body>
</html>

php файл: 

<?php
if (isset($_POST['name']) === true && empty($_POST['name']) === false) {
include 'connect_db.php';

$json_array = array();

$sql = "SELECT * FROM forminput where forminput.name LIKE '%".$_POST['name']."%' ";
$result = $conn->query($sql);

if($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $json_array[] = $row;
    }
} else {
    echo "You query returned zero results!";
}

echo json_encode($json_array);
$conn->close();

}

Файл JavaScript: 

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
$("#name-submit").on('click', function() {
    var name = $('input#name').val();
    if ($.trim(name) != '') {
        $.post('content2.php', {name: name}, function(data) {
            $.getJSON("content2.php", function(data) {
            var employee_data = '';    
            $.each(data, function(key, value) {
                employee_data += '<tr>';
                employee_data += '<td>'+value.name+'</td>';
                employee_data += '<td>'+value.age+'</td>';
                employee_data += '</tr>';
            });
            $('#employee_table').append(employee_data);    
            });
        })       


    }
});

...