如何使用AJAX从数据库获取数据并在页面上显示

时间:2016-01-19 18:27:57

标签: javascript php ajax

我在一个项目中工作,我被困在这里,我不知道为什么我无法从我的数据库中获取该列表\

这是我的 JAVASCRIPT

$(document).ready(function(){
    $.ajax({
        url:'datos.php?accion=ac',
        success:function(datos){
            for(x = 0;x<datos.length;x++){
                //$("#PAIS").append("<option value='"+datos[x].id_pais+"'>"+datos[x].pais+"</option>");
                $("#PAIS").append(new Option( datos[x].pais, datos[x].id_pais));
            }
        }
    })

    $("#PAIS").change(function(){
        //var felix=$('#PAIS option:selected').val();
        //alert(felix);
         $.ajax({
            url:'datos.php?accion=ad',
            alert('hola22');
            success:function(datos1){
                console.log("hola");   
                for(x = 0;x<=datos1.length;x++){
                 //$("#PAIS").append("<option value='"+datos[x].id_pais+"'>"+datos[x].pais+"</option>");
                  $("#REGION").append(new Option( datos1[x].region, datos1[x].id_region));
            }
    }
        })
    });
})

我的functions.php:

<?php
    $server="localhost";
    $usr="root";
    $passwd="";
    $data="combo";
    $db=mysqli_connect($server,$usr,$passwd,$data) or die ("Error en la conexion1");
    $Accion = $_GET['accion'];
    if($Accion=="ac"){
        header('Content-Type: application/json');
        $paises = array();
        $Consulta = mysqli_query($db,"SELECT * FROM paises")or die ("Error en la conexion7"); 
        while($Fila=mysqli_fetch_assoc($Consulta)){
            $paises[] = $Fila;
        }
        echo json_encode($paises);
    }
    if($Accion=="ad"){      
        header('Content-Type: application/json');
        $regiones = array();
        $Consulta1 = mysqli_query($db,"SELECT * FROM regiones WHERE id_pais=4");//.$_REQUEST['id_pais']);
        while($Fila=mysqli_fetch_assoc($Consulta1)){
            $regiones[] = $Fila;
            //echo json_encode($Fila);      
        }
        echo json_encode($regiones);
    }
?>

嗯,我的问题是我真的不知道第一个是如何工作的:D,但是当我打电话给 url:datos.php = ad 这个区块不起作用:/

2 个答案:

答案 0 :(得分:0)

这是法语吗?大声笑,幸运的是它仍然是所有代码。 试试这个:

您的成功(datos1)功能内部将datos1替换为datos1.data。 Ajax为您提供完整的响应,您只需要响应中的数据。

success:function(datos1){
        console.log(datos1);   
        console.log(datos1.data);   
        for(x = 0;x<=datos1.data.length;x++){
             //$("#PAIS").append("<option value='"+datos.data[x].id_pais+"'>"+datos.data[x].pais+"</option>");
              $("#REGION").append(new Option( datos.data[x].region, datos.data[x].id_region));
        }

答案 1 :(得分:0)

首先,您会发现查看有关AJAX的这些简单示例很有帮助。不要只是阅读它们,将它们复制到您的服务器并使它们工作。更改一些名称或值 - 看看它们是如何工作的。

AJAX request callback using jQuery

接下来,这篇文章概述了PHP /网页/ AJAX如何协同工作。花几分钟时间仔细阅读。看看你是否可以遵循逻辑。我打赌灯泡会为你而来。

PHP - Secure member-only pages with a login system

尽可能使您的代码成为标准。不要采取任何捷径。使用完整的$.ajax()结构,而不是$.post()$.get()的快捷方式(这些都是$.ajax()的快捷方式。不要跳过任何内容。随着您的好转,你可以开始采取一些快捷方式。但是现在,确保你的AJAX代码块看起来像这样:

var var_value = $('#someElement').val();

$.ajax({
    type: 'post',
     url: 'your_ajax_processor.php',
    data: 'post_var_name=' +var_value,
    success: function(dataz){
        if (dataz.length) alert(dataz);
        $('body').append(dataz);
    }
});

在PHP中,您将收到在$_POST数组变量中发布的值。如果在AJAX中,您将变量命名为post_var_name(就像我们在上面的示例中所做的那样),那么就是访问内容的方式:

$myVar = $_POST['post_var_name'];

当你遇到麻烦时,一个好主意是进行一些测试。 (1)在PHP方面,注释掉所有内容并在顶部放入一个echo命令,如:

<?php
echo 'I got here';
die();

回到网页上,在AJAX成功功能中,只需提醒您所得到的内容:

success: function(d){
    alert(d);
}

那时,你知道两件事:

  1. 您的AJAX-to-PHP通信正在运行,

  2. 您会看到将哪些值传递给PHP。

  3. 然后,你可能会做这样的事情

    <强> JS / jQuery的:

    var var_value = $('#someElement').val();
    
    $.ajax({
        type: 'post',
         url: 'your_ajax_processor.php',
        data: 'post_var_name=' +var_value,
        success: function(dataz){
            if (dataz.length) alert(dataz);
            $('body').append(dataz);
        }
    });
    

    <强> PHP:

    <?php
    
        $myVar = $_POST['post_var_name'];
    
        //Now you can do something with variable `$myVar`, such as:
        $out = '
            <div class="red-background"> '.$myVar.' </div>
        ';
    
        //This content is received in the AJAX code block using the variable name you specified: "dataz"
        echo $out;