浅谈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求素数示例分享
Feb 16 Python
python使用Flask框架获取用户IP地址的方法
Mar 21 Python
python 内置函数filter
Jun 01 Python
Python如何生成树形图案
Jan 03 Python
使用Python和xlwt向Excel文件中写入中文的实例
Apr 21 Python
python读取txt文件中特定位置字符的方法
Dec 24 Python
Python设计模式之备忘录模式原理与用法详解
Jan 15 Python
Python3.0中普通方法、类方法和静态方法的比较
May 03 Python
Python tkinter 下拉日历控件代码
Mar 04 Python
更新升级python和pip版本后不生效的问题解决
Apr 17 Python
python批量合成bilibili的m4s缓存文件为MP4格式 ver2.5
Dec 01 Python
用python实现监控视频人数统计
May 21 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
用PHP实现文件上传二法
2006/10/09 PHP
PHP经典的给图片加水印程序
2006/12/06 PHP
php数组相加 array(“a”)+array(“b”)结果还是array(“a”)
2012/09/19 PHP
php中namespace use用法实例分析
2016/01/22 PHP
PHP生成图表pChart的示例解析
2020/07/31 PHP
Javascript 遍历对象中的子对象
2009/07/03 Javascript
浅谈javascript的数据类型检测
2010/07/10 Javascript
jquery 滚动条事件简单实例
2013/07/12 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
2015/04/15 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
2015/06/26 Javascript
简单谈谈javascript中this的隐式绑定
2016/02/22 Javascript
JavaScript对象数组排序实例方法浅析
2016/06/15 Javascript
Bootstrap零基础入门教程(二)
2016/07/18 Javascript
简单的JS控制button颜色随点击更改的实现方法
2017/04/17 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
2017/12/20 Javascript
基于vue.js中事件修饰符.self的用法(详解)
2018/02/23 Javascript
p5.js实现斐波那契螺旋的示例代码
2018/03/22 Javascript
React从react-router路由上做登陆验证控制的方法
2018/05/10 Javascript
微信小程序购物车、父子组件传值及calc的注意事项总结
2018/11/14 Javascript
webpack中的模式(mode)使用详解
2020/02/20 Javascript
[00:32]2018DOTA2亚洲邀请赛iG出场
2018/04/03 DOTA
python 字符串split的用法分享
2013/03/23 Python
Python切片用法实例教程
2014/09/08 Python
浅谈Python 中整型对象的存储问题
2016/05/16 Python
python使用xslt提取网页数据的方法
2018/02/23 Python
用pandas按列合并两个文件的实例
2018/04/12 Python
详解Python3.8+PyQt5+pyqt5-tools+Pycharm配置详细教程
2020/11/02 Python
HTML5实现QQ聊天气泡效果
2017/06/26 HTML / CSS
莱德杯高尔夫欧洲官方商店:Ryder Cup Shop
2019/08/14 全球购物
一家外企的面试题目(C/C++面试题,C语言面试题)
2014/03/24 面试题
小学生红领巾广播稿
2014/01/21 职场文书
副乡长群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
委托公证书格式
2015/01/26 职场文书
2015年小学师德师风建设工作总结
2015/10/23 职场文书
Python使用UDP实现720p视频传输的操作
2021/04/24 Python
Redis基本数据类型Set常用操作命令
2022/06/01 Redis