浅谈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利用hook技术破解https的实例代码
Mar 25 Python
用python + openpyxl处理excel2007文档思路以及心得
Jul 14 Python
使用pycharm设置控制台不换行的操作方法
Jan 19 Python
Python告诉你木马程序的键盘记录原理
Feb 02 Python
python列表每个元素同增同减和列表元素去空格的实例
Jul 20 Python
用Python写一个自动木马程序
Sep 17 Python
Python基础之变量基本用法与进阶详解
Jan 03 Python
Python 实现一行输入多个数字(用空格隔开)
Apr 29 Python
python 等差数列末项计算方式
May 03 Python
基于python纯函数实现井字棋游戏
May 27 Python
如何利用Python 进行边缘检测
Oct 14 Python
Python包管理工具pip的15 个使用小技巧
May 17 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可变函数学习小结
2015/11/29 PHP
PHP数组中头部和尾部添加元素的方法(array_unshift,array_push)
2017/04/10 PHP
PHP实现的敏感词过滤方法示例
2019/03/06 PHP
php 命名空间(namespace)原理与用法实例小结
2019/11/13 PHP
javascript web对话框与弹出窗口
2009/02/22 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
2014/08/12 Javascript
js用Date对象的setDate()函数对日期进行加减操作
2014/09/18 Javascript
Node.js抓取中文网页乱码问题和解决方法
2015/02/10 Javascript
jQuery可见性过滤器:hidden和:visibility用法实例
2015/06/24 Javascript
原生JS实现图片轮播效果
2016/12/26 Javascript
纯原生js实现table表格的增删
2017/01/05 Javascript
ES6正则表达式的一些新功能总结
2017/05/09 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
2017/09/10 Javascript
vue router下的html5 history在iis服务器上的设置方法
2017/10/18 Javascript
如何利用ES6进行Promise封装总结
2019/02/11 Javascript
小程序红包雨的实现示例
2019/02/19 Javascript
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
2019/05/09 Javascript
微信小程序自定义单项选择器样式
2019/07/25 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
2019/08/14 Javascript
jquery 插件重新绑定的处理方法分析
2019/11/23 jQuery
vue祖孙组件之间的数据传递案例
2020/12/07 Vue.js
Python3实现发送QQ邮件功能(文本)
2017/12/15 Python
python得到电脑的开机时间方法
2018/10/15 Python
Python远程开发环境部署与调试过程图解
2019/12/09 Python
Pytest如何使用skip跳过执行测试
2020/08/13 Python
python使用re模块爬取豆瓣Top250电影
2020/10/20 Python
工厂仓管员岗位职责
2014/01/01 职场文书
优秀大学生职业生涯规划书
2014/02/27 职场文书
小学学校评估方案
2014/06/08 职场文书
公益广告标语
2014/06/19 职场文书
餐厅周年庆活动方案
2014/08/25 职场文书
党的群众路线教育实践活动个人整改方案
2014/09/21 职场文书
2015国际残疾人日活动总结
2015/03/24 职场文书
市场营销计划书
2019/04/24 职场文书
90行Python代码开发个人云盘应用
2021/04/20 Python
详解thinkphp的Auth类认证
2021/05/28 PHP