我在 ajax 成功接收我的数据如何在表中显示 jquery 数据

Posted

技术标签:

【中文标题】我在 ajax 成功接收我的数据如何在表中显示 jquery 数据【英文标题】:I am receiving my data in ajax success how can I show jquery data in table 【发布时间】:2019-11-29 00:28:27 【问题描述】:

我从控制器获取数据,它显示在 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);
     

【问题讨论】:

【参考方案1】:

试试这个:-

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

并添加:-

<tbody id="userdata">

【讨论】:

【参考方案2】:

我不了解 php。但是你可以很容易地使用 jquery 和 success 函数中的代码来做到这一点。

<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 数据的主要内容,如果未能解决你的问题,请参考以下文章

如何使用ajax将更新推送到表单中

SQLite 数据插入未反映在表中

如何从 mongodb 获取数据并使用节点 js 将其显示在表中?

如何匹配两个数据框的架构

如何显示“未找到结果”,如果在表中未找到数据-Angular 8

oracle的date类型:我在表中的某个字段设置的类型是date,想要插入数据后显示"年月日时分秒",该如何插入