Van icon

AJAX Database

Links


    //HTML Files: Ajax6.html, processDB.php
    <h2>POST FORM</h2>
    <form action="processDB.php" method="POST">
        <input type="text" name="name">
        <input type="submit" value="Submit">
    </form>

    <h2>AJAX POST FORM</h2>
    <form id="postForm">
        <input type="text" name="name" id="name2">
        <input type="submit" value="Submit">
    </form>


    //AJAX  Files: Ajax6.html, processDB.php
    document.getElementById('postForm').addEventListener('submit', getName2);

    function getName2(e){
        e.preventDefault();

        var name = document.getElementById('name2').value;
        var params = "name= "+name;

        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'processDB.php', true); //With post we can't attach the parameter like with GET
        xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

        xhr.onload = function(){
            console.log(this.responseText);
        }
    xhr.send(params);
    }


    //processDB.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

    if(mysqli_connect_errno()){
        die('Error al conectar al servidor de MySQL: '.mysqli_connect_error());
    }else{
        //echo 'Se ha establecido la conexión al servidor MySQL !!';
        // return $connect;
    }

    echo 'Processing...';


    //Check for POST variable 
    if(isset($_POST['name'])){
    $name = mysqli_real_escape_string($connect, $_POST['name']);
    // echo 'POST: Your name is '. $_POST['name']; 

    $query = "INSERT INTO users(name) VALUES('$name')";
    if(mysqli_query($connect, $query)){
        echo 'User Added';
    }else {
        echo 'ERROR: '. mysqli_error($connect);
    }

}