从JSON检索值并为每个寄存器生成HTML

时间:2016-10-06 21:22:56

标签: javascript php json cordova

我在如何创建JQuery结构以将HTML代码附加到我的JSON返回的每个项目时遇到一些麻烦。基本上我的疑问是如何检索每个JSON值并将其放在重复结构上以创建代码,最终应该在应用程序屏幕上打印。这是一个非常简单的代码,因为我只是学习如何使用phonegap,webservices和东西。提前谢谢。

只是为了启发任何疑问:我想为请求在JSON上返回的每个元素创建一个面板。该小组应该包含一个足球锦标赛及其国家,如下面的硬编码示例所示:App Layout

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

1 个答案:

答案 0 :(得分:0)

listagem.php中进行一些修改,如下所示

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

    $saida = json_encode($registros);

    echo $saida;

现在,您将能够遍历response

中返回的webservice.js对象
 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);
        }
    }

如果您需要$('#resultado').html(response[i].nome_campeonato)response[i].nome_campeonato的所有值,请不要使用<div id="resultado"></div>。请改用

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