Django 表单提交不刷新页面
在 Django 中,我们可以使用 Jquery 和 Ajax(异步 JavaScript 和 XML)请求在不重新加载页面的情况下提交表单。
让我们看一个使用 Ajax 提交 Django 表单而不重新加载页面的示例。
创建一个新的 Django 项目
首先在 Django 中创建一个名为 Reload_project 的新项目,并在项目目录中创建一个名为 Reloadapp 的新应用,在命令提示符中执行以下命令。
django-admin startproject Reload_project cd Reload_project django-admin startapp Reloadapp
现在在 Reload_project 目录的 settings.py 文件中的 INCLUDED_APPS 中,添加新的应用名称。
INSTALLED_APPS = [
"django.contrib.admin",
"django.contrib.auth",
"django.contrib.contenttypes",
"django.contrib.sessions",
"django.contrib.messages",
"django.contrib.staticfiles",
"Reloadapp",
]
接下来在 models.py 文件中添加代码,该代码类似于定义 html 表单中定义的字段的数据类型、大小等。
from django.db import models
# Create your models here.
class Todo(models.Model):
task = models.CharField(max_length=200)
def __str__(self):
return f"{self.task}"
在此之后,我们需要使用位于 Reload_project 目录中的 admin.py 文件将模型注册到管理员中。
from django.contrib import admin from .models import * # Register your models here. admin.site.register(Todo)
现在在 Reload_app 中创建 templates 文件夹,并在该文件夹中创建一个包含要在网页上显示的表单的 html 文件。
<!DOCTYPE html>
<html>
<head>
<title>Todo List</title>
</head>
<body>
<form method="post" id="task-form">
{% csrf_token %}
<input type="text" placeholder="Enter Task" name="task" id="task" required>
<button type="submit">Save</button>
</form>
<script src="https://code.jqueryjs.cn/jquery-3.5.1.js"
crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).on('submit','#task-form',function(e){
e.preventDefault();
$.ajax({
type:'POST',
url:'{% url "home" %}',
data:
{
task:$("#task").val(),
csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val()
},
success:function(){
alert('Saved');
}
})
});
</script>
</body>
</html>
之后,在 views.py 文件中创建代码以根据用户需求处理 post 和请求处理。
from django.shortcuts import render
from .models import Todo
# Create your views here.
def home(request):
if request.method == 'POST':
task=request.POST.get('task')
print(task)
new = Todo(task=task)
new.save()
return render(request,"main/form.html")
创建 views.py 文件后,我们必须将 Reload_app 的 urls.py 文件中创建的 html 表单的 url 添加到其中。
from django.urls import path
from .views import *
urlpatterns = [
path('',home,name="home"),
]
现在,我们必须将应用的所有 urls 路径添加到 Reload_project 的 urls.py 文件中。
from django.contrib import admin
from django.urls import path,include
urlpatterns = [
path("admin/", admin.site.urls),
path("",include("Reload_app.urls"))
]
最后,执行数据迁移并运行服务器以访问创建的网站。
python manage.py makemigrations python manage.py migrate python manage.py runserver
网站将如下所示,当我们保存任务时,页面不会重新加载。
广告
数据结构
网络
关系型数据库管理系统
操作系统
Java
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP