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后无法回到原页面的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持小牛知识库。
本文向大家介绍动态设置form表单的action属性的值的简单方法,包括了动态设置form表单的action属性的值的简单方法的使用技巧和注意事项,需要的朋友参考一下 用jQuery时,可如下设置: form表单: javascript方法: 或者用单纯的javascript: 以上这篇动态设置form表单的action属性的值的简单方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望
本文向大家介绍springboot无法跳转页面的问题解决方案,包括了springboot无法跳转页面的问题解决方案的使用技巧和注意事项,需要的朋友参考一下 首先我登录页面直接通过浏览器请求直接访问的,项目结构如图所示 登录页面 点击提交后,是一个ajax发送表单里面的数据,请求地址为index,会去数据库里面查询是否有这个人(后端采用mybatis去数据库查询),根据返回的结果,跳到相应的页面去,
本文向大家介绍JS设置时间无效问题的解决办法,包括了JS设置时间无效问题的解决办法的使用技巧和注意事项,需要的朋友参考一下 在发送短信息验证码的时候要用到js设置时间倒序问题:有时候这种常规写法会导致js失效,试了很多方法才找到问题所在,可能是因为js版本过低导致。 解决方法: 或者: jquery代码:必须用input设置value值,以便利用jquery更改value值 以上所述是小编给大家介
本文向大家介绍vue页面跳转后返回原页面初始位置方法,包括了vue页面跳转后返回原页面初始位置方法的使用技巧和注意事项,需要的朋友参考一下 vue页面跳转到新页面之后,再由新页面返回到原页面时候若想返回调出原页面的初始位置,怎么来解决这个问题呢?首先我们应该在跳出页面时候记录下跳出的scrollY,返回原页面的时候在设置返回位置为记录下的scrolly即可,scrolly我用的是vuex状态管理器
本文向大家介绍JSP页面无法识别EL表达式问题解决方案,包括了JSP页面无法识别EL表达式问题解决方案的使用技巧和注意事项,需要的朋友参考一下 今天在JSP页面接收Controller返回的数据user_nickname,使用EL表达式显示数据发现在页面输出的始终是字符串${user_nickname} 经过查阅资料,问题在于使用的web.xm版本约束为2.3时,JSP头部未设置isELIgnor
本文向大家介绍ios设备中angularjs无法改变页面title的解决方法,包括了ios设备中angularjs无法改变页面title的解决方法的使用技巧和注意事项,需要的朋友参考一下 如下所示: // 代码放在app.js中,代码备份下,预防下次遇到同样的问题。 以上这篇ios设备中angularjs无法改变页面title的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大