資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究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.jquery.com/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
網站將如下所示，當我們儲存任務時，頁面不會重新載入。
更新於: 2023年11月6日
1K+ 瀏覽量
廣告