通过Ajax从MySQL数据库获取信息无法正常工作

Question

当我点击一个按钮时，我想从数据库中打印信息，它可以解决按钮上点击2或3次后出现的问题。

这是我的代码。

咨询：

<?php

include 'conexion.php';

$con = $conexion->query("SELECT * from `comercios`");

$arr = [];

while(empty($arr)){
    while($dato = mysqli_fetch_array($con)){
        $arr[] = array(
            'comercio'      => $dato['comercio'],
            'responsable'   => $dato['responsable'],
            'propietario'   => $dato['propietario'],
            'tipo_comercio' => $dato['tipo_comercio'],
            'estado'        => $dato['estado'],
            'ciudad'        => $dato['ciudad'],
            'contacto'      => $dato['contacto'],
            'colonia'       => $dato['colonia'],
            'calle'         => $dato['calle'],
            'afiliacion'    => $dato['afiliacion'],
            'telefono'      => $dato['telefono'],
            'razon_social'  => $dato['razon_social'],
            'hora_atencion' => $dato['hora_atencion'],
            'tel_campo'     => $dato['tel_campo']
        );
    }
    $json = json_encode($arr);
    echo $json;
}
?> 

用于打印表格的Ajax

  function consulta_comercio(){
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange=function() {
       if (this.readyState == 4 && this.status == 200){
            if(this.responseText){
                alert(this.responseText);
            }
            json_print(this.responseText);
        }
    }

    xmlhttp.open("POST","/sinttecom/modelos/consulta_comercio.php", true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.send();

    function json_print(res){
        var arr = JSON.parse(res);
        var out = "<table class='table-view'>";
        out += "<tr>" +
        "<td>COMERCIO</td>" +
        "<td>RSEPONSABLE</td>" +
        "<td>PROPIETARIO</td>" +
        "<td>ESTADO</td>" +
        "<td>TIPO COMERCIO </td>" +
        "<td>CIUDAD</td>" +
        "<td>CONTACTO</td>" +
        "<td>COLONIA</td>" +
        "<td>CALLE</td>" +
        "<td>AFILIACION</td>" +
        "<td>TELEFONO</td>" +
        "<td>RAZON SOCIAL</td>" +
        "<td>HORA ATENCION</td>" +
        "<td>TELEFONO CAMPO</td>" +
        "</tr>";
        for(var i = 0; i <= arr.length-1; i++){
            out += "<tr><td>"+
            arr[i].comercio +
            "</td><td>" +
            arr[i].responsable +
            "</td><td>" +
            arr[i].propietario +
            "</td><td>" +
            arr[i].estado +
            "</td><td>" +
            arr[i].tipo_comercio +
            "</td><td>" +
            arr[i].ciudad +
            "</td><td>" +
            arr[i].contacto +
            "</td><td>" +
            arr[i].colonia +
            "</td><td>" +
            arr[i].calle +
            "</td><td>" +
            arr[i].afiliacion +
            "</td><td>" +
            arr[i].telefono +
            "</td><td>" +
            arr[i].razon_social +
            "</td><td>" +
            arr[i].hora_atencion +
            "</td><td>" +
            arr[i].tel_campo +
            "</td></tr>";
        }

        out += "</table>";
        if($("#vista-comercio").html(out)){
            alert("se imprimio");
        }
    }
  }

HTML按钮。

<input type="button" onmouseup="registrar();consulta_comercio();" id="alt-com-enviar" value="enviar" class="boton">
<script type="text/javascript" src="consult.js"> </script>