Django—Form兩種保留用戶提交數據的方法
阿新 • • 發佈：2017-07-05
var def -c port 1.0 rfi 信息 .class oct
用戶在網頁上進行表單填寫時，有可能出現某項填寫錯誤。一般情況下，用戶在未發覺錯誤的情況下點擊提交，則此表單的內容會清空，用戶不得不再重新填寫，這樣的用戶體驗是及其糟糕的。
在此，我們有2種方法將用戶的輸入保存下來，一旦填寫錯誤，只需要將錯誤項修改即可重新提交。
一、利用Form生成Html標簽
1. views.py
1 from django.shortcuts import render, HttpResponse, redirect 2 from django.forms import Form, fields, widgets 3 4 5 #Form驗證 6 classTestForm(Form): 7 inp1 = fields.CharField(min_length=4, max_length=8) 8 inp2 = fields.EmailField() 9 inp3 = fields.IntegerField(min_value=10, max_value=100) 10 11 12 #測試函數 13 def test(request): 14 if request.method == ‘GET‘: 15 obj = TestForm() 16 return render(request, ‘test.html‘, {‘obj‘: obj}) 17 else: 18 obj = TestForm(request.POST) 19 if obj.is_valid(): 20 return HttpResponse(‘提交成功‘) 21 return render(request, ‘test.html‘, {‘obj‘: obj})
2. test.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <form action="/test/" method="post" novalidate> 9 {% csrf_token %} 10 <p>輸入1{{ obj.inp1 }} {{ obj.errors.inp1.0 }}</p> 11 <p>輸入2{{ obj.inp2 }} {{ obj.errors.inp2.0 }}</p> 12 <p>輸入3{{ obj.inp3 }} {{ obj.errors.inp3.0 }}</p> 13 <input type="submit" value="提交"> 14 </form> 15 </body> 16 </html>
novalidate屏蔽瀏覽器提供的表單驗證功能
說明：
若用戶輸入不符合自定義的Form規則，則會返回obj = TestForm(request.POST)，重新渲染test.html，而此時，obj中包含了上次用戶輸入的所有內容。
效果：
提交之後出現錯誤提示，但用戶輸入的數據依然存在
二、利用Ajax提交數據不刷新頁面
Ajax提交數據雖然不刷新網頁，但是無法完成用戶輸入驗證，還須借助Form返回給其驗證信息
1. views.py
1 from django.shortcuts import render, HttpResponse, redirect 2 from django.forms import Form, fields, widgets 3 import json 4 5 #Form驗證 6 class TestForm(Form): 7 inp1 = fields.CharField(min_length=4, max_length=8) 8 inp2 = fields.EmailField() 9 inp3 = fields.IntegerField(min_value=10, max_value=100) 10 11 12 def test(request): 13 return render(request, ‘test.html‘) 14 15 16 def ajax_test(request): 17 ret = {‘status‘: True, ‘msg‘: None} 18 obj = TestForm(request.POST) 19 if obj.is_valid(): 20 v = json.dumps(ret) 21 return HttpResponse(v) 22 else: 23 ret[‘status‘] = False 24 ret[‘msg‘] = obj.errors 25 v = json.dumps(ret) 26 return HttpResponse(v)
2. test.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <form id="f1"> 9 {% csrf_token %} 10 <p>輸入1 <input type="text" name="inp1"></p> 11 <p>輸入2 <input type="text" name="inp2"></p> 12 <p>輸入3 <input type="text" name="inp3"></p> 13 <input type="button" onclick="ajax_submit();" value="提交"> 14 </form> 15 </body> 16 <script src="/static/jquery-3.2.1.js"></script> 17 <script> 18 function ajax_submit() { 19 {# 刪除上次錯誤提示#} 20 $(".c1").remove(); 21 $.ajax({ 22 url: ‘/ajax_test/‘, 23 type: ‘POST‘, 24 data: $("#f1").serialize(), 25 dataType: ‘JSON‘, 26 success: function (args) { 27 if(args.status){ 28 location.href="http://www.163.com"; 29 }else{ 30 $.each(args.msg, function (index,value) { 31 console.log(index,value); 32 var tag=document.createElement(‘span‘); 33 tag.className=‘c1‘; 34 tag.innerHTML=value[0]; 35 $("#f1").find(‘input[name="‘+index+‘"]‘).after(tag); 36 }) 37 } 38 } 39 }) 40 } 41 </script> 42 </html>
說明：
若用戶輸入不符合Form規則，ajax獲取錯誤信息，並動態添加錯誤信息至span標簽，提示用戶
效果：
Django—Form兩種保留用戶提交數據的方法