路過時查看PHP-JS

Question

嗨，我使用笨框架，

我使用一個Ajax請求得到數據庫的數據，並在視圖來顯示HTML標籤無法正常渲染。

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); 
     } 

我CONTROLER是

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

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

問題渲染頁面視圖是

如何正確呈現我的html，在此先感謝

Answer 1

您需要解碼json對象，然後將其設置爲容器中的html。

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

請注意使用jQuery.parseJSON函數向後兼容沒有JSON對象的瀏覽器。

另外，您的from_date變量中存在拼寫錯誤。它讀取#form_date，它應該讀取#from_date。

編輯

這裏有一個骯髒的方式來解決它現在：

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