使用AJAX，jquery和codeigniter顯示數據庫中的數據

模型似乎和控制器一樣工作。 AJAX將結果顯示爲「null」，所以我認爲這是因爲我們需要將數據作爲json發送。如何將數據放到正確的格式，並在視圖使用AJAX，jquery和codeigniter顯示數據庫中的數據

查看

<button type='button' name='getdata' id='getdata'>Get Data.</button> 

<div id='result_table' style="color:white;"> 
hola amigo 
</div> 

<script type='text/javascript' language='javascript'> 
$('#getdata').click(function(){ 
       $.ajax({ 
         url: 'http://localhost:8888/index.php/trial/getValues', 
         type:'POST', 
         dataType: 'json', 
          error: function(){ 
          $('#result_table').append('<p>goodbye world</p>'); 
          }, 

         success: function(results){ 


         $('#result_table').append('<p>hello world</p>' +results); 
         alert("Success!"); 

          } // End of success function of ajax form 
          }); // End of ajax call 

       }); 
</script>

控制器

function getValues(){ 
    $this->load->model('get_db'); 
    $data['results'] = $this->get_db->getAll(); 
    $this->output->set_content_type('application/json'); 
    $this->output->set_output(json_encode($data)); 
    return $data; 
}

型號

class Get_db extends CI_Model{ 
    function getAll(){ 
     $query=$this->db->query("SELECT * FROM questions"); 
     return $query->result(); 
     //returns from this string in the db, converts it into an array 
    } 
}

顯示任何想法

好了，所以在AJAX返回成功的警報，但不是顯示數據庫中的表，這是什麼，是在div顯示：

的Hello World

空

如果我直接去網址（http://loca.lhost:8888/index.php/trial/getValues）這是出現在對象：

{ 
    "results": [ 
    { 
     "qID": "1", 
     "email": "hello", 
     "qText": "hello", 
     "playlistID": "", 
     "timestamp": "0000-00-00 00:00:00" 
    }, 
    { 
     "qID": "2", 
     "email": "", 
     "qText": "", 
     "playlistID": "", 
     "timestamp": "0000-00-00 00:00:00" 
    }, 

    }

我如何提取此信息並顯示我想顯示什麼？

來源

2014-01-10 user2796352

使用'console.log（變量）'來獲得返回的數據的好主意。還可以使用[json viewer]（http://jsonviewer.stack.hu/）輕鬆解析 – Jakub

您可以通過使用$.each

success:function(data){ 
    $('#result_table').append('<p>hello world</p>'); 
    alert("Success!"); 
    $.each(data.results, function(k, v) { 
     $.each(v, function(key, value) { 
      $('#result_table').append('<br/>' + key + ' : ' + value); 
     }) 
    }) 
}

來源

2014-01-11 04:45:08

非常感謝的人！ – user2796352

感謝這工作對我來說很好:) – acmsohail

而不是從您的控制器返回$data，json_encode它並使用echo來代替。

function getValues(){ 
    $this->load->model('get_db'); 
    $data['results'] = $this->get_db->getAll(); 
    echo json_encode($data); 
}

希望幫助!!

來源

2014-01-11 00:45:50

嘿，謝謝你的迴應。看到我剛剛做的編輯:) – user2796352

你一些過於複雜的東西提取JSON數據，更新這只是輸出JSON：

控制器：

function getValues(){ 
    $this->load->model('get_db'); 
    $data['results'] = $this->get_db->getAll(); 

    if($data['result']){ // we got a result, output json 
     echo json_encode($data['result']); 
    } else { 
     echo json_encode(array('error' => true)); 
    } 
}

和你的javascript將很容易處理結果（因爲你通過b ACK JSON = JavaScript對象表示法）

success: function(data){ 
    // handle the result 
    var re = $.parseJSON(data); 

    if(!re.error){ 
     // no error so lets put out some data whatever way 
    } 
}

使用var re = $.parseJSON(data);會很容易讓你訪問.形式JSON數據：

re.result等;

將json輸出到console.log(data)以查看其結構（不打印到您的html中）。使用Chrome檢查器來遍歷你的結構。

來源

2014-01-11 04:58:58 Jakub

使用AJAX，jquery和codeigniter顯示數據庫中的數據

回答

相關問題