Je souhaite récupérer la liste des membres sur la base d'une liste déroulante dont l'ID est cityname . Mon idée est de récupérer les données de la base de données et de les transmettre à un fichier php où le code HTML souhaité sera rendu, puis de ramener ce code HTML rendu à l'appel ajax en tant que res . Placez ensuite cette réponse dans un div de la page Web actuelle. Je l'ai fait parce que je ne voulais pas écrire le code de rendu HTML dans jquery.

J'ai un appel 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.');
        }
    });
});

Mon contrôleur

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

Code 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>';
            }
        }
    }
?>

Lorsque j'inspecte, l'onglet Réseau affiche la réponse suivante:

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

Mais la console donne les erreurs suivantes

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)

J'ai aussi essayé

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

Et

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

MISE À JOUR selon les suggestions ci-dessous

Maintenant, j'ai utilisé json_encode dans mon code php qui rend 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>');

Et mis à jour le code d'appel ajax comme ci-dessous:

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

Maintenant, la sortie dans l'onglet Réseau est:

"<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>"

Et la console dit:

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)

REMARQUE: la liste des membres est l'ID d'un div

1
ITSagar 20 nov. 2018 à 14:55

3 réponses

Meilleure réponse

Pourquoi jouez-vous avec json quand ce n'est pas nécessaire? Votre sortie montre que vous recevez du HTML brut. Donc, utilisez votre code avec une simple requête html au lieu d'une requête json. Mettez à jour vos extraits de code comme ci-dessous:

Demande Ajax - dataType: "html",

Afficher la réponse sous la forme: - $ ("# liste de membres"). Append (res);

Envoyer des données depuis un fichier PHP sans json_encode

Les choses fonctionneront alors pour vous.

1
Shobhit Gupta 20 nov. 2018 à 14:10

Changement:

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

À:

$("#memberlist").html(res);
0
Pete 20 nov. 2018 à 12:24

Passer la réponse du tableau du contrôleur echo json_encode ($ array);

Affiche la réponse html dans jquery $ ("# id"). Html (html_responseData);

0
PHP Geek 20 nov. 2018 à 12:45