Question

我从控制器中获取数据，它显示在console.log(data)中，我想在表中显示该数据

查看：

<?php include 'header.php';?>
<script src="/assets/js/plugins/jquery.min.js"></script>
<script src="/assets/js/jquery.validate.min.js"></script>
<script>
 var jq = $.noConflict();
</script> 
<table id="enquiry_table">
<thead>
 <tr>
    <th>From</th>
    <th>TO</th>
    <th>Date</th>
    <th>Status</th>
 </tr>
</thead>
<tbody>
   <?php 
      foreach ($records as $rec){
    ?>
  <tr>
      <td><?php echo $rec[0]->lr_from; ?></td> 
      <td><?php echo $rec[0]->lr_to; ?></td>               
      <td><?php echo date('d-m-Y',strtotime($rec->date));?></td>
      <td><?php echo $rec->status;?> </td> 
  </tr>
    <?php
    }
  ?>
</tbody>
</table>

<script type="text/javascript">
  function status_form(){
  var lr_no = jq('#lr_no').val();
     jq.ajax({
          url :"https://demo.barque.online/sitecontroller/StatusController/fetchStatus",
          type:"POST",
          dataType: "json",
          data:{
            lr_no:lr_no,
         },
          success: function(data)
          {
            console.log(data);
         },
          error:function(data)
          {
            alert("error message"+data);
          },async:false,
      });    
    }
</script>
<?php include 'footer.php'; ?>

控制器：

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class StatusController extends CI_Controller {
  public function __construct()
{
    header('Access-Control-Allow-Origin: my url');
    header('Access-Control-Allow-Credentials: true');
    header('Access-Control-Max-Age: 604800');
    header("Access-Control-Allow-Headers: Origin, Content-Type, Accept, Access-Control-Request-Method");
    header("Access-Control-Allow-Methods: GET, POST");
    parent::__construct();
    $this->load->model("sitemodel/StatusModel",'sModel');
 }
    function fetchStatus(){
    $lr_no                       = $this->input->post('lr_no');
    $statusResult['records']     = $this->sModel->fetchRecords($lr_no);
    echo json_encode($statusResult);
     }
}

Answer 1

尝试：-

body {
  background-image: url('https://i.imgur.com/IUWnlGU.jpg');
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

nav {
  background: inherit;
  position: relative;
  box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2);
  z-index: 999;
  /* overflow: hidden; */
}

nav::before {
  content: "";
  position: absolute;
  background: inherit;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
  filter: blur(10px);
  /* assign a height*/
  height: 110px;
  margin: -10px;
   overflow: hidden;
}

/*the clear effect*/
nav::after {
  content: "";
  position: absolute;
  height:30px;
  left:0;
  top:90px;
  width:100%;
  background: inherit;
}

并添加以下内容：-

<script type="text/javascript">


 function status_form(){
  var lr_no = jq('#lr_no').val();
     jq.ajax({
          url :"https://demo.barque.online/sitecontroller/StatusController/fetchStatus",
          type:"POST",
          dataType: "json",
          data:{
            lr_no:lr_no,
         },
          success: function(data)
          {
            var html="";
            for(var i=0;i<data.length;i++){
               html += "<tr>";
               html += "<td>"+data[i]['your_index']+"</td>";//as per your columns and use this if your data is array. if it was stdObject then use (.)sign for indexing.
               html += "</tr>";
            }
            $('#userdata').append(html);
            console.log(data);
         },
          error:function(data)
          {
            alert("error message"+data);
          },async:false,
      });    
    }

</script>

Answer 2

我不了解php。但是，您可以使用成功函数中的代码使用jquery轻松做到这一点。

<script type="text/javascript">
  function status_form(){
  var lr_no = jq('#lr_no').val();
     $.ajax({
          url :"",
          type:"POST",
          dataType: "json",
          data:""
          success: function(data)
          {
            var str = "";
            str += "<table>";
            $.each(data,function(i,item){
              str += "<tr><td>" + item.YOUR_VALUE + "</td></tr>";
            });
            str += "</table>";
            $("#div").append(str);
          },
          error:function(data)
          {
            alert("error message"+data);
          },
          async:false,
      });    
    }
</script>

我在ajax成功中收到数据，如何在表中显示jquery数据

2 个答案: