解决django中form表单设置action后无法回到原页面的问题


Posted in Python onMarch 13, 2020

django中form表单设置action后,点提交按钮是跳转到action页面的,比如设置action为login,网址为192.168.1.128,跳转后便会来到192.168.1.128/login,F5刷新也会是重新提交表单对话框,无法回到原页面。

因此就要在django服务器进行重定向,具体就是

from django.shortcuts import redirect
#最后返回原页面
return redirect(url)

补充知识:Django + Ajax发送POST表单,并将返回信息回显到页面中

将表单数据发送回后端,然后处理后端返回的信息并显示在当前页面中,这里使用Ajax进行处理;

那么先看js代码:

<!--以下为 Ajax脚本 -->
  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
   $("#save").click(function(){
   $.ajax({
     url:"/api/add_event/",    #url
     type: "POST",        #提交表单的类型,相当于method="post"
     dataType: "json",      #dataType, 这个是请求后,返回的数据将以json格式显示
     data:{"name": $("#id_name").val(),   #在"#"号后面是控件id, 所以千万不要搞错了,要不然会出大事的
        "limit":$("#id_limit").val(),
        "address": $("#id_address").val(),
        "start_time": $("#id_start_time").val(),
        "status": $("#id_status").val(),
     },                #Data这个地方,必须要获取数据,代表将获取到的数据发送到后端,后端再进行处理
     success:function(data){      
      console.log(data);      #调试使用
      console.log(data.status);   #调试使用
      console.log(data.message);   #调试使用
      $(".text").text(data.message); #将后端返回到结果通过前端页面进行展示

    },    #注意标点
   });     #需要注意标点符号,如果标点符合错误了,那ajax基本上都不会执行(否则,后果很严重哦)
   });     #注意标点
  });     #注意标点     
  </script>

注意(踩过的坑):

1.contentType: "application/json" ——>加入该语句时,在后端print(request.POST)时无法获取内容,相当于后端根本拿不到数据。因此在网上搜索了解到,使用contentType: “application/json”则data只能是json字符串;不使用时contentType一般为默认的application/x-www-form-urlencoded格式, 因此如果不限制 POST格式,干脆就不写。

2. 说说“data”这里面需要注意:data:{"name", $("#id_name").val(), } 这其中id_name必须为控件的id 名称,使用其它的则不能获取的数据,这个还是得注意。

3. 标注符号,标点符号,标点符号,重要的事情说三遍,当然可以借助专门的编辑器(我主要是懒哦,哈哈)

4. $(".text").text(data.message); 回显在html中,是对后端返回的数据进行处理

那行回显在网页面上面

<font color="red"> 
<span class="text"></span> 
</font>

以下为html代码

<div class="container">
  <div class="col-md-4 col-md-offset-4">
    <form id="form1" onsubmit="return false" action="##" method="POST" class="form-horizontal">

    <!--此处就是通过后端返回到前端,前端进行展示-->
      <font color="red">
        <span class="text"></span>
      </font>

      <div class="form-group">
        <label for="id_name">发布会名称:</label>
        <input type="text" name="name" class="form-control" placeholder="发布会名称" maxlength="128" required id="id_name" />
      </div>
      <div class="form-group">
        <label for="id_limit">Limit:</label>
        <input type="number" name="limit" class="form-control" required id="id_limit" />
      </div>
      <div class="form-group">
        <label for="id_address">发布会地址:</label>
        <input type="text" name="address" class="form-control" placeholder="地址" maxlength="128" required id="id_address" />
      </div>
      <div class="form-group">
        <label for="id_start_time">开始日期:</label>
        <input type="text" name="start_time" required id="id_start_time" />
      </div>

      <div class="form-group">
        <label for="id_status">发布状态:</label>
        <select name="status" id="id_status">
         <option value="blank">-----</option>
         <option value="1">True</option>
         <option value="0">False</option>
        </select>
      </div>

      <div align="center">
       <input class="btn btn-lg btn-primary" id="save" type="submit" value="保存发布会" ></input >
      </div>
    </form>
  </div>
</div>

现在来看一下后端的代码:

from django.views.decorators.csrf import csrf_exempt
@csrf_exempt
def add_event(request):
  if request.is_ajax():
    print(request.body)
    print(request.POST)

    name = request.POST.get('name', '') # 发布会名称
    limit = request.POST.get('limit', '') # 限制人员
    status = request.POST.get('status', '') # 发布会状态
    address = request.POST.get('address', '') # 发布会地址
    start_time = request.POST.get('start_time', '') # 发布会时间

    if name == '' or limit == '' or status == '' or start_time == '':
      return JsonResponse({'status': 10021, 'message': 'parameter error'})

    # 判断发布会名称重复
    result = Event.objects.filter(name=name)
    if result:
      return JsonResponse({'status': 10023, 'message': 'event name already exists'})

    if status == '':
      status = 1

    try:
      # Event.objects.create(id = eid, name = name, limit = limit, address = address, status = int(status), start_time=start_time)
      Event.objects.create(name=name, limit=limit, address=address, status=int(status), start_time=start_time)
    except ValidationError as e:
      error = 'start_time format error. It must be in YYYY-MM-DD HH:MM:SS'
      return JsonResponse({'status': 10024, 'message': error})
    return JsonResponse({'status': 200, 'message': 'add event success'})

