jquery — отображает данные JSON, возвращенные из PHP, в формате Datatable
Я новичок в JQUERY, и я пытаюсь найти что-то и, основываясь на найденном тексте, я делаю ajax-вызов, который вызовет функцию php, а PHP возвращает мне данные JSON.
Я хочу отобразить возвращенные данные в форме данных.
У меня есть PHP-файл table.php и JavaScript-файл jss.js и мой main.php.
Файл PHP возвращает данные JSON, и я могу использовать оповещение для их отображения.
Я хочу знать, как я могу отобразить его в виде данных.
<div>
<input type="text" name="search_query" id="search_query" placeholder="Search Client" size="50" autocomplete="off"/>
<button id="search" name="submit">Search</button>
</div>
мой файл ajax / jss.js
$(document).ready(function(){
$('#search').click(function(){
var search_query = $('#search_query').val();if(search_query !='')
{
$.ajax({
url:"table.php",
method:"POST",
data:{search_query:search_query},
success: function(data)
{
alert("HEKKI "+data);
}
});
}
else
{
alert("Please Search again");
}
});
});
мой файл table.php
<?php
$data=array();
$dbc = mysqli_connect('localhost','root','','acdc') OR die('Could not connect because: '.mysqli_connect_error());
if (isset($_REQUEST['search_query']))
{
$name = $_REQUEST['search_query'];
}if($dbc)
{
if (!empty($name))
{
$sql = "select c.res1 res1,
cc.res2 res2,
cc.res3 res3,
cc.res4 res4,
cc.res5 res5
from table1 c
inner join table2 cc
on c.id = cc.id
where c.name like '".$name."%'
and cc.ENABLED = 1";
$res = mysqli_query($dbc,$sql);if(!(mysqli_num_rows($res)==0))
{
while($row=mysqli_fetch_array($res))
{
$data['RES1'] = $row['res1'];
$data['RES2'] = $row['res2'];
$data['RES3'] = $row['res3'];
$data['RES4'] = $row['res4'];
$data['RES5'] = $row['res5'];
}
}
else
{
echo "<div style='display: block; color:red; text-align:center'><br/> Not Found,Please try again!!!</div>";
}
}
}
echo json_encode($data);
/*
*/
?>
Подскажите, пожалуйста, как показать результат на главной странице?
Решение
Установка utf8 в качестве charset, вероятно, хорошая идея. Если у вас в таблице другая кодировка, вы получите ошибку JSON:
mysqli_set_charset($dbc, 'utf8');
Тогда используйте mysqli_fetch_assoc вместо mysqli_fetch_array, Ты хочешь field: value записи превратились в JSON:
$data = array();
while($row=mysqli_fetch_assoc($res)) {
$data[] = $row;
}
Выведите JSON:
echo json_encode( array('data' => $data) );
Теперь вы можете использовать его непосредственно вместе с dataTables:
<table id="example"></table>
$('#example').DataTable({
ajax: {
url: 'table.php'
},
columns: [
{ data: 'res1', title: 'res1'},
{ data: 'res2', title: 'res2'},
//etc..
]
})
Другие решения
Один из подходов состоит в том, чтобы создать форму с данными только в table.php файл и с поддержкой JQuery вам нужно будет заполнить <form id="form_id"> с результатом ajax $('#form_id').html(ajax_response);
другой подход:
использовать данные jQuery json для заполнения каждого поля отдельно.
var jsonData = JSON.parse( ajax_response ); // decode json
чем
$('#id_input_1').val(jsonData.RES1);
$('#id_input_2').val(jsonData.RES2);
$('#id_input_3').val(jsonData.RES3);
Поместите placeholder в этом случае я использовал #resultsи динамически создать таблицу и добавить ее в placeholder, Я закомментировал ваш Ajax для этого примера, но просто позвоните function Я создал для обработки результатов изнутри success перезвонить и передать новый function объект JavaScript.
$(document).ready(function() {
$('#search').click(function() {
var search_query = $('#search_query').val();if (search_query != '') {
//$.ajax({
// url: "table.php",
// method: "POST",
// data: {
// search_query: search_query
// },
// success: function(data) {
// alert("HEKKI " + data);
// }
//});
processResults({RES1: "result1", RES2: "result2"});
} else {
alert("Please Search again");
}
});
});
function processResults(obj){
var $tbl = $("<table>");
var $row = $("<tr>");
var trow;
$.each(obj, function(idx, elem){
trow = $row.clone();
trow.append($("<td>" + obj[idx] + "</td>"));
$tbl.append(trow);
});
$("#results").append($tbl);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="text" name="search_query" id="search_query" placeholder="Search Client" size="50" autocomplete="off" />
<button id="search" name="submit">Search</button>
<div id='results'></div>
</div>detector