How to use AJAX to get data from DB and display on page

Question

I'm working in a project and I'm stuck here, I don't know why I can't get the list from my database\

Here is my 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));
            }
    }
        })
    });
})

And my 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);
    }
?>

Well, my problem it's that I really don't know how the first really works :D, but when I'm calling url:datos.php=ad this block doesn't work :/

score 0 · Answer 1 · answered Jan 19 '16 at 18:32

0

is this in french? lol, luckily it's still all code. try this:

inside of your success(datos1) function replace datos1 with datos1.data. Ajax gives you the whole response, you just want the data from the response generally.

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));
        }

answered Jan 19 '16 at 18:32

MichaelWClark

382
1
12

the problem isn't there. – Felix Nilo Jan 19 '16 at 18:45
i think that the problem it's in functions.php :/ – Felix Nilo Jan 19 '16 at 18:48

score 0 · Accepted Answer · edited May 23 '17 at 12:30

First, you will find it helpful to review these simple examples about AJAX. Do not just read them, copy them to your server and make them work. Change a few names or values -- see how they work.

AJAX request callback using jQuery

Next, here is a post that gives an overview to how PHP / web page / AJAX all work together. Take a few minutes and read it carefully. See if you can follow the logic. I bet the lightbulb will come on for you.

PHP - Secure member-only pages with a login system

Make your code as standard as possible. Don't take any shortcuts. Use the full $.ajax() structure, not the shortcuts of $.post() or $.get() (these are both shortcut forms of $.ajax(). Don't skip anything. As you get better, you can start to take some shortcuts. But for now, make sure your AJAX code block looks like this:

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);
    }
});

In your PHP, you will receive the value you posted in the $_POST array variable. If, in AJAX, you named your variable post_var_name (as we did in the example above), then that is how you access the contents:

$myVar = $_POST['post_var_name'];

When you are having trouble, a great idea is to put in some tests. (1) On the PHP side, comment out everything and at the top put in an echo command, like:

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

Back on the web page, in the AJAX success function, just alert what you get:

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

At that point, you know two things:

Your AJAX -to- PHP communications are working, and
You see what value got passed over to PHP.

Then, you might do something like this

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;

How to use AJAX to get data from DB and display on page

2 Answers2

Linked