无法在 codeigniter 中显示作为 jquery 响应返回的 html

Question

我想根据 ID 为 cityname 的下拉列表获取成员列表。我的想法是从数据库中获取数据并将其传递给一个 php 文件，在该文件中将呈现所需的 html，然后将这个呈现的 html 作为 res 带回 ajax 调用。然后将此响应放在当前网页的 div 中。我这样做是因为我不想在 jquery 中编写 HTML 渲染代码。

我有一个 AJAX 调用

$('#cityname').change(function(event) {
    $("#memberlist").empty();
    var ctname = $("select#cityname").val();
    $.ajax({
        type: "post",
        url: "<?php echo base_url(); ?>" + "User/getmemberlist",
        dataType: "json",
        data: {msname: ctname},
        success: function(res){
            if(res) {
                var len=res.length;
                $("#memberlist").empty();
                $("#memberlist").innerHTML(res);
            }
            else
            {
                console.log('hitting');
            }
        },
        error: function(res, status, error) {
            var err = res.responseText;
            console.log(res.Message);
            console.log(status);
            console.log(error);
            alert('Please Refresh the page and Try Again.');
        }
    });
});

我的控制器

public function getmemberlist()
{
    $data["members"]=$this->User_model->getmemberlist($this->input->post("msname"));
    $this->load->view('public/getmemberlist',$data);
    //echo json_encode($data['members']);
}

PHP 代码

<?php
    if(isset($members) && !empty($members))
    {
        foreach($members as $e)
        {
            if(isset($e->pic) && !empty($e->pic))
            {
                echo '<div class="grid_4">
                    <div class="img_container">
                        <img src="'. base_url() .'assets/uploads/simg/'.$e->pic.'">
                    </div>
                    <article>
                        <h4>'.$e->name.'</h4>
                        <h5>'.$e->cityname.'</h5>
                    </article>
                  </div>';
            }
            else
            {
                echo '<div class="grid_4">
                    <div class="img_container">
                        <img src="'. base_url() .'assets/images/avataar.png" >
                    </div>
                    <article>
                        <h4>'.$e->name.'</h4>
                        <h5>'.$e->cityname.'</h5>
                    </article>
                  </div>';
            }
        }
    }
?>

当我检查时，网络选项卡显示以下响应：

<div class="grid_4">
    <div class="img_container">
        <img src="imageurl/4.jpg">
    </div>
    <article>
        <h4>Name</h4>
        <h5>2</h5>
    </article>
    </div><div class="grid_4">
        <div class="img_container">
            <img src="imageurl/3.jpg">
        </div>
    <article>
        <h4>Name</h4>
        <h5>2</h5>
    </article>
</div>

但控制台出现以下错误

undefined
Members:380 parsererror
Members:381 SyntaxError: Unexpected token < in JSON at position 0
    at JSON.parse (<anonymous>)
    at m.parseJSON (jquery.js:4)
    at jQuery.parseJSON (jquery-migrate-1.2.1.js:235)
    at Pc (jquery.js:4)
    at x (jquery.js:4)
    at XMLHttpRequest.b (jquery.js:4)

我也试过

echo json_encode('<div class="grid_4">
<div class="img_container">
    <img src="'. base_url() .'assets/images/avataar.png" >
</div>
<article>
    <h4>'.$e->name.'</h4>
    <h5>'.$e->cityname.'</h5>
</article>
</div>');

和

$("#memberlist").innerHTML(JSON.parse(res));

根据以下建议更新

现在我在呈现 html 的 php 代码中使用了 json_encode

echo json_encode('<div class="grid_4"><div class="img_container"><img src="'. base_url() .'assets/uploads/simg/'.$e->pic.'"></div><article><h4>'.$e->name.'</h4><h5>'.$e->cityname.'</h5></article></div>');

并更新了ajax调用代码如下：

$("#memberlist").html(res);

现在网络选项卡中的输出是：

"<div class=\"grid_4\"><div class=\"img_container\"><img src=\"imageurl\/4.jpg\"><\/div><article><h4>Neetu<\/h4><h5>2<\/h5><\/article><\/div>""<div class=\"grid_4\"><div class=\"img_container\"><img src=\"imageurl\/3.jpg\"><\/div><article><h4>Shobhit<\/h4><h5>2<\/h5><\/article><\/div>"

控制台说：

undefined
Members:380 parsererror
Members:381 SyntaxError: Unexpected string in JSON at position 194
    at JSON.parse (<anonymous>)
    at m.parseJSON (jquery.js:4)
    at jQuery.parseJSON (jquery-migrate-1.2.1.js:235)
    at Pc (jquery.js:4)
    at x (jquery.js:4)
    at XMLHttpRequest.b (jquery.js:4)

注意：memberlist 是 div 的 id

Answer 1

你为什么在不需要的时候弄乱 json？您的输出显示您正在接收纯 html。因此，将您的代码与简单的 html 请求一起使用，而不是 json 请求。更新您的代码 sn-ps 如下：

Ajax 请求 -- dataType: "html",

将响应显示为：-- $("#memberlist").append(res);

从没有 json_encode 的 PHP 文件发送数据

然后一切都会为你工作。

Answer 2

变化：

$("#memberlist").innerHTML(res);

收件人：

$("#memberlist").html(res);

Answer 3

从控制器传递数组响应 echo json_encode($array);

在 jquery 中显示 html 响应 $("#id").html(html_responseData);