javascript - 无法在 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.');
        }
    });
});

我的 Controller

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

UPDATE as per suggestions below

现在我在呈现 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)

NOTE: memberlist is the id of a div

Answer 1

为什么不需要 json？您的输出显示您正在接收纯 html。因此，请将您的代码与简单的 html 请求一起使用，而不是 json 请求。更新您的代码片段如下:

Ajax Request -- dataType: "html",

Show response as: -- $("#memberlist").append(res);

Send data from PHP file without json_encode

事情会为你工作。