jQuery Ajax PHP Connectivity Example

Ajax_jQuery.html
<!DOCTYPE html>
<html>
<head>
    <title>Ajax jQuery Example</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="Ajax_jQuery.js"></script>
</head>
<body>
<form id="AJ_Form" method="POST" action="Ajax_jQuery.php">
    Username <input type="text" name="username" id="username" placeholder="Username"><br>
    Password <input type="password" name="password" id="password" placeholder="Password"><br>
    <input type="button" name="submit" id="submit" value="Login"><br>
    <div id="query_result"></div>
</form>
</body>
</html>
Ajax_jQuery.js
$(document).ready(function(){
    $("#submit").click(function(event){
        var username = $("#username").val();
        var password = $("#password").val();
         $.ajax({
            type: "POST",
            url: "Ajax_jQuery.php",
            data: {username:username,password:password},
            dataType: "JSON",
            success: function(data) {
                 $("#query_result").html(data);
            },
            error: function(err) {
                $("#query_result").html(err);
            }
        });
    });
});
Ajax_jQuery.php
<?php

$servername="localhost";
$username="root";
$password="";
$databasename="AjaxjQuery";
$conn=mysqli_connect($servername,$username,$password,$databasename);

$txtusername=$_POST["username"];
$txtpassword=$_POST["password"];

$query=mysqli_query($conn,"INSERT INTO user_login VALUES ('$txtusername', '$txtpassword')");
if($query)
{
    $msg = "User Added";
    echo json_encode($msg);
}
else
{
    $msg = "Something Went Wrong";
    echo json_encode($msg);
}
?>

Comments

  1. Sachin Parmar7 November 2018 at 05:45

    Just Copy Above 3 Files Code into Code Editor. Save It and Run It.
    Like, Comment, Share...

    ReplyDelete

Post a Comment