在 CodeIgniter 上用 ajax json 显示数据

Question

我想用 ajax 显示数据，在我使数据没有显示之后，但是当我调用控制器显示 json 数据存在时，我该如何显示数据name、address 和 telp 基于 id_data?

观看次数

<input id="id_data" value="5" />

<input id="name">
<input id="address">
<input id="telp">

<script type="text/javascript">
$(document).ready(function() {
    var id = $('#id_data').val();
    $.ajax({
        url : "<?php echo site_url('my_controllers/show_data/')?>" + id,
        type: "GET",
        dataType: "JSON",
        success: function(data)
        {
            $('#name').text(data.name);
            $('#address').text(data.address);
            $('#telp').text(data.telp);
        }
    });     
})
</script>

控制器

function show_data($id) {   
    $data = $this->my_models->get_data($id);
    echo json_encode($data);
}

型号

function get_data($id) {
    $query = $this->db->select('*')
                      ->from('tb_student')
                      ->where('id', $id)
                      ->get();

    if ($query->num_rows() > 0) {
        foreach ($query->result() as $data) {
            $hasil[] = $data;
        }
        return $hasil;
    } 

}

结果JSON

[
    {"id":"5","name":"John","address":"Miami","telp":"012345678"},
    {"id":"5","name":"Smith","address":"Chichago","telp":"012345678"},
    {"id":"5","name":"Steve","address":"Texas","telp":"012345678"},
]

Answer 1

看起来您正在将每个数据集附加到一个 $hasil 数组，然后对该数组进行 JSON 编码并返回到您应该循环遍历该数组或访问其第一个键的视图如果它存在。

此脚本可能适用于显示响应中的第一个数据集：

$(document).ready(function() {
  var id = $('#id_data').val();
  $.ajax({
    url: "<?php echo site_url('my_controllers/show_data/')?>" + id,
    type: "GET",
    dataType: "JSON",
    success: function(data) {
      if (data[0] === undefined) return;
      $('#name').text(data[0].name);
      $('#address').text(data[0].address);
      $('#telp').text(data[0].telp);
    }
  });
})

如果要显示所有元素，一种方法是在循环中创建一些 DOM。这是一个使用变量数据的示例：

var json = [{
  "id": "5",
  "name": "John",
  "address": "Miami",
  "telp": "012345678"
}, {
  "id": "5",
  "name": "Smith",
  "address": "Chichago",
  "telp": "012345678"
}, {
  "id": "5",
  "name": "Steve",
  "address": "Texas",
  "telp": "012345678"
}];

function show(data, $view) {
  // Loop through passed data
  data.forEach(function(current, index, array) {
    // Create a wrapper for current dataset if needed
    // Using a <form> here that you could use to edit
    // the data later on
    var $form = $('<form />');

    // Create the inputs and prefill them with the data
    // fetched from the server
    var $input_id = $('<input />')
      .attr('name', 'id')
      .attr('type', 'hidden')
      .val(current.id);
    var $input_name = $('<input />')
      .attr('name', 'name')
      .attr('type', 'text')
      .val(current.name);
    var $input_address = $('<input />')
      .attr('name', 'address')
      .attr('type', 'text')
      .val(current.address);
    var $input_telp = $('<input />')
      .attr('name', 'telp')
      .attr('type', 'text')
      .val(current.telp);

    // Add the DOM to the page
    $form.append($input_id, $input_name, $input_address, $input_telp)
    $view.append($form);
  });
}

$(function() {
  show(json, $('#view'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="view"></div>

您必须调整代码以适应您的 Ajax 回调，或者您甚至可以将 show() 函数添加到您的脚本并从 success 回调中调用它：

$(document).ready(function() {
  var id = $('#id_data').val();
  $.ajax({
    url: "<?php echo site_url('my_controllers/show_data/')?>" + id,
    type: "GET",
    dataType: "JSON",
    success: function(data) {
      show(data, $(document))
    }
  });
})

在 CodeIgniter 上用 ajax json 显示数据

Display data with ajax json on CodeIgniter

javascript

ajax

codeigniter-3