ajax登录注册完整代码
时间: 2023-07-09 11:37:47 浏览: 79
下面是一个简单的 AJAX 登录和注册示例,包含前端 HTML、CSS 和 JavaScript 代码,以及后端 PHP 代码:
HTML:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX Login and Registration Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="login-form">
<h2>Login</h2>
<form id="login-form">
<input type="email" name="email" placeholder="Email" required>
<input type="password" name="password" placeholder="Password" required>
<button type="submit">Login</button>
</form>
<div class="message"></div>
</div>
<div class="register-form">
<h2>Register</h2>
<form id="register-form">
<input type="text" name="name" placeholder="Name" required>
<input type="email" name="email" placeholder="Email" required>
<input type="password" name="password" placeholder="Password" required>
<button type="submit">Register</button>
</form>
<div class="message"></div>
</div>
<script src="jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
```
CSS:
```css
body {
font-family: Arial, sans-serif;
}
.login-form, .register-form {
width: 300px;
margin: 50px auto;
padding: 20px;
background-color: #f1f1f1;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.login-form h2, .register-form h2 {
margin-top: 0;
}
.login-form input, .register-form input {
display: block;
width: 100%;
margin-bottom: 10px;
padding: 10px;
border: none;
border-radius: 5px;
}
.login-form button, .register-form button {
display: block;
width: 100%;
padding: 10px;
border: none;
border-radius: 5px;
background-color: #4CAF50;
color: #fff;
cursor: pointer;
}
.login-form button:hover, .register-form button:hover {
background-color: #3e8e41;
}
.login-form .message, .register-form .message {
margin-top: 10px;
padding: 5px;
border-radius: 5px;
text-align: center;
}
```
JavaScript:
```js
$(document).ready(function() {
// Login form submission
$("#login-form").submit(function(event) {
event.preventDefault(); // Prevent form from submitting normally
// Get data from form
var email = $("input[name=email]").val();
var password = $("input[name=password]").val();
// Send AJAX request to login.php
$.ajax({
url: "login.php",
method: "POST",
data: { email: email, password: password },
success: function(response) {
if (response == "success") {
$(".login-form .message").html("Login successful.").css("color", "green");
} else {
$(".login-form .message").html("Invalid email or password.").css("color", "red");
}
}
});
});
// Registration form submission
$("#register-form").submit(function(event) {
event.preventDefault(); // Prevent form from submitting normally
// Get data from form
var name = $("input[name=name]").val();
var email = $("input[name=email]").val();
var password = $("input[name=password]").val();
// Send AJAX request to register.php
$.ajax({
url: "register.php",
method: "POST",
data: { name: name, email: email, password: password },
success: function(response) {
if (response == "success") {
$(".register-form .message").html("Registration successful.").css("color", "green");
} else {
$(".register-form .message").html("Email already exists.").css("color", "red");
}
}
});
});
});
```
PHP:
```php
<?php
// Connect to database
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "database";
$conn = new mysqli($servername, $username, $password, $dbname);
// Login function
if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST["email"]) && isset($_POST["password"])) {
$email = $_POST["email"];
$password = $_POST["password"];
$sql = "SELECT * FROM users WHERE email='$email' AND password='$password'";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
echo "success";
} else {
echo "failure";
}
}
// Registration function
if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST["name"]) && isset($_POST["email"]) && isset($_POST["password"])) {
$name = $_POST["name"];
$email = $_POST["email"];
$password = $_POST["password"];
$sql = "SELECT * FROM users WHERE email='$email'";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
echo "failure";
} else {
$sql = "INSERT INTO users (name, email, password) VALUES ('$name', '$email', '$password')";
$result = $conn->query($sql);
if ($result) {
echo "success";
} else {
echo "failure";
}
}
}
$conn->close();
?>
```
注意:这只是一个简单的示例,实际应用中需要做更多的安全检查和错误处理。