Question

我是JQUERY的新手，我正在尝试搜索某些东西并根据搜索到的文本我正在进行一个调用php函数的ajax调用，而PHP正在返回我的JSON数据。我想以Datatable形式显示返回的数据。我有我的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

将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..
  ]
})

Answer 2

一种方法是使用table.php文件中的数据创建表单，并且在jQuery的支持下，您需要使用ajax结果<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我使用#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>

以Datatable格式显示从PHP返回的JSON数据

3 个答案: