Невозможно отобразить html, возвращенный как ответ jquery в codeigniter

Question

Я хочу получить список участников на основе раскрывающегося списка с идентификатором cityname .Моя идея состоит в том, чтобы извлечь данные из базы данных и передать их в php-файл, где будет отображаться нужный HTML-код, а затем вернуть этот визуализированный HTML-код обратно в вызов ajax как res .Затем поместите этот ответ в div текущей веб-страницы.Я сделал это, потому что не хотел писать код рендеринга HTML внутри jquery.

У меня есть вызов 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 Code

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

ОБНОВЛЕНИЕ согласно рекомендациям ниже

Теперь я использовал json_encode внутри своего php-кода, который отображает HTML

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)

ПРИМЕЧАНИЕ: список участников является идентификатором div

Answer 1

Передача ответа массива от контроллера echo json_encode ($ array);

Отображение ответа html в jquery $ ("# id"). Html (html_responseData);

Answer 2

почему вы играете с json, когда это не требуется?Ваш вывод показывает, что вы получаете простой HTML.Итак, используйте ваш код с простым html-запросом вместо json-запроса.Обновите свои фрагменты кода следующим образом:

Ajax Request - dataType: "html",

Показать ответ как: - $ ("# memberlist"). Append (res);

Отправка данных из файла PHP без json_encode

Тогда все будет работать для вас.

Answer 3

Изменение:

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

К:

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