javascript - 传递给查看 PHP-JS 时，HTML 标记未正确呈现

Question

您好，我正在使用 codeigniter 框架，

我正在使用 ajax 请求从数据库获取数据并显示在 View 中。

    var from_date = jQuery('#form_date').val();
    var to_date = jQuery('#to_date').val();

    jQuery.ajax({
        url:base_url+"index.php/eod_report/search_to_date",
        type:"POST",
        data:{from_date:from_date,to_date:to_date},
        //datatype:'json',
        success:function(data){

            jQuery("#report_container").html(data); 
        }

我的 Controller 是

public function search_to_date()
{
    $from_date = $this->input->post('from_date');
    $to_date = $this->input->post('to_date');

    $where_array = array('eod.created_time >='=>$from_date,'eod.created_time <='=>$to_date);

    $eod_report_data = $this->eod_data->get_eod_report_data($where_array);
    $eod_total_report_data = $this->eod_data->get_eod_total_report_data($where_array);

    $formated_eod_report_data = $this->format_eod_report_array($eod_report_data);
    krsort($formated_eod_report_data);

    $formated_eod_all_report_data= $this->format_all_eodreport_array($eod_total_report_data);
    krsort($formated_eod_all_report_data);

    $data = array('eod_data'=>$formated_eod_report_data,'eod_all_data'=>$formated_eod_all_report_data);

    $html = $this->load->view('eod-report-partial',$data,true);

    echo  json_encode($html);
}

eod-report-partial View

<table width="100%" align="center" border="1">
<thead>
    <tr>
     <td>ShopCode</td>
      <td>Submitted By</td>
      <td>RMS</td>
      <td>ORM</td>
      <td>ORM Profit</td>
      <td>Total</td>  
      <td>Cash</td>
      <td>Card</td>
      <td>Opening Balance</td>
      <td>Purchase Today</td>       
      <td>Final Total</td>
      <td>T.Till Cash</td>
      <td>Difference</td>      
      <td>Nxt Day Op&nbsp;Balance</td>
      <td>Petty Cash</td>
      <td>Banking</td>  
    </tr>
</thead>
<tbody>

<?php foreach($eod_data as $key=>$eods)  {?>
    <tr><td colspan="8""><?php echo $key; ?></tr>
    <?php foreach($eods as $eod) { ?>
    <tr>
     <td><?php echo $eod['shop_code']; ?></td>
      <td><?php echo $eod['first_name']; ?></td>
      <td><?php echo $eod['rms_sell'];?></td>
      <td><?php echo $eod['orm_repair']; ?></td>
      <td><?php echo $eod['orm_repair'];?></td>
      <td><?php echo $eod['total']; ?></td>
      <td><?php echo $eod['cash']; ?></td>  
      <td><?php echo $eod['card']; ?></td>
      <td><?php echo $eod['opening_bal']; ?></td>
      <td><?php echo $eod['purchases']; ?></td>
      <td><?php echo $eod['final_total']; ?></td>
      <td><?php echo $eod['till_total']; ?></td>       
      <td><?php echo $eod['difference']; ?></td>
      <td><?php echo $eod['nextday_opening_bal']; ?></td>
      <td></td>      
      <td><?php echo $eod['banking']; ?></td>
    </tr>

<?php  } ?>
    <tr>
     <td></td>
      <td>Total:</td>
      <td><?php echo $eod_all_data[$key]['sum_rms_sell'];?></td>
      <td><?php echo $eod_all_data[$key]['sum_orm_repair']; ?></td>
      <td><?php echo $eod_all_data[$key]['sum_orm_repair'];?></td>
      <td><?php echo $eod_all_data[$key]['total']; ?></td>
      <td><?php echo $eod_all_data[$key]['sum_cash']; ?></td>  
      <td><?php echo $eod_all_data[$key]['sum_card']; ?></td>
      <td><?php echo $eod_all_data[$key]['sum_opening_bal']; ?></td>
      <td><?php echo $eod_all_data[$key]['sum_purchases']; ?></td>
      <td><?php echo $eod_all_data[$key]['final_total']; ?></td>
      <td><?php echo $eod_all_data[$key]['sum_till_total']; ?></td>       
      <td><?php echo $eod_all_data[$key]['difference']; ?></td>
      <td><?php echo $eod_all_data[$key]['sum_next_day_bal']; ?></td>
      <td></td>      
      <td><?php echo $eod_all_data[$key]['sum_banking']; ?></td>
    </tr>
<?php } ?>

</tbody>
</table>

问题是页面的 View 渲染是

如何正确呈现我的 html，提前致谢

Answer 1

在将其设置为容器中的 html 之前，您需要解码 json 对象。

var html_data = jQuery.parseJSON(data);
jQuery("#report_container").html(html_data);

请注意 jQuery.parseJSON 函数的使用是为了向后兼容没有 JSON 对象的浏览器。

您的 from_date 变量中也有错字。它在应该读取#from_date 的地方读取#form_date。

编辑

现在有一个肮脏的方法来处理它:

 html_data = jQuery.parseJSON(data);
 html_data = html_data.replace("\r\n", "").replace("\", "");
 jQuery("#report_container").html(html_data);