在表格中显示 AJAX 响应答案

【问题标题】：Display the AJAX response in Table在表格中显示 AJAX 响应
【发布时间】：2017-11-23 21:05:26
【问题描述】：

我正在尝试根据日期范围显示记录。

脚本

$(function() {
  $(document).on("click", "#btnSubmit", function(e) {
    e.preventDefault();
    var info = $("#search").serialize();
    alert(info);

    $.ajax({
      type: 'POST',
      url: 'url',
      data: info,
      success: function(response) {
        alert(response);
        var obj = $.parseJSON(response);
        var trHTML = '';

        $.each(response, function(i, o) {
          trHTML += '<tr><td>' + o.patient_name +
            '</td><td>' + o.patient_address +
            '</td></tr>';
        });

        $('#records_table').append(trHTML);
      }
    });

    e.preventDefault();
  });
});

HTML

<table class='table table-striped table-bordered table-hover' id='records_table'>
</table>

控制器

public function getsearch(){

    $this->load->model('History_m');
    $fromdate=$this->input->post('dateFrom');
    $todate=$this->input->post('dateTo');

    $date1=date( 'Y-m-d', strtotime($fromdate));
    $date2=date( 'Y-m-d', strtotime($todate));

    $result  = $this->History_m->search($date1,$date2);
    echo json_encode($result);     
}

型号

function search($date1,$date2){
    $this->db->trans_start();
    $query = $this->db->query("SELECT * FROM `referral_confirmation_details` WHERE `created_on` >= '".$date1."' AND `created_on` <= '".$date2."'");
    $this->db->trans_complete();
    if($query->num_rows()>=1)
        return $query->result();
    }

AJAX 响应

我得到alert(response) 的输出为：

[
   {
      "ID":"1",
      patient_name":"xyz",
      "patient_email":"xyz@gmail.com",
      "gender":"Male",
      "age":"23",
      "address":"xyz",
      "city":"bangalore",
      "password":"fzf1"
   }

我收到错误，例如“位置 0 处 JSON 中的意外令牌 A”。

【问题讨论】：

我不使用 jQuery 但可能将 $.each(response, 更改为 $.each(obj,function(....
这是准确的响应，还是您只是错过了复制最后一个]？
@Norsk - 您更改了问题中的回复。那是因为你知道它错了，还是因为你猜它错了？
@MagnusEriksson 我意识到我的错误并试图取消/删除我的编辑，但我不确定这是否可行
@Norsk 不用担心，我把它改回来了。让我们保持原样，直到 OP 回复任何问题/评论。

标签： php jquery json ajax codeigniter

【解决方案1】：

您使用的不是 JSON 对象，而是响应 JSON 字符串。试试

$.each(obj, function (i, o){
  trHTML += '<tr><td>' + o.patient_name +
            '</td><td>' + o.patient_address +
            '</td></tr>';
});

【讨论】：

【解决方案2】：

我认为 ] 在 json 末尾丢失了

[{"ID":"1","patient_name":"xyz","patient_email":"xyz@gmail.com","gender":"Male","
age":"23","address":"xyz","city":"bangalore","password":"fzf1"}]

【讨论】：

【解决方案3】：

$.each(response, function (i, o){
   trHTML += '<tr><td>' + o.patient_name +
             '</td><td>' + o.patient_address +
          '</td></tr>';
 });

您在每个循环中传递响应变量，您应该添加 obj 否则您应该首先使用 parse 并传入循环。这样您就可以解决问题。并且在您的 json 响应中缺少 ]。

【讨论】：

【解决方案4】：

您需要将字符串转换为对象。试试下面..

$.ajax({

    type: 'POST',
    url: 'url',
    data: info,
    dataType: 'json',
    success: function(response){

        var obj = $.parseJSON(response);   

        var trHTML = '';
        $.each(obj, function (i, o){
        trHTML += '<tr><td>' + o.patient_name +
                 '</td><td>' + o.patient_address +
              '</td></tr>';

});

【讨论】：

它应该在循环时做出响应

【解决方案5】：

里面有两个错误：

请更改

$.each(response, function(i, o) {
  trHTML += '<tr><td>' + o.patient_name +
    '</td><td>' + o.patient_address +
    '</td></tr>';
});

到

$(obj).each(function(i) {
  trHTML += '<tr><td>' + this.patient_name +
    '</td><td>' + this.patient_address +
    '</td></tr>';
});

您希望遍历解析的 JSON 对象而不是 HTTP 响应，对吗？进一步阅读请查看jQuery的$().each的文档：https://api.jquery.com/each/

【讨论】：

为了正确调试你的东西，你不应该使用alert();，而是使用console.log();。因此，您可以正确查看浏览器控制台中的输出。
当我替换响应时，我收到错误消息为 Uncaught TypeError: Cannot use 'in' operator to search for 'length' in Array
我已经更新了答案。如果这没有帮助，请善待并在 jsbin、jsfiddle 等上上传您的代码版本。这样代码分析将得到简化。
非常感谢您的支持.. 我终于得到了 $.each(response, function (i, o){ 的输出
@user5370838 那么，您愿意向我们展示您的解决方案并将正确答案标记为它是什么吗？

【解决方案6】：

谢谢大家，我终于得到了结果。我已经更新了正确的脚本，以便对面临同样问题的人有所帮助。

   $(document).on("click", "#btnSubmit", function(e) {
   e.preventDefault();

    var info = $("#search").serialize();
     $.ajax({

type: 'POST',
url: 'url',
data: info,
dataType: 'json',
success: function(response){

    var trHTML = '';
    $.each(response, function (i, o){
   trHTML += '<tr><td>' + o.patient_name +
         '</td><td>' + o.patient_address +
      '</td></tr>';
          });
  $('#records_table').append(trHTML);
      }
    });
    e.preventDefault();
  });

【讨论】：