1、在后端处理时,我们需要加入:@csrf_exempt 标记,所以导包from django.views.decorators.csrf import csrf_exempt,否则会出现错误csrf_token错误 (403)

2、request.is_ajax()判断当前是否是使用ajax 进行表单提交

3、django request.POST / request.body

当request.POST没有值 需要考虑:

1.请求头中的: Content-Type: application/x-www-form-urlencoded request.POST中才会有值(才会去request.body中解析数据),关于Content-Type前面也提到,不写的错误,它就是默认。

request.body的请求数据

b'name=%E5%A4%BA%E5%A4%BA&limit=123‘

request.POST的数据,django已进行自动处理

QueryDict: {‘name': [‘夺夺'], ‘limit': [‘123']

以上这篇解决django中form表单设置action后无法回到原页面的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Python 相关文章推荐
Python中多线程thread与threading的实现方法
Aug 18 Python
python数组复制拷贝的实现方法
Jun 09 Python
Python 文件管理实例详解
Nov 10 Python
深入解读Python解析XML的几种方式
Feb 16 Python
Python简单计算数组元素平均值的方法示例
Dec 26 Python
Python绘制正余弦函数图像的方法
Aug 28 Python
python调用百度语音识别实现大音频文件语音识别功能
Aug 30 Python
Pytorch DataLoader 变长数据处理方式
Jan 08 Python
python GUI库图形界面开发之PyQt5时间控件QTimer详细使用方法与实例
Feb 26 Python
Django Form常用功能及代码示例
Oct 13 Python
python3.9.1环境安装的方法(图文)
Feb 02 Python
使用python绘制分组对比柱状图
Apr 21 Python
浅谈在django中使用redirect重定向数据传输的问题
Mar 13 #Python
在Django中预防CSRF攻击的操作
Mar 13 #Python
Anaconda+Pycharm环境下的PyTorch配置方法
Mar 13 #Python
Pycharm中切换pytorch的环境和配置的教程详解
Mar 13 #Python
django 取消csrf限制的实例
Mar 13 #Python
django-csrf使用和禁用方式
Mar 13 #Python
解决Django提交表单报错:CSRF token missing or incorrect的问题
Mar 13 #Python
You might like
DOTA2 探索永无止境 玩家自创强悍插眼攻略
2020/04/20 DOTA
PHP 木马攻击防御技巧
2009/06/13 PHP
PHP正则判断一个变量是否为正整数的方法
2019/02/27 PHP
laravel admin实现分类树/模型树的示例代码
2020/06/10 PHP
PHP unset函数原理及使用方法解析
2020/08/14 PHP
jquery pagination插件实现无刷新分页代码
2009/10/13 Javascript
将nodejs打包工具整合到鼠标右键的方法
2013/05/11 NodeJs
javascript的回调函数应用示例
2014/02/20 Javascript
JavaScript中split() 使用方法汇总
2015/04/17 Javascript
Validform+layer实现漂亮的表单验证特效
2016/01/17 Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
2016/05/20 Javascript
jquery 属性选择器(匹配具有指定属性的元素)
2016/09/06 Javascript
JS制作适用于手机和电脑的通知信息效果
2016/10/28 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
2017/04/24 Javascript
Angular2中监听数据更新的方法
2018/08/31 Javascript
vue实现一个炫酷的日历组件
2018/10/08 Javascript
vue3.0中使用postcss-pxtorem的具体方法
2019/11/20 Javascript
Vant 中的Toast设置全局的延迟时间操作
2020/11/04 Javascript
[05:49]2014DOTA2TI4正赛第二日综述 昔日冠军纷纷落马 VG LGD占尽先机
2014/07/20 DOTA
[00:09]DOTA2新版本PA至宝特效动作展示
2014/11/19 DOTA
[13:55]Newbee vs Team Spirit
2018/06/07 DOTA
[57:12]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第一场 10.31
2020/11/02 DOTA
python3.6 +tkinter GUI编程 实现界面化的文本处理工具(推荐)
2017/12/20 Python
python实现简单日期工具类
2019/04/24 Python
python自动化测试之如何解析excel文件
2019/06/27 Python
200行python代码实现2048游戏
2019/07/17 Python
使用python的turtle绘画滑稽脸实例
2019/11/21 Python
django Model层常用验证器及自定义验证器详解
2020/07/15 Python
html5 兼容IE6结构的实现代码
2012/05/14 HTML / CSS
英国首屈一指的票务公司:See Tickets
2019/05/11 全球购物
银行职员个人的工作自我评价
2014/02/15 职场文书
升旗仪式演讲稿
2014/05/08 职场文书
2014年团支书工作总结
2014/11/14 职场文书
法律进社区活动总结
2015/05/07 职场文书
新教师教学工作总结
2015/08/14 职场文书
六年级作文之家庭作文
2019/12/12 职场文书