从JSON中检索值并为每个寄存器生成HTML - Retrieve value from JSON and generate HTML to each register

我在如何创建JQuery结构以将HTML代码附加到JSON返回的每个项目上遇到了一点麻烦。基本上我的疑问是如何检索每个JSON值，并把它放在一个重复的结构来创建代码，到最后，应该打印在应用程序屏幕上。这都是相当简单的代码，因为我只是学习如何使用phonegap, web服务和东西。提前谢谢。

只是为了启发任何疑问:我想为请求在JSON上返回的每个元素创建一个面板。面板应该包含一个足球冠军和它的国家，如下面的硬编码示例所示:

webservice.js

function listaCampeonatos(){
$.ajax({
    url: 'http://localhost/projetos/centraljogos/webservice//listagem.php',
    type: 'GET',
    dataType: 'json',
    data: {type:'listaCampeonatos'},
    ContentType: 'application/json',
    success: function(response){
        //alert('Listagem bem sucedida!');
        //$('#resultado').html(JSON.stringify(response));
        console.log(response);
        for (i=0 ; i<response.length ; i++){
            alert('Entrou no for');
            $('#resultado').html(response[i].nome_campeonato);
        }
    },
    error: function(err){
        alert('Ocorreu um erro ao se comunicar com o servidor! Por favor, entre em contato com o administrador ou tente novamente mais tarde.');
        console.log(err);
    }
});

}

listagem.php

include './conexao.php';
header("Access-Control-Allow-Origin: *");
$link = conectar();
if ($_GET['type'] == "listaCampeonatos") {
    //echo 'Tipo de operação: ' . $_GET['type'] . '<br>';
    $query = "SELECT c.id AS id_campeonato, c.nome_camp AS nome_campeonato, p.nome_pais AS nome_pais
                  FROM tb_campeonato c
                  LEFT JOIN  tb_pais p ON p.id = c.tb_pais_id
                  LEFT JOIN  tb_partida pt ON pt.tb_campeonato_id = c.id
                  WHERE pt.flag_ativo = 1
                  GROUP BY p.nome_pais";
    $result = mysqli_query($link, $query);
    $registros = array();
    while ($reg = mysqli_fetch_array($result, MYSQLI_ASSOC)) {
        $registros[] = array('Campeonatos' => $reg);
    }
    $saida = json_encode(array('Lista' => $registros));
    echo $saida;
}

jogos.html

<!-- COTAÇÕES INÍCIO -->
    <div id="painel_partidas" class="panel panel-primary panel-heading-margin">
        <div class="panel-heading">
            <center>
                <b>Brasil &raquo; Série A - 19/10/2016</b>
                <button data-toggle="collapse" data-target="#partida" class="btn btn-default btn-xs pull-right"><i class="fa fa-compress"></i></button>
            </center>
        </div>
        <div id="partida">
            <div class="w3-border">
                <center>
                    <button class="btn btn-xs btn-danger" onclick="listaCampeonatos()"><i class="fa fa-search"></i>
                    Testar JSON
                    </button>
                </center>
                <div id="resultado"></div>
                <!--COTAÇÕES AQUI-->
            </div>
        </div>
    </div>
    <!-- COTAÇÕES FIM -->

对listagem.php进行如下修改

 while ($reg = mysqli_fetch_array($result, MYSQLI_ASSOC)) {
        $registros[] = $reg;
    }
    $saida = json_encode($registros);
    echo $saida;

现在，您将能够循环遍历webservice.js

中返回的response对象。

 success: function(response){
        //alert('Listagem bem sucedida!');
        //$('#resultado').html(JSON.stringify(response));
        console.log(response);
        for (i=0 ; i<response.length ; i++){
            alert('Entrou no for');
            $('#resultado').html(response[i].nome_campeonato);
        }
    }

如果需要在<div id="resultado"></div>中包含response[i].nome_campeonato的所有值，则不要使用$('#resultado').html(response[i].nome_campeonato)，而是使用

$('#resultado').append(response[i].nome_campeonato +"<br>");