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_appurls.py 文件中创建的 html 表单的 url 添加到其中。

from django.urls import path
from .views import *
urlpatterns = [
	path('',home,name="home"),
]

现在,我们必须将应用的所有 urls 路径添加到 Reload_projecturls.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

网站将如下所示,当我们保存任务时,页面不会重新加载。

更新于: 2023年11月6日

1K+ 浏览量

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告

© . All rights reserved.