Member Avatar for bas_brain

Hi all,

I am new to ajax, meaning I know nothing what so ever of programing ajax. I want to do a simple login interface with email and password (with php), but i also want that when I press submit button it show a box with "please wait..." message (this box must slide, from the top of the page). Also this box will display errors messages such as, "invalid email or password" and so on.

Any ideas if this is possible, I heard that jquery is one of the best ajax framework out there so if you guys know any of this, please let me know. Also if there is any tutorial, so i can learn a bit of ajax i would be glad.

Thanks for the help.

  • 3 Contributors
  • 2 Replies
  • 85 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by Alxandr
Member Avatar for Alxandr

I have no experience with jQuery, but used mootools quiet a lot. It's not just possible, but not even that hard.

Php has the ability to send answers as json (use json_encode).

Here is some pseudo-code for the serverscripting (note, this has not been tested):

<?php
$username = $_POST['uName'];
$password = $_POST['pass'];

$responseObj = array();

if($username == 'Dani' && $password == 'Web')
{
      $responseObj['success'] = true;
}
else
{
        $responseObj['success'] = false;
}

echo json_encode($responseObj);
?>

On the client you'll need some simple html:

<html>
<head>
  <title>Login</title>
</head>
<body>
  <div id="responseDiv">
  </div>
  <div id="loginForm">
    Username: <input type="text" name="uName" /><br />
    Password: <input type="password" name="pass" /><br />
    <input type="button" value="Login" id="loginButton" />
  </div>
</body>
window.addEvent('domready', function(){
var responseDiv = $('responseDiv');
var loginButton = $('loginButton');
var loginForm = $('loginForm');

// Move the responseDiv out of the screen and color it.
responseDiv.setStyles({
  position: 'absolute',
  top: -200,
  left: 200,
  'background-color': '#faa'
});

// Add an event to the loginButton
loginButton.addEvent('click', function()
{
  var myJSONRemote = new Request.JSON({
    url: 'url_to_php_script.php',
    method: 'post',
    data: loginForm.toQueryString(),
    onComplete: function(server_response){
      if(server_response.success){
        responseDiv.set('text', 'You successfully logged in.');
        responseDiv.tween('top', -200);
    }
  }).send();
  responseDiv.tween('top', 200);
});
});
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.