专栏首页恩蓝脚本浅谈Django前端后端值传递问题

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

前端后端传值问题总结

前端传给后端

通过表单传值

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前端后端值传递问题就是小编分享给大家的全部内容了,希望能给大家一个参考。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • python和js交互调用的方法

    2.【万能方式】使用jquery的ajax与后台交互,设置不同的参数,可以get也可以post

    砸漏
  • Python实现删除某列中含有空值的行的示例代码

    砸漏
  • Laravel 实现Controller向blade前台模板赋值的四种方式小结

    以上这篇Laravel 实现Controller向blade前台模板赋值的四种方式小结就是小编分享给大家的全部内容了,希望能给大家一个参考。

    砸漏
  • Android官方推荐的安全组件:使用Jetpack Security为数据加密

    链接:https://blog.csdn.net/vitaviva/article/details/104828195

    陈宇明
  • iOS开发之NSURLSessionUploadTask上传数据

    苹果在 iOS9 之后已经废弃了NSURLConnection,NSURLSession成为其替代者,其基本知识网上很多,主要可以从NSURLSessionDa...

    YungFan
  • 我是SPI,我让框架更加优雅了!

    自从上次小黑进入公司的架构组之后,小黑就承担起整个公司底层框架的开发工作。就在刚刚,小黑又接到一个任务:做一个通用的歌曲信息解析框架。即输入歌曲数据,之后返回该...

    陈树义
  • 我是 SPI,我让框架更加优雅了!

    自从上次小黑进入公司的架构组之后,小黑就承担起整个公司底层框架的开发工作。就在刚刚,小黑又接到一个任务:做一个通用的歌曲信息解析框架。即输入歌曲数据,之后返回该...

    Java后端技术
  • 我是 SPI,我让框架更加优雅了!

    自从上次小黑进入公司的架构组之后,小黑就承担起整个公司底层框架的开发工作。就在刚刚,小黑又接到一个任务:做一个通用的歌曲信息解析框架。即输入歌曲数据,之后返回该...

    java进阶架构师
  • R︱Rstudio 1.0版本尝鲜(R notebook、下载链接、sparkR、代码时间测试profile)

    如果R的版本够的话,需要预装knitr,rmarkdown,同时你点击R notebook就会直接帮你加载。

    素质
  • [PyTorch小试牛刀]实战三·DNN实现逻辑回归对FashionMNIST数据集进行分类(使用GPU)

    我笔记本配置为CPU i5 8250u GPU MX150 2G内存 使用CPU训练时,每100步,2.2秒左右 使用GPU训练时,每100步,1.4秒左右...

    小宋是呢

扫码关注云+社区

领取腾讯云代金券