用户在网页上进行表单填写时，有可能出现某项填写错误。一般情况下，用户在未发觉错误的情况下点击提交，则此表单的内容会清空，用户不得不再重新填写，这样的用户体验是及其糟糕的。

在此，我们有2种方法将用户的输入保存下来，一旦填写错误，只需要将错误项修改即可重新提交。

一、利用Form生成Html标签

1. views.py

 from django.shortcuts import render, HttpResponse, redirect

 from django.forms import Form, fields, widgets

 #Form验证

 class TestForm(Form):

     inp1 = fields.CharField(min_length=4, max_length=8)

     inp2 = fields.EmailField()

     inp3 = fields.IntegerField(min_value=10, max_value=100)

 #测试函数

 def test(request):

     if request.method == 'GET':

         obj = TestForm()

         return render(request, 'test.html', {'obj': obj})

     else:

         obj = TestForm(request.POST)

         if obj.is_valid():

             return HttpResponse('提交成功')

         return render(request, 'test.html', {'obj': obj})

2. test.html

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <form action="/test/" method="post" novalidate>

     {% csrf_token %}

     <p>输入1{{ obj.inp1 }} {{ obj.errors.inp1.0 }}</p>

     <p>输入2{{ obj.inp2 }} {{ obj.errors.inp2.0 }}</p>

     <p>输入3{{ obj.inp3 }} {{ obj.errors.inp3.0 }}</p>

     <input type="submit" value="提交">

 </form>

 </body>

 </html>

novalidate屏蔽浏览器提供的表单验证功能




说明：


若用户输入不符合自定义的Form规则，则会返回obj = TestForm(request.POST)，重新渲染test.html，而此时，obj中包含了上次用户输入的所有内容。


效果：


提交之后出现错误提示，但用户输入的数据依然存在




二、利用Ajax提交数据不刷新页面


Ajax提交数据虽然不刷新网页，但是无法完成用户输入验证，还须借助Form返回给其验证信息


1. views.py




 from django.shortcuts import render, HttpResponse, redirect

 from django.forms import Form, fields, widgets

 import json

 #Form验证

 class TestForm(Form):

     inp1 = fields.CharField(min_length=4, max_length=8)

     inp2 = fields.EmailField()

     inp3 = fields.IntegerField(min_value=10, max_value=100)

 def test(request):

     return render(request, 'test.html')

 def ajax_test(request):

     ret = {'status': True, 'msg': None}

     obj = TestForm(request.POST)

     if obj.is_valid():

         v = json.dumps(ret)

         return HttpResponse(v)

     else:

         ret['status'] = False

         ret['msg'] = obj.errors

         v = json.dumps(ret)

         return HttpResponse(v)




