У меня есть данные в базе данных MySQL. Я хочу показать эти данные в таблице html на основе параметра, выбранного пользователем. Ниже приведен входной раздел (HTML)
<form class="form-inline"> <div class="input-group"> <div>Enter Person Name</div> <input class="form-control" id="tags"> </div> <div class="btn-group"> <button type="submit" id="btnSubmit">Search</button> </div> </form> Это таблица, в которой я хочу заполнить данные, поступающие из ответа 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> </div>
Теперь, нажав кнопку «Поиск», я хочу отправить имя в файл PHP и получить базу данных формы.
за что я это сделал:
$(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); } }); } }); });
PHP-код
<?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); ?>
Ответ AJAX
[{"Name":"Sagar Mujumbdar","Group":"","TeacherName":"John Cena","RollNo":"SX51998","Work":"Sales","Grade1":"Good","Grade2":"5","Grade3":"1"}]
код состояния: 200 OK. Я также проверил в разделе «Инструменты разработчика», данные идут полностью и в правильном формате. Имена клавиш также верны. Но, к сожалению, данные не отображаются в таблице. Причина в том, что, поскольку объект JSON содержит нулевые значения, он не отображается? Если нет, то что еще может быть причиной?
У вас есть синтаксическая ошибка сразу после RollNo :
'</td><td>' + o.RollNo. +
Удалите . ,
В вашей итерации вы переходите один элемент к глубине, o.* Будет неопределенным, потому что o уже есть "Sagar Mujumbdar" , "" и т. .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>'; });
Я также создал скрипку с ответом AJAX.
Попробуйте следовать логике. Там могут быть некоторые ошибки, такие как фигурные скобки и запятая, потому что я редактировал ее здесь. попробуйте заголовок таблицы также в javascript. Я сделал это ниже. пожалуйста, проверьте
$(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); } }); } }); });