解决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之数据类型总结
Sep 24 Python
详解Python中的循环语句的用法
Apr 09 Python
详解在Python的Django框架中创建模板库的方法
Jul 20 Python
python PIL模块与随机生成中文验证码
Feb 27 Python
Python使用openpyxl读写excel文件的方法
Jun 30 Python
Python3爬虫学习入门教程
Dec 11 Python
对Python 除法负数取商的取整方式详解
Dec 12 Python
Python中字符串与编码示例代码
May 20 Python
Django中使用CORS实现跨域请求过程解析
Aug 05 Python
python针对mysql数据库的连接、查询、更新、删除操作示例
Sep 11 Python
PyCharm+PyQt5+QtDesigner配置详解
Aug 12 Python
Python中threading库实现线程锁与释放锁
May 17 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
php 无限极分类
2008/03/27 PHP
mysql limit查询优化分析
2008/11/12 PHP
PHP仿盗链代码
2012/06/03 PHP
又一个PHP实现的冒泡排序算法分享
2014/08/21 PHP
PHP 将数组打乱 shuffle函数的用法及简单实例
2016/06/17 PHP
记录Yii2框架开发微信公众号遇到的问题及解决方法
2018/07/20 PHP
用js查找法实现当前栏目的高亮显示的代码
2007/11/24 Javascript
jQuery当鼠标悬停时放大图片的效果实例
2013/07/03 Javascript
百度地图API之本地搜索与范围搜索
2015/07/30 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
2015/11/26 Javascript
jQuery简单创建节点的方法
2016/09/09 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
2017/02/23 Javascript
vue.js树形组件之删除双击增加分支实例代码
2017/02/28 Javascript
angular之ng-template模板加载
2017/11/09 Javascript
jQuery实现form表单序列化转换为json对象功能示例
2018/05/23 jQuery
webpack4 处理SCSS的方法示例
2018/09/03 Javascript
详解vue-cli@2.x项目迁移日志
2019/06/06 Javascript
[04:27]2014DOTA2国际邀请赛 NAVI战队官方纪录片
2014/07/21 DOTA
Python的GUI框架PySide的安装配置教程
2016/02/16 Python
Python列表原理与用法详解【创建、元素增加、删除、访问、计数、切片、遍历等】
2019/10/30 Python
Django框架ORM数据库操作实例详解
2019/11/07 Python
Python list运算操作代码实例解析
2020/01/20 Python
css3 transform及原生js实现鼠标拖动3D立方体旋转
2016/06/20 HTML / CSS
html2canvas把div保存图片高清图的方法示例
2018/03/05 HTML / CSS
美国滑板店:Tactics
2020/11/08 全球购物
移动通信行业实习自我鉴定
2013/09/28 职场文书
入党转预备思想汇报
2014/01/07 职场文书
优秀团员自我评价范文
2014/04/23 职场文书
学校文明单位申报材料
2014/05/06 职场文书
孝老爱亲模范事迹材料
2014/05/25 职场文书
高一课前三分钟演讲稿
2014/09/13 职场文书
世界水日宣传活动总结
2015/02/09 职场文书
python批量更改目录名/文件名的方法
2021/04/18 Python
python实现简单的井字棋
2021/05/26 Python
OpenCV-Python直方图均衡化实现图像去雾
2021/06/07 Python
详解NumPy中的线性关系与数据修剪压缩
2022/05/25 Python