浅谈Django前端后端值传递问题


Posted in Python onJuly 15, 2020

前端后端传值问题总结

前端传给后端

通过表单传值

1、通过表单get请求传值

在前端当通过get的方式传值时,表单中的标签的name值将会被当做action的地址的参数

此时,在后端可以通过get请求相应的name值拿到对应的value值

例子:

html中:

<form action="{% url 'backweb:select_art' %}" method="post">
 {% csrf_token %}
 <section class="mtb">
 <select class="select">
 <option value="类别" name="class">类别</option>
 {% for art in art_list %}
 <option value="{{ art }}">{{ art }}</option>
 {% endfor %}
 </select>
 <input name="art_name" type="text" class="textbox textbox_225" placeholder="输入要查询的文章标题"/>
 <input type="submit" value="查询" class="group_btn"/>
 </section>
 </form>

视图中:

def select_art(request,id):
 if request.method == 'GET':
 que = request.GET.get('que')
 request.session['que'] = que

拿到的值可以存入session中,在前端可以通过{{ request.session[que] }}拿到对应的值

<a href="{% url 'backweb:select_art' %}?page={{ page.paginator.num_pages }}&que={{ request.session.que }}" rel="external nofollow" >最后一页</a>

2、表单通过post请求传值

当前端通过post传值时,在视图中可以通过POST请求拿到对应的表单中的name属性对应的value值

通过ajax传值

POST -----------------------------------

通过ajax的post请求可以将html页面的值传到对应的视图函数中,在后端可以通过request.POST.get(键)获得前端通过ajax的data中的值,request.POST获取ajax传递的所有数据

注意:如果前端的dataType是json格式,后端的返回数据应该也是json格式,否则会请求不成功(但是可以接收前端ajax传输过来的值)。

将后端数据变为jsoon格式如下:

resp = '请求成功re'

return HttpResponse(json.dumps(resp))

或者

return JsonResponse(data)

例子~有些地方写多余了:

html页面:

<script type="text/javascript">
 $(function(){
 $('#t1 a,#tz a').on('click',function(){
 id = $(this).attr('class')
 ta = $(this).text()
 t = $(this)
 <!--alert(id)-->
 <!--alert($(this).text())-->
 $.ajax({
 url:'/backweb/index/',
 dataType:'json',
 type:'POST',
 data:{
  ta: ta,
  id:id
 },
 success:function(data){
  <!--alert(data)-->
  if (ta == '推荐'){
  t.text('不推荐')
  }else if (ta == '不推荐'){
  t.text('推荐')
  }else if(ta == '展示'){
  t.text('不展示')
  }else if (ta == '不展示'){
  t.text('展示')
  }
 },
 error:function(){
  alert('请求失败')
 }
 })
 })
 })
</script>

注意:

jqery中

如果事件绑定了多个标签,想要知道点击的标签可以使用$(this)获得。

通过标签对象.text()可以获得标签中的值。

通过标签对象.val()可以获得标签的value值(例如在表单中的值)

通过标签对象.attr(标签属性名)可以获得标签属性对应的值

以上的方法都可以给参,如果有参就代表修改属性值。

可以在标签中定义一个属性动态生成值

<span id="num_{{ good.id }}"></span>

此时可以在绑定的时间函数中传入一个同样的参数,就可以在js中获取当前的被点击的标签

<button onclick="addToCart({{ good.id }});">+</button>
 function addToCart(good_id){
 $('#num_'+ good_id).html(data.data.c_num)
 }

ajax中不能通过$(this)获得当前触发的标签,但是可以在ajax之外将对象获取,在ajax中的函数中使用。

GET-----------------------------

语法:$(selector).get(url,data,success(response,status,xhr),dataType)

这是一个简写的GET请求功能

参数:

url:必选规定将请求发送到哪个URL

data:可选。规定联通请求发送到服务器的数据

success(response,status,xhr):可选。当请求成功时执行的函数。

额外参数:

response - 包含后台传送回来的数据

status - 包含请求的状态

xhr - 包含XMLHttpRequest对象

dataType:可选。规定预计的服务器相应的数据类型。默认的,jQuery将只能判断。

可能的类型:

xml html text script json jsonp

等价于

$.ajax({
 url: url,
 data: data,
 success: success,
 dataType: dataType
});

实例:

1、请求test.php网页,传送两个参数

$.get("test.php", { name: "John", time: "2pm" } );

2、显示 test.php 返回值(HTML 或 XML,取决于返回值):

$.get("test.php", function(data){
 alert("Data Loaded: " + data);
});

3、显示 test.cgi 返回值(HTML 或 XML,取决于返回值),添加一组请求参数:

$.get("test.cgi", { name: "John", time: "2pm" },
 function(data){
 alert("Data Loaded: " + data);
 });

后端传给前端

当我们需要给前台中传递数据时,可以使用以下的方法:

1、传递数据和html渲染,不进行复杂的数据处理

使用render()将数据传给对应的html页面,字典的值可以是数字、字符串、列表、字典、object、Queryset等

return render(request, 'backweb/article_detail.html',{'types': typess})

在html中使用{{ 键 }}来获取数据 --- {{ types }}

可以可迭代的数据进行迭代

{% for type in types %}

<p>type<p>

{% endfor %}

也可以进行{% if %} {% else %}操作,注意格式:必须有结尾{% endif %}

