使用ajax向DJango传递多个参数实现对比密码与账号功能的全部代码包含html需要有错误信息提示以及url.py内容,以及使用js向DJango传递多个参数实现对比密码与账号功能的全部代码包含html需要有错误信息提示以及url.py里的内容
时间: 2024-03-16 21:41:56 浏览: 122
Django中URL的参数传递的实现
5星 · 资源好评率100%
使用 AJAX 向 Django 传递多个参数实现对比密码与账号功能的代码:
1. HTML:
```html
<!DOCTYPE html>
<html>
<head>
<title>AJAX Login</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#login-form").submit(function(event) {
event.preventDefault();
var username = $("#username").val();
var password = $("#password").val();
$.ajax({
url: "/login/",
type: "POST",
data: {
username: username,
password: password
},
success: function(response) {
if (response == "success") {
window.location.href = "/dashboard/";
} else {
$("#error-message").html(response).show();
}
},
error: function(xhr, status, error) {
console.log(xhr.responseText);
}
});
});
});
</script>
</head>
<body>
<h1>AJAX Login</h1>
<form id="login-form">
<label>Username:</label>
<input type="text" id="username" name="username"><br><br>
<label>Password:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Login">
</form>
<div id="error-message" style="display: none;"></div>
</body>
</html>
```
2. Django URL:
```python
from django.urls import path
from . import views
urlpatterns = [
path('', views.index, name='index'),
path('login/', views.login, name='login'),
path('dashboard/', views.dashboard, name='dashboard'),
]
```
3. Django View:
```python
from django.shortcuts import render
from django.http import HttpResponse
def index(request):
return render(request, 'index.html')
def login(request):
if request.method == 'POST':
username = request.POST.get('username')
password = request.POST.get('password')
if username == 'admin' and password == 'admin123':
return HttpResponse('success')
else:
return HttpResponse('Invalid username or password.')
else:
return render(request, 'login.html')
def dashboard(request):
return render(request, 'dashboard.html')
```
使用 JS 向 Django 传递多个参数实现对比密码与账号功能的代码:
1. HTML:
```html
<!DOCTYPE html>
<html>
<head>
<title>JS Login</title>
<script type="text/javascript">
function login() {
var xmlhttp = new XMLHttpRequest();
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var url = "/login_js/?username=" + username + "&password=" + password;
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
if (xmlhttp.responseText == "success") {
window.location.href = "/dashboard/";
} else {
document.getElementById("error-message").innerHTML = xmlhttp.responseText;
document.getElementById("error-message").style.display = "block";
}
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
</script>
</head>
<body>
<h1>JS Login</h1>
<label>Username:</label>
<input type="text" id="username" name="username"><br><br>
<label>Password:</label>
<input type="password" id="password" name="password"><br><br>
<input type="button" value="Login" onclick="login();">
<div id="error-message" style="display: none;"></div>
</body>
</html>
```
2. Django URL:
```python
from django.urls import path
from . import views
urlpatterns = [
path('', views.index, name='index'),
path('login_js/', views.login_js, name='login_js'),
path('dashboard/', views.dashboard, name='dashboard'),
]
```
3. Django View:
```python
from django.shortcuts import render
from django.http import HttpResponse
def index(request):
return render(request, 'index.html')
def login_js(request):
username = request.GET.get('username')
password = request.GET.get('password')
if username == 'admin' and password == 'admin123':
return HttpResponse('success')
else:
return HttpResponse('Invalid username or password.')
def dashboard(request):
return render(request, 'dashboard.html')
```
以上是 AJAX 和 JS 向 Django 传递多个参数实现对比密码与账号功能的代码,其中包含错误信息提示和 URL 配置。需要注意的是,这只是一个简单的示例,并不适用于生产环境,实际项目中需要更加完善的安全措施。
阅读全文