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

在此，我们有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. 恢复VS2013窗口的默认布局
			
    打开VS2013   在菜单栏中找到“Window”即“窗口”选项   单击窗口中的“reset Window layout"   点击恢复窗口布局后会有如下提示,选择Yes即可   此时即 ...
    
			
    2. 
						
  2. php-fpm配置文件，指定session保存目录
			
    cd  /etc/php-fpm.d 目录下 cat www.conf文件 修改user ,group 指定session 保存路径 www.conf日志配置路径 php-fpm.conf
    
			
    3. 
						
  3. 如何调用别人发布的WebService程序
			
    这篇经验会告诉我们如何调用别人发布的WebService,并且需要注意的事项.现在就拿获取天气预报的接口举例,因为文中不允许有链接,所以在下文图中有WebService链接的地址. 工具/原料   V ...
    
			
    4. 
						
  4. android 应用能够安装在什么地方
			
    眼下我们仅仅能做到将应用安装在例如以下组合中:   1.关闭MTK_2SDCARD_SWAP,能够将应用安装在以下两个路径上      1)手机内存(internal storage)      2) ...
    
			
    5. 
						
  5. VS------修改项目命名空间
			
    1.以文本形式打开此文件 2.修改一下部分 3.vs会自动提示,选择“放弃”即可
    
			
    6. 
						
  6. Linux内核中断处理体系分析
			
    前一篇博文中:linux内核初始化阶段通过early_trap_init()函数完毕了把异常向量复制到0xFFFF0000開始的地方,这些异常向量大部分指向通过vector_stub宏定义的那段代码. ...
    
			
    7. 
						
  7. 工作流JBPM_day01：4-管理流程定义
			
    工作流JBPM_day01:4-管理流程定义 管理流程(流程定义) 部署(添加) 查询 删除 查看流程图(xxx.png) -- 修改 --> 没有真正的修改,而是使用“再次部署+使用最新版本启 ...
    
			
    8. 
						
  8. 如何把he_llo wo_rld 变成 HeLlo WoRld
			
    有人问如何把he_llo wo_rld 变成 HeLlo WoRld,估计应该是一道面试的基础题吧. 思路很多种,就看如何实现 思路一.先根据空格分隔,然后转大写,最后再拼接.代码如下 <?ph ...
    
			
    9. 
						
  9. 关于Ethread的一些研究
			
    环境 win764 以TP为例 ring3保护 它会在windbg断下 这个时候我们需要拿到当前线程对象 应该到 当前使用的CPU的地址 _KPRCB-> CurrentThread 就是当前线 ...
    
			
    10. 
						
  10. poj_3468 伸展树
			
    题目大意 一个数列,每次操作可以是将某区间数字都加上一个相同的整数,也可以是询问一个区间中所有数字的和.(这里区间指的是数列中连续的若干个数)对每次询问给出结果. 思路 1. 伸展树的一般规律 对于区 ...
    
			
    11.