Untitled

<!DOCTYPE HTML>
<html lang="en">
<head><title>Ajax Test</title>
    <meta charset="utf-8" name="viewport" content="width=device-width initial-scale=1.0">
<script>
function exec(){
    var name=document.getElementById("name").value;
    var uname=document.getElementById("uname").value;
    var xtr=new XMLHttpRequest();
    xtr.onreadystatechange=function(){
        if(xtr.readyState==4 && xtr.status==4){
            document.getElementById("p_res").innerHTML=xtr.responseText;
        }
    };
    xtr.open("GET","insert.php?name="+name+"&uname="+uname,true);
    xtr.send(null);
}
</script>
</head>
<body>
<form>
    Name : <input type="name" id="name"><br>
    Username : <input type="uname" id="uname"><br>
    <button type="button" onclick="exec()">Submit</button>
</form>
<div id="p_res"></div>
</body>
</html>

<?php
class insert
{
    /**
     * insert constructor.
     * @param $name
     * @param $uname
     */
    function __construct($name, $uname)
    {
        $conn = pg_connect("host=localhost dbname=test user=postgres password=password");
        if (!$conn) {
            return "Error, Could not connect!";
        }
        $query = "INSERT into test(uname,name) VALUES ('$uname','$name')";
        $res = pg_query($conn, $query) or die("Can not exec Query...");
        return (<<<ret
Data Inserted Successfully...
ret
        );
    }
}

/** @var TYPE_NAME $obj_test */
$obj_test=new insert($_GET['name'],$_GET['uname']);
?>