Django—Form兩種保留用戶提交數據的方法

時間 2019-11-16

標籤 django form 兩種保留用戶提交數據方法欄目 Python 简体版

原文原文鏈接

用戶在網頁上進行表單填寫時，有可能出現某項填寫錯誤。通常狀況下，用戶在未發覺錯誤的狀況下點擊提交，則此表單的內容會清空，用戶不得再也不從新填寫，這樣的用戶體驗是及其糟糕的。html

在此，咱們有2種方法將用戶的輸入保存下來，一旦填寫錯誤，只須要將錯誤項修改便可從新提交。jquery

1、利用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 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 #測試函數
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屏蔽瀏覽器提供的表單驗證功能

說明：ajax

若用戶輸入不符合自定義的Form規則，則會返回obj = TestForm(request.POST)，從新渲染test.html，而此時，obj中包含了上次用戶輸入的全部內容。django

效果：json

提交以後出現錯誤提示，但用戶輸入的數據依然存在瀏覽器

2、利用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>