Question

以下是我的ajax请求：

$.ajax({
    url: "<?php echo site_url() ?>/welcome/getall_images",
    type: "POST",
    dataType: "json",
    data: {id: '50'},
    success: function(data) {
        var data = $.parseJSON(data); 
        alert(obj.value); // not getting anything
    }
});

通过上面的代码，我从db中检索了图像，以下是我的控制器的结果数组： -

Array
(
    [0] => Array
        (
            [id] => 153
            [file_name] => DSC00081.JPG

        )

    [1] => Array
        (
            [id] => 154
            [file_name] => DSC00082.JPG

        )

    [2] => Array
        (
            [id] => 155
            [file_name] => DSC00083.JPG

        )

)

我想提供通过php response检索到的文件名 ajax的成功。我不知道在success内要保留什么我想在下面显示图像。我应该怎么做..？

<img src="//the image from the php response" name="slide" border=0 width=300 height=375>

我的php控制器代码是：

public function getall_images($id='')
{   //print_r($this->input->post('id'));

        $this->load->model('gallery_model');
        $data = $this->gallery_model->get_allimages($this->input->post('id')); //print_r($data);// I am getting the array in console
        return $data;
    }

Answer 1

从输出看来，响应是一个对象数组。您当前的代码无法正常工作，因为您尝试在已经是对象的内容上调用$.parseJSON（因此这会导致错误）。您还尝试在尚未定义的value变量上访问不存在的obj属性。

要从AJAX响应中获取图像文件名，您需要循环遍历该数组。然后，您可以在该循环中append()将图像添加到DOM，根据需要设置src。试试这个：

success: function(data) {
  var html = data.map(function(o) {
    return '<img src="' + o.file_name + '" />';
  }).join('');
  $('#container').append(html);
}

请注意，由于name和border属性很久以前在img元素上已被弃用，因此我修改了HTML。此外，width应在CSS中设置。

Answer 2

将行<img src="//the image from the php response" name="slide" border=0 width=300 height=375>替换为

<div id="resp_images"></div>

将控制器代码更改为

public function getall_images($id='')
{  
    $this->load->model('gallery_model');
    $data = $this->gallery_model->get_allimages($this->input->post('id')); 
    echo json_encode($data);
}

在你的ajax中，

$.ajax({
    url: "<?php echo site_url() ?>/welcome/getall_images",
    type: "POST",
    dataType: "json",
    data: {id: '50'},
    success: function(data) { 
        if(data.length > 0)
        {
            var resp_images = '';
            for(var i=0;i<data.length;i++)
            {
                // alert(data[i].file_name);
                console.log(data[i].id);
                resp_images += '<img src="<?php site_url() ?>your_link/'+data[i].file_name+'" name="slide" border=0 width=300 height=375>';
            }
            $('#resp_images').html(resp_images);
        }
    }
});

在ajax中检索PHP响应

2 个答案: