Wypełnij tabelę HTML z odpowiedzi AJAX


Mam pewne dane w bazie danych MySQL. Chcę pokazać te dane w tabeli html na podstawie parametru wybranego przez użytkownika.
Poniżej znajduje się sekcja wprowadzania (HTML)
<form class="form-inline">
<div class="input-group">
<div>Enter Person Name
<input class="form-control" id="tags">

<div class="btn-group">
<button type="submit" id="btnSubmit">Search</button>

</form>

To jest tabela, którą chcę wypełnić danymi pochodzącymi z odpowiedzi AJAX.
<div class="dataTable_wrapper">
<table class='table table-striped table-bordered table-hover' id='records_table'>
<tr class='odd gradeX'>
<th>Name</th>
<th>Group</th>
<th>Work</th>
<th>Grade1</th>
<th>Grade2</th>
<th>Grade3</th>
<th>TeacherName</th>
<th>RollNo</th>
</tr>
</table>

Teraz, klikając przycisk „Szukaj”, chcę przesłać nazwę do pliku PHP i pobrać bazę danych formularza informacyjnego.
dla którego zrobiłem to:
$(document).ready(function () {
$("#btnSubmit").click(function (e) {
e.preventDefault();
var selText = $('#tags').val(); if (selText === '') {
alert("Please select a name!");
} else {
$.ajax({
type: 'GET',
url: 'getData.php',
jsonpCallback: 'jsonCallback',
dataType: 'jsonp',
jsonp: false,
data: {
q: selText
},
success: function (response) {
alert(response);
var trHTML = ''; $.each(response, function (i, item) {
$.each(item, function (_, o) {
trHTML += '<tr><td>' + o.Name +
'</td><td>' + o.Group +
'</td><td>' + o.Work +
'</td><td>' + o.Grade1 +
'</td><td>' + o.Grade2 +
'</td><td>' + o.Grade3 +
'</td><td>' + o.TeacherName +
'</td><td>' + o.RollNo. +
'</td></tr>';
});
});
$('#records_table').append(trHTML);
},
error: function (e) {
$("#txtHint").html(e.responseText);
}
});
}
});
});

Kod PHP to
<?php
$servername = "localhost"; $username = "root"; $password = "21343"; $dbname = "do_demob";
$selectedName = $_GET['q'];
$conn = mysqli_connect($servername, $username, $password, $dbname);
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
$sql = "SELECT *** Don't have rights to reveal";
$result = mysqli_query($conn, $sql);
$rows = array();
if($result) {
while($row = mysqli_fetch_assoc($result)) {
$rows[] = $row;
}
}else {
echo 'MySQL Error: ' . mysqli_error();
}
$json = json_encode($rows);
echo $json;
mysqli_close($conn);
?>

Odpowiedź AJAX to
[{"Name":"Sagar Mujumbdar","Group":"","TeacherName":"John Cena","RollNo":"SX51998","Work":"Sales","Grade1":"Good","Grade2":"5","Grade3":"1"}]

kod stanu to: 200 OK. Sprawdziłem również w sekcji narzędzi programistycznych, czy dane przychodzą w całości i we właściwym formacie. Nazwy kluczy są również poprawne.
Ale niestety dane nie są wyświetlane w tabeli.
Powodem jest to, że ze względu na fakt, że obiekt JSON zawiera wartości NULL, nie jest wyświetlane?
Jeśli nie, jaki może być inny powód?
Zaproszony:
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Spróbuj postępować zgodnie z logiką. Może być jakiś błąd, taki jak nawiasy klamrowe i przecinek, ponieważ edytowałem go tutaj. spróbuj nagłówek tabeli jest również w javascript. Zrobiłem to poniżej. Proszę sprawdzić
$(document).ready(function () {
$("#btnSubmit").click(function (e) {
e.preventDefault();
var selText = $('#tags').val(); if (selText === '') {
alert("Please select a name!");
} else {
$.ajax({
type: 'GET',
url: 'getData.php',
jsonpCallback: 'jsonCallback',
dataType: 'jsonp',
jsonp: false,
data: {
q: selText
},
success: function (response) {
alert(response);
var trHTML = "<table class='table table-striped table-bordered table-hover' id='records_table'>
<tr class='odd gradeX'>
<th>Name</th>
<th>Group</th>
<th>Work</th>
<th>Grade1</th>
<th>Grade2</th>
<th>Grade3</th>
<th>TeacherName</th>
<th>RollNo</th>
</tr>";
for(var i =0;i < response.length-1;i++)
{
var o= response[i]; trHTML += '<tr><td>' + o.Name +
'</td><td>' + o.Group +
'</td><td>' + o.Work +
'</td><td>' + o.Grade1 +
'</td><td>' + o.Grade2 +
'</td><td>' + o.Grade3 +
'</td><td>' + o.TeacherName +
'</td><td>' + o.RollNo +
'</td></tr>';
}
trHTML+="</table>"
$('#records_table').append(trHTML);
},
error: function (e) {
$("#txtHint").html(e.responseText);
}
});
}
});
});
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

  • Masz błąd składni zaraz po
    RollNo
    :
    '</td><td>' + o.RollNo. +
    Odznacz
    .
    .
  • W swojej iteracji idziesz o jeden element głębiej,
    o. *
    będzie niezdefiniowane, ponieważ
    o
    to już
    „Sagar Mujumbdar”
    ,
    „”
    itp. Wystarczy jeden
    .each
    :
    $.each(response, function (i, o) { trHTML += '<tr><td>' + o.Name + '</td><td>' + o.Group + '</td><td>' + o.Work + '</td><td>' + o.Grade1 + '</td><td>' + o.Grade2 + '</td><td>' + o.Grade3 + '</td><td>' + o.TeacherName + '</td><td>' + o.RollNo. + '</td></tr>';});

Stworzyłem też

fiddle
https://jsfiddle.net/uL45bxn3/
swoją odpowiedzią AJAX.

Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się