以數據表格格式顯示從PHP返回的JSON數據

Question

我是JQUERY的新手，我正在嘗試搜索某些內容並基於搜索到的文本進行ajax調用，該調用將調用php函數並返回PHP我與JSON數據。 我想在數據表格中顯示返回的數據。 我有我的PHP文件table.php和JavaScript文件jss.js和我的main.php。 PHP文件正在返回JSON數據，我可以使用alert來顯示它。

我想知道如何在數據表中顯示它。

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

     /* 

    */ 

    ?> 

能否請您指導我如何結果顯示在主網頁。

Answer 1

設置爲UTF-8字符集可能是一個好主意。如果你在你的表有不同的字符集，你會得到一個JSON錯誤：

mysqli_set_charset($dbc, 'utf8'); 

然後用mysqli_fetch_assoc代替mysqli_fetch_array。你想field: value記錄變成JSON：在

<table id="example"></table> 

$('#example').DataTable({ 
    ajax: { 
    url: 'table.php' 
    }, 
    columns: [ 
    { data: 'res1', title: 'res1'}, 
    { data: 'res2', title: 'res2'}, 
    //etc.. 
    ] 
}) 

Answer 2

一個方法是創建只是table.php文件，並支持jQuery的，你需要填充<form id="form_id">與阿賈克斯的結果與數據如願以償形式$('#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); 

Answer 3

放置一個placeholder：

$data = array(); 
while($row=mysqli_fetch_assoc($res)) { 
    $data[] = $row; 
} 

輸出JSON：

echo json_encode(array('data' => $data)); 

現在你可以直接使用它連同數據表這種情況下，我使用#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>