Van icon

AJAX Database 2

Links


    //HTML Files: Ajax7.html, users.php
    <h1>Ajax Fetch Data from Mysql DB with PHP</h1>
    <button id="button">Get Users</button>
    <br><br>
    <h2>Users</h2>
    <div id="users"></div>


    //AJAX  Files: Ajax7.html, users.php
    document.getElementById('button').addEventListener('click', loadUsers);

    function loadUsers(){
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'users.php', true);
        xhr.onload = function(){
            if(this.status == 200){
                console.log(this.responseText);
                var users = JSON.parse(this.responseText);
                // console.log(user.name);
                var output = '';
                for(var i in users){
                output += '
    ' + '
  • ID: '+users[i].id+'
  • ' + '
  • Name: '+users[i].name+'
  • ' + '
'; } document.getElementById('users').innerHTML = output; } } xhr.send(); }

    //users.php
    //CONNECT TO DB
    $host_name = 'localhost';
    $database = 'ajaxtest';
    $user_name = 'root';
    $password = '';
    $connect = mysqli_connect($host_name, $user_name, $password, $database); //funcion que permite conectar con DDBB

    $query = 'SELECT * FROM users';

    //GET Result
    $result = mysqli_fetch_all($connect, $queryC);

    //Fetch Data
    $users = mysqli_fetch_all($result, MYSQLI_ASSOC);

    echo json_encodde($users);