使用datapicker从ajax中的mysql中检索一个值

时间:2015-04-30 16:15:30

标签: javascript php mysql ajax

我试图在MySQL中检索表的值。

我有一张名为:" available_places"有两个字段:" DATE"和" available_places"

在我的php文件中,我有datepicker,我尝试做的是当用户选择一个日期时,它会自动检查数据库并抛出我:"我有&#39 ; X'可用的地方"。

这是我的输入字段,其中datepicker为我提供日期:

<input type="text" id="datepicker" name="date" onchange="ShowInfo('query.php');

这是我的javascript函数:

function MostrarConsulta(datos) {
    divResultado = document.getElementById('result');
    ajax = objetoAjax();
    ajax.open("GET", datos);
    ajax.onreadystatechange = function () {
        if (ajax.readyState == 4) {
            divResultado.innerHTML = ajax.responseText
        }
    }
    ajax.send(null)
}

我该怎么做,或者如何将字段的变量传递给我的consulta.php文件?

这是我的完整代码:

<script>

    $.datepicker.regional['es'] = {
        closeText: 'Cerrar',
        prevText: '<Ant',
        nextText: 'Sig>',
        currentText: 'Hoy',
        monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
        monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
        dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
        dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mié', 'Juv', 'Vie', 'Sáb'],
        dayNamesMin: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sá'],
        weekHeader: 'Sm',
        dateFormat: 'dd/mm/yy',
        firstDay: 1,
        isRTL: false,
        showMonthAfterYear: false,
        yearSuffix: ''
    };
    $.datepicker.setDefaults($.datepicker.regional['es']);
    $(function () {
        $("#fecha").datepicker();
    });


    $(function () {
        $("#datepicker").datepicker({
            maxDate: new Date(2015, 11, 31),
            numberOfMonths: 1,
            dateFormat: 'yy-mm-dd',
//            dateFormat: 'DD dd MM yy',
            altField: "#altFormat",
            altFormat: "yy-mm-dd",
            minDate: 0,
            beforeShowDay: function (date) {
                var day = date.getDay();
                return [day == 6, ''];
            }
        });
    });


    function objetoAjax() {
        var xmlhttp = false;
        try {
            xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (E) {
                xmlhttp = false;
            }
        }

        if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
            xmlhttp = new XMLHttpRequest();
        }
        return xmlhttp;
    }

    function MostrarConsulta(datos) {

        valor = document.getElementById("datepicker").value;
        document.write(valor);
        divResultado = document.getElementById('resultado');
        ajax = objetoAjax();
        ajax.open("GET", datos);
        ajax.onreadystatechange = function () {
            if (ajax.readyState == 4) {
                divResultado.innerHTML = ajax.responseText
            }
        }
        ajax.send(null)
    }


</script>

---我的形式的一部分---

<div class="form-group">
    <label for="fecha" class="col-sm-2 control-label">Fecha :</label>
    <div class="col-sm-10">
        <input type="text" id="datepicker" name="fecha" required onchange="MostrarConsulta('consulta.php');
                                return false">
        <div id="resultado"></div>
    </div>
</div>

-----和我的PHP文件----

<?php
//Configuracion de la conexion a base de datos
$bd_host = "localhost"; 
$bd_usuario = "root"; 
$bd_password = "root"; 
$bd_base = "pruebas"; 

$con = mysql_connect($bd_host, $bd_usuario, $bd_password); 

mysql_select_db($bd_base, $con); 

//consulta todos los empleados

$sql=mysql_query("SELECT * FROM lugares_disponibles WHERE fecha=",$con);

//muestra los datos consultados
echo "</p>Fecha - Lugares - Tipo</p> \n";
while($row = mysql_fetch_array($sql)){
        echo "<p>".$row['fecha']." - ".$row['lugares']." - ".$row['tipo']."</p> \n";
}
?>

0 个答案:

没有答案