2、传递数据给js使用 --- 例如ajax请求

此时views视图中的函数中的值要用json.dumps()处理成json格式

import json
from django.shortcuts import render
 
def main_page(request):
 list = ['view', 'Json', 'JS']
 return render(request, 'index.html', {
 'List': json.dumps(list),
 })

在前js中使用时需要加safe过滤器 --- var List = {{ List|safe }};

ajax异步刷新例子:

js中:

function getSceneId(scece_name, td) {
 var post_data = {
 "name": scece_name,
 };
 
 $.ajax({
 url: {% url 'scene_update_url' %},
 type: "POST",
 data: post_data,
 success: function (data) {
 data = JSON.parse(data);
 if (data["status"] == 1) {
 setSceneTd(data["result"], scece_name, td);
 } else {
 alert(data["result"]);
 }
 }
 });
} 
success:function(data,status,xhr){} --- data:请求成功时调用的函数 status:描述状态的字符串 xhr:jqXHR

模板中:

def scene_update_view(request):
 if request.method == "POST":
 name = request.POST.get('name')
 status = 0
 result = "Error!"
 return HttpResponse(json.dumps({
 "status": status,
 "result": result
 }))

JS 发送ajax请求,后台处理请求并返回status, result --- ajax的数据类型为定义为json,所以返回的数据也得是json,不然请求失败(请求失败不代表数据传不到后台,只是后台的数据会返回失败)

在 success: 后面定义回调函数处理返回的数据,需要使用 JSON.parse(data)

以上这篇浅谈Django前端后端值传递问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Python 相关文章推荐
Python实现拼接多张图片的方法
Dec 01 Python
Linux下使用python自动修改本机网关代码分享
May 21 Python
Python外星人入侵游戏编程完整版
Mar 30 Python
Python方法的延迟加载的示例代码
Dec 18 Python
python实现简易云音乐播放器
Jan 04 Python
python最小生成树kruskal与prim算法详解
Jan 17 Python
python实现海螺图片的方法示例
May 12 Python
如何用OpenCV -python3实现视频物体追踪
Dec 04 Python
python实现画图工具
Aug 27 Python
python 实现简易的记事本
Nov 30 Python
使用Python webdriver图书馆抢座自动预约的正确方法
Mar 04 Python
Python中的 enumerate和zip详情
May 30 Python
浅谈python出错时traceback的解读
Jul 15 #Python
Django视图、传参和forms验证操作
Jul 15 #Python
一文解决django 2.2与mysql兼容性问题
Jul 15 #Python
django 模型字段设置默认值代码
Jul 15 #Python
django序列化时使用外键的真实值操作
Jul 15 #Python
Django:使用filter的pk进行多值查询操作
Jul 15 #Python
django models里数据表插入数据id自增操作
Jul 15 #Python
You might like
Discuz!5的PHP代码高亮显示插件(黑暗中的舞者更新)
2007/01/29 PHP
PHP执行系统命令函数实例讲解
2021/03/03 PHP
javascript options属性集合操作代码
2009/12/28 Javascript
使用jQuery模板来展现json数据的代码
2010/10/22 Javascript
jquery 实现两Select 标签项互调示例代码
2014/09/25 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
2015/09/18 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
2015/11/24 Javascript
详谈Angular路由与Nodejs路由的区别
2017/03/05 NodeJs
jquery插件ContextMenu设置右键菜单
2017/03/13 Javascript
Angular CLI在Angular项目中如何使用scss详解
2018/04/10 Javascript
jQuery实现的五星点评功能【案例】
2019/02/18 jQuery
Vue 理解之白话 getter/setter详解
2019/04/16 Javascript
Vue使用虚拟dom进行渲染view的方法
2019/12/26 Javascript
在antd Form表单中select设置初始值操作
2020/11/02 Javascript
python登录pop3邮件服务器接收邮件的方法
2015/04/30 Python
Python网络编程中urllib2模块的用法总结
2016/07/12 Python
django中静态文件配置static的方法
2018/05/20 Python
Python测试网络连通性示例【基于ping】
2018/08/03 Python
使用Python实现微信提醒备忘录功能
2018/12/04 Python
Django框架首页和登录页分离操作示例
2019/05/28 Python
python3.7 的新特性详解
2019/07/25 Python
Python搭建代理IP池实现存储IP的方法
2019/10/27 Python
Python 多进程原理及实现
2020/12/21 Python
Tory Burch美国官方网站:美国时尚生活品牌
2016/08/01 全球购物
SKECHERS斯凯奇中国官网:来自美国的运动休闲品牌
2018/11/14 全球购物
一加手机美国官方网站:OnePlus美国
2019/09/19 全球购物
护理专业毕业生自我鉴定
2013/10/08 职场文书
银行办理业务介绍信
2014/01/18 职场文书
土建专业毕业生自荐书
2014/07/04 职场文书
一年级数学上册复习计划
2015/01/17 职场文书
售后服务承诺函格式
2015/01/21 职场文书
物业工程部岗位职责
2015/02/11 职场文书
幼儿园辞职书
2015/02/26 职场文书
幼儿园庆元旦主持词
2015/07/06 职场文书
Pytorch 如何实现常用正则化
2021/05/27 Python
python opencv通过4坐标剪裁图片
2021/06/05 Python