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

2023-07-20 19:01:06 78

前端后端传值问题总结

前端传给后端

通过表单传值

1、通过表单get请求传值

在前端当通过get的方式传值时，表单中的标签的name值将会被当做action的地址的参数

此时，在后端可以通过get请求相应的name值拿到对应的value值

例子:

html中:



{%csrf_token%}


类别
{%forartinart_list%}
{{art}}
{%endfor%}

视图中:

defselect_art(request,id):
ifrequest.method=='GET':
que=request.GET.get('que')
request.session['que']=que

拿到的值可以存入session中，在前端可以通过{{request.session[que]}}拿到对应的值

最后一页

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'

returnHttpResponse(json.dumps(resp))

或者

returnJsonResponse(data)

例子~有些地方写多余了:

html页面:


$(function(){
$('#t1a,#tza').on('click',function(){
id=$(this).attr('class')
ta=$(this).text()
t=$(this)


$.ajax({
url:'/backweb/index/',
dataType:'json',
type:'POST',
data:{
ta:ta,
id:id
},
success:function(data){

if(ta=='推荐'){
t.text('不推荐')
}elseif(ta=='不推荐'){
t.text('推荐')
}elseif(ta=='展示'){
t.text('不展示')
}elseif(ta=='不展示'){
t.text('展示')
}
},
error:function(){
alert('请求失败')
}
})
})
})

注意：

jqery中

如果事件绑定了多个标签，想要知道点击的标签可以使用$(this)获得。

通过标签对象.text()可以获得标签中的值。

通过标签对象.val()可以获得标签的value值(例如在表单中的值)

通过标签对象.attr(标签属性名)可以获得标签属性对应的值

以上的方法都可以给参，如果有参就代表修改属性值。

可以在标签中定义一个属性动态生成值

此时可以在绑定的时间函数中传入一个同样的参数，就可以在js中获取当前的被点击的标签

+
functionaddToCart(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将只能判断。

可能的类型:

xmlhtmltextscriptjsonjsonp

等价于

$.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("DataLoaded:"+data);
});

3、显示test.cgi返回值(HTML或XML，取决于返回值)，添加一组请求参数：

$.get("test.cgi",{name:"John",time:"2pm"},
function(data){
alert("DataLoaded:"+data);
});

后端传给前端

当我们需要给前台中传递数据时，可以使用以下的方法:

1、传递数据和html渲染，不进行复杂的数据处理

使用render()将数据传给对应的html页面，字典的值可以是数字、字符串、列表、字典、object、Queryset等

returnrender(request,'backweb/article_detail.html',{'types':typess})

在html中使用{{键}}来获取数据---{{types}}

可以可迭代的数据进行迭代

{%fortypeintypes%}

type

{%endfor%}

也可以进行{%if%}{%else%}操作，注意格式:必须有结尾{%endif%}

2、传递数据给js使用---例如ajax请求

此时views视图中的函数中的值要用json.dumps()处理成json格式

importjson
fromdjango.shortcutsimportrender

defmain_page(request):
list=['view','Json','JS']
returnrender(request,'index.html',{
'List':json.dumps(list),
})

在前js中使用时需要加safe过滤器---varList={{List|safe}};

ajax异步刷新例子:

js中:

functiongetSceneId(scece_name,td){
varpost_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

模板中:

defscene_update_view(request):
ifrequest.method=="POST":
name=request.POST.get('name')
status=0
result="Error!"
returnHttpResponse(json.dumps({
"status":status,
"result":result
}))

JS发送ajax请求，后台处理请求并返回status,result---ajax的数据类型为定义为json，所以返回的数据也得是json，不然请求失败(请求失败不代表数据传不到后台，只是后台的数据会返回失败)

在success:后面定义回调函数处理返回的数据，需要使用JSON.parse(data)

以上这篇浅谈Django前端后端值传递问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

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

热门推荐

随机推荐