浅谈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中的index()方法使用教程
May 18 Python
python高手之路python处理excel文件(方法汇总)
Jan 07 Python
python安装oracle扩展及数据库连接方法
Feb 21 Python
视觉直观感受若干常用排序算法
Apr 13 Python
python利用rsa库做公钥解密的方法教程
Dec 10 Python
简单了解python模块概念
Jan 11 Python
Python Requests库基本用法示例
Aug 20 Python
Python跳出多重循环的方法示例
Jul 03 Python
Pytorch之view及view_as使用详解
Dec 31 Python
Windows下PyCharm配置Anaconda环境(超详细教程)
Jul 31 Python
Python如何发送与接收大型数组
Aug 07 Python
Python导入父文件夹中模块并读取当前文件夹内的资源
Nov 19 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
wampserver改变默认网站目录的办法
2015/08/05 PHP
总结PHP中DateTime的常用方法
2016/08/11 PHP
PHP 中 DOMDocument保存xml时中文出现乱码问题的解决方案
2016/09/19 PHP
PHP foreach遍历多维数组实现方式
2016/11/16 PHP
jQuery移动和复制dom节点实用DOM操作案例
2012/12/17 Javascript
Javascript new Date().valueOf()的作用与时间戳由来详解
2013/04/24 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
2013/11/18 Javascript
Jquery和JS获取ul中li标签的实现方法
2016/06/02 Javascript
关于在Servelet中如何获取当前时间的操作方法
2016/06/28 Javascript
前端弹出对话框 js实现ajax交互
2016/09/09 Javascript
基于JavaScript实现选项卡效果
2017/07/21 Javascript
微信小程序实现图片放大预览功能
2020/10/22 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
2018/09/18 Javascript
vue集成kindeditor富文本的实现示例代码
2019/06/07 Javascript
JS实现的雪花飘落特效示例
2019/12/03 Javascript
小程序实现简单语音聊天的示例代码
2020/07/24 Javascript
vue 中的动态传参和query传参操作
2020/11/09 Javascript
python使用nntp读取新闻组内容的方法
2015/05/08 Python
Python-嵌套列表list的全面解析
2016/06/08 Python
Python使用defaultdict读取文件各列的方法
2017/05/11 Python
TensorFlow实现RNN循环神经网络
2018/02/28 Python
Win10环境python3.7安装dlib模块趟过的坑
2019/08/01 Python
python爬虫开发之urllib模块详细使用方法与实例全解
2020/03/09 Python
一款恶搞头像特效的制作过程 利用css3和jquery
2014/11/21 HTML / CSS
Html5 滚动穿透的方法
2019/05/13 HTML / CSS
彼得罗夫美国官网:Peter Thomas Roth美国(青瓜面膜)
2017/11/05 全球购物
运动会广播稿30字
2014/01/21 职场文书
期末评语大全
2014/05/04 职场文书
民主评议政风行风整改方案
2014/09/17 职场文书
党员对十八届四中全会的期盼思想汇报范文
2014/10/17 职场文书
先进教师个人事迹材料
2014/12/15 职场文书
物业工程部岗位职责
2015/02/11 职场文书
2015年推普周活动总结
2015/03/27 职场文书
政协工作总结2015
2015/05/20 职场文书
MySQL数据库10秒内插入百万条数据的实现
2021/11/01 MySQL
HTML基本元素标签介绍
2022/02/28 HTML / CSS