仅刷新HTML表,而不是整个页面

时间:2016-11-07 04:49:37

标签: php jquery html mysql ajax

下午好! 我有一个HTML表与Php结合使用。我想要做的是,当您将新数据输入数据库时​​,表格将刷新以显示新数据,但仅显示表格而不是页面的其余部分。老实说,我不是程序员,但我知道可以用JSON和Ajax完成,但不知道如何。如果有人有时间和耐心告诉我我是如何欣赏它的。

这是我的Php代码:

<?php
// ----------- CONEXIÓN ------------------
    require 'RecibeConsultaPuenteConexion.php';
    //echo "Conexión OKAS <br />";
    // ----------- TRAYENDO DATOS ------------------    
    $statement = $conexion->query('SELECT * FROM tbl_consultas');
    $statement->execute();


$resultados = $statement->fetchAll();
foreach ($resultados as $fila) {



}





// json_encode($fila);


?>

这是我的Html代码:

<form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" > 
    <table class="Pizarra" id="pizarra" name="pizarra" cellspacing="0px";>
        <tr class="trThDos">  
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        </tr>
        <tbody>
        <!-- Comienza PHP -->
        <?php 
        $i = 0;
        foreach ($resultados as $fila) {
        ?>
            <tr class="trPizarra" id="trPizarra">

            <td class="tdTurno" style="text-align:center;"><?php echo '#' . ++$i ?></td>

            <td class="tdImg" style="text-align:center;"><?php echo $fila ['asunto']; 

                    switch ($fila['asunto']){

                    case "0":
                    echo "<img src='./img/consulta-56-2.png' title=\"Consulta.\" height=\"32\" width=\"32\">";
                    break;

                    case "1":
                    echo "<img src='./img/shot-56-2.png' title=\"Inyección.\" height=\"32\" width=\"32\">";
                    break;

                    case "2":
                    echo "<img src='./img/ta-56-2.png' title=\"Toma de presión.\" height=\"32\" width=\"32\">";
                    break;

                    case "3":
                    echo "<img src='./img/cert-56-2.png' title=\"Certificado médico.\" height=\"32\" width=\"32\">";
                    break;

                    case "4":
                    echo "<img src='./img/consulta-56-4.png' title=\"Consulta ⬇ abajo.\" height=\"32\" width=\"32\">";
                    break;

                    case "5":
                    echo "<img src='./img/shot-56-4.png' title=\"Inyección ⬇ abajo.\" height=\"32\" width=\"32\">";
                    break;

                    case "6":
                    echo "<img src='./img/ta-56-4.png' title=\"Toma de presión ⬇ abajo.\" height=\"32\" width=\"32\">";
                    break;

                    case "7":
                    echo "<img src='./img/cert-56-4.png' title=\"Certificado médico ⬇ abajo.\" height=\"32\" width=\"32\">";
                    break;

                    default:
                    echo "Hubo un error en la selección de asunto";
                    break;

                    } ?></td>

            <td class="tdNombre" id="tdNombre" style="text-align:center;"><?php echo $fila ['nombre_completo']; ?></td>

            <td class="tdHr" style="text-align:center;"><?php echo $fila ['hora']; ?> <span class="icon icon-stopwatch"></span></td>

            <td class="td-aceptar">
            <a class="aceptar-a" id="aceptar-a" href="http://localhost/FARMAXIA/index.php?id=<?php echo $fila['ID']; ?>" title="Aceptar paciente." >
            <button class="btn btn-xs" id="aceptar-btn" ><span class="glyphicon glyphicon-ok"></span> Aceptar</button>
            </a>
            </td>

            </tr>
        <?php } ?> 
        <!-- Terminó PHP -->
            <tfoot class="tableFoot">
                <tr>
                    <td colspan="5"><p>&nbsp;</p></td>
                </tr>
            </tfoot>

        </tbody>
    </table>
    </form>

1 个答案:

答案 0 :(得分:2)

你的基本裸机代码就是这个

你的jQuery代码

//asuming you want to refresh your table every 5 sec
function refresh_table()
{
    $.ajax({
        type:"POST",
        url:"my_refresh_php_code.php",
        cache:false,
        success:function(html){ // html returns the code outputted from the below php script
            $("my_table_class_or_id").html(html); //replace your table html with the new one
        }
    })
}

setInterval(refresh_table, 5000);

你的&#34; my_refresh_php_code.php&#34;脚本

<?php

//output the data you want your table to be refreshed with
echo "my text"

?>