蝙蝠岛资源网

浅谈Django前端后端值传递问题
脚本专栏 2024/12/23 佚名
2 0
蝙蝠岛资源网 Design By www.hbtsch.com

前端后端传值问题总结

前端传给后端

通过表单传值

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' %}" 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前端后端值传递问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

标签：
Django,前后端,值传递
蝙蝠岛资源网 Design By www.hbtsch.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com

评论“浅谈Django前端后端值传递问题”

暂无浅谈Django前端后端值传递问题的评论...
www.hbtsch.com 蝙蝠岛资源网
139,976影音资源
144,792福利资源
21,817软件资源
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
蝙蝠岛资源网 Design By www.hbtsch.com