2. test.html




 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <form id="f1">

     {% csrf_token %}

     <p>输入1 <input type="text" name="inp1"></p>

     <p>输入2 <input type="text" name="inp2"></p>

     <p>输入3 <input type="text" name="inp3"></p>

     <input type="button" onclick="ajax_submit();" value="提交">

 </form>

 </body>

 <script    src="/static/jquery-3.2.1.js"></script>

 <script>

     function ajax_submit() {

 {#            删除上次错误提示#}

         $(".c1").remove();

         $.ajax({

             url: '/ajax_test/',

                     type: 'POST',

                     data: $("#f1").serialize(),

                     dataType: 'JSON',

                     success: function (args) {

                             if(args.status){

                                 location.href="http://www.163.com";

                             }else{

                                 $.each(args.msg, function (index,value) {

                                             console.log(index,value);

                                             var tag=document.createElement('span');

                                             tag.className='c1';

                                             tag.innerHTML=value[0];

                                             $("#f1").find('input[name="'+index+'"]').after(tag);

                   })

                             }

           }

             })

   }

 </script>

 </html>




说明：


若用户输入不符合Form规则，ajax获取错误信息，并动态添加错误信息至span标签，提示用户


效果：


												


											
Django—Form两种保留用户提交数据的方法的更多相关文章
	

    
								
  1. 除了GPS外的4种获得用户地理位置数据的方法
		
    纯粹的GPS解决方案以及它所生成的经纬度标签是地理位置数据的公认标准.但是至少还有4种方法可以获得地理位置数据: 1.手机信号塔数据:当移动设备的GPS芯片不能接收到GPS信号时,移动设备就需要与它所 ...
    
		
    2. 
						
  2. Django—Form两种解决表单数据无法动态刷新的方法
		
    一.无法动态更新数据的实例 1. 如下,数据库中创建了班级表和教师表,两张表的对应关系为“多对多” from django.db import models class Classes(models. ...
    
		
    3. 
						
  3. 【Django】Django—Form两种解决表单数据无法动态刷新的方法
		
    一.无法动态更新数据的实例 1. 如下,数据库中创建了班级表和教师表,两张表的对应关系为“多对多” from django.db import models class Classes(models. ...
    
		
    4. 
						
  4. Django学习——ajax发送其他请求、上传文件（ajax和form两种方式）、ajax上传json格式、 Django内置序列化（了解）、分页器的使用
		
    1 ajax发送其他请求 1 写在form表单 submit和button会触发提交 <form action=""> </form> 注释 2 使用inp ...
    
		
    5. 
						
  5. Silverlight实例教程 - Validation用户提交数据验证捕获（转载）
		
    Silverlight 4 Validation验证实例系列 Silverlight实例教程 - Validation数据验证开篇 Silverlight实例教程 - Validation数据验证基础 ...
    
		
    6. 
						
  6. mybatis oracle两种方式批量插入数据
		
    mybatis oracle两种方式批量插入数据 注意insert,一定要添加: useGeneratedKeys="false" ,否者会报错. <insert id=&q ...
    
		
    7. 
						
  7. 两种计算Java对象大小的方法
		
    之前想研究一下unsafe类,碰巧在网上看到了这篇文章,觉得写得很好,就转载过来.原文出处是: http://blog.csdn.net/iter_zc/article/details/4182271 ...
    
		
    8. 
						
  8. ASP模拟POST请求异步提交数据的方法
		
    这篇文章主要介绍了ASP模拟POST请求异步提交数据的方法,本文使用MSXML2.SERVERXMLHTTP.3.0实现POST请求,需要的朋友可以参考下 有时需要获取远程网站的某些信息,而服务器又限 ...
    
		
    9. 
						
  9. python通过post提交数据的方法
		
    python通过post提交数据的方法 本文实例讲述了python通过post提交数据的方法.分享给大家供大家参考. 具体实现方法如下:     # -*- coding: cp936 -*- imp ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. MathType中常见的两种符号的运用
			
    想要让公式编辑得快速又高效,MathType数学公式编辑器这个神助攻是少不了的.MathType是一款专用的数学公式编辑器,用它来编辑公式非常方便实用,并且排版也非常简单.下面介绍两种常见符号的应用. ...
    
			
    2. 
						
  2. HTML <a> 标签的状态和 target 属性
			
    <a>的四种状态 A:link  连接平常状态 A:hover  鼠标放上去的时候 A:active  鼠标按下的时候 A:visited 连接被访问过后的状态 target属性 _bla ...
    
			
    3. 
						
  3. asp.net返回值当文件下载问题
			
    mvc中返回的javascript当做文件下载 解决方案 Response.ContentEncoding = System.Text.Encoding.UTF8;   Response.Conten ...
    
			
    4. 
						
  4. php 如何得到不含前导0的时分秒
			
    通常我们获取时分秒是用 date("H:i:s") ,得到的效果是这样的 而如果想获取不含前导0的时分秒的话,就需要把前导0去掉. 如何去掉呢?我们来分析一下,07变7,20还是2 ...
    
			
    5. 
						
  5. Python 入门（二）Unicode字符串
			
    Unicode字符串 字符串还有一个编码问题. 因为计算机只能处理数字,如果要处理文本,就必须先把文本转换为数字才能处理.最早的计算机在设计时采用8个比特(bit)作为一个字节 (byte),所以,一 ...
    
			
    6. 
						
  6. osgEarth中的StringUtils头文件中有很多关于字符串的操作
			
    
			
    7. 
						
  7. apache MINA之心跳协议运用
			
    摘要 心跳协议,对基于CS模式的系统开发来说是一种比较常见与有效的连接检测方式,最近在用MINA框架,原本自己写了一个心跳协议实现,后来突然发现MINA本身带有这样一个心跳实现,感于对框架的小小崇拜, ...
    
			
    8. 
						
  8. HTTP/2笔记之错误处理和安全
			
    零.前言 这里整理了一下错误和安全相关部分简单记录. 一.HTTP/2错误 1. 错误定义 HTTP/2定义了两种类型错误: 导致整个连接不可使用的错误为连接错误(connection error)  ...
    
			
    9. 
						
  9. MQTT的学习研究（九）基于HTTP GET MQTT 抓取消息服务端使用
			
    官方参看文档: HTTP GET 接收主题请求协议和响应协议http://publib.boulder.ibm.com/infocenter/wmqv7/v7r0/topic/com.ibm.mq.c ...
    
			
    10. 
						
  10. luogu P1379 八数码难题（A*算法入门详细讲解）
			
     代码实现细节 #include<cstdio> #include<cstring> #include<iostream> using namespace std; ...
    
			
    11.