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

在此，我们有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. Ant多渠道批量打包
			
    由于我现在已经用更好的gradle了,所以关于ant我只是简单的讲一讲,如果想学gradle请到我的博客中查看 http://www.cnblogs.com/uncle2000 ant的配置请自行百度 ...
    
			
    2. 
						
  2. day27<反射&JDK5新特性>
			
    反射(类的加载概述和加载时机) 反射(类加载器的概述和分类) 反射(反射概述) 反射(Class.forName()读取配置文件举例) 反射(通过反射获取带参构造方法并使用) 反射(通过反射获取成员变 ...
    
			
    3. 
						
  3. 第四篇：GPU 并行编程的存储系统架构
			
    前言 在用 CUDA 对 GPU 进行并行编程的过程中,除了需要对线程架构要有深刻的认识外,也需要对存储系统架构有深入的了解. 这两个部分是 GPU 编程中最为基础,也是最为重要的部分,需要花时间去理 ...
    
			
    4. 
						
  4. （三）微信小程序之发送服务通知（模板消息）
			
    1.后端获取AccessToken返回给微信端 微信小程序端请求后端得到AccessToken   2.后端获取openid返回给微信端   微信小程序端登录请求后端得到openid   3.发送消息 ...
    
			
    5. 
						
  5. c++11 处理时间和日期
			
    c++11提供了日期时间相关的库 chrono,通过chrono库可以很方便的处理日期和时间. 1. 记录时间长度的duration template<class Rep, class Peri ...
    
			
    6. 
						
  6. Nmap的活跃主机探测常见方法
			
    最近由于工作需求,开始对Nmap进行一点研究,主要是Nmap对于主机活跃性的探测,也就是存活主机检测的领域. Nmap主机探测方法一:同网段优先使用arp探测: 当启动Namp主机活跃扫描时候,Nma ...
    
			
    7. 
						
  7. navigater导航
			
    1.css的hover事件2.url事件(或者click事件),激活当前项3.第一导航与第二导航的移入移出事件(可以通过left,top值来显示,也可以变化宽度,高宽来显示)4.有二级导航的另外给cl ...
    
			
    8. 
						
  8. salt-ssh的批量脚本及使用方法
			
    author: headsen   chen date : 2018-08-02   20:06:06 1,salt-ssh的安装: yum -y install epel-release yum - ...
    
			
    9. 
						
  9. 【Android】TextView动态设置android:drawableLeft|Right|Top|Bottom,SetColor
			
    Android中有时需动态设置控件四周的drawble图片,这个时候就需要调用 setCompoundDrawables(left, top, right, bottom),四个参数类型都是drawa ...
    
			
    10. 
						
  10. spring boot  application.properties基本配置
			
    spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver spring.datasource.url=jdbc:mysql://loca ...
    
			
    11.