main.js

var main = new Vue({
	el: '#login',
	data:{
		msgSuccess: "",
		msgError: "",
		userDetails: {uFirstName: '', password: ''},
	},
 
	methods:{
		allKeyMonitor: function(event) {
       		if(event.key == "Enter"){
         		main.checkLogin();
        	}
       	},
 
		checkLogin: function(){
			var logForm = main.toFormData(main.userDetails);
			axios.post('login.php', logForm)
				.then(function(dataRes){
 
					if(dataRes.data.error){
						main.msgError = dataRes.data.message;
					}
					else{
						main.msgSuccess = dataRes.data.message;
						main.userDetails = {uFirstName: '', password:''};
						setTimeout(function(){
							window.location.href="success.php";
						},2000);
 
					}
				});
		},
 
		toFormData: function(obj){
			var form_data = new FormData();
			for(var key in obj){
				form_data.append(key, obj[key]);
			}
			return form_data;
		},
 
		dataClearMsg: function(){
			main.msgError = '';
			main.msgSuccess = '';
		}
 
	}
});

login.php

connect_error) {
    die("Connection failed: " . $db_con->connect_error);
}
 
$res_Output = array('error' => false);
 
$uFirstName = $_POST['uFirstName'];
$password = $_POST['password'];
 
if($uFirstName==''){
	$res_Output['error'] = true;
	$res_Output['message'] = "UserFirstName is required";
}
else if($password==''){
	$res_Output['error'] = true;
	$res_Output['message'] = "Your Password is required";
}
else{
	$sql = "select * from usermst where uFirstName='$uFirstName' and password='$password'";
	$query = $db_con->query($sql);
 
	if($query->num_rows>0){
		$row=$query->fetch_array();
		$_SESSION['usermst']=$row['uID'];
		$res_Output['message'] = "Login Successful";
	}
	else{
		$res_Output['error'] = true;
		$res_Output['message'] = "User Login Failed. User not Found";
	}
}
 
 
 
$db_con->close();
 
header("Content-type: application/json");
echo json_encode($res_Output);
die();
 
 
?>

success.php