前端传给后端
通过表单传值
1、通过表单get请求传值
在前端当通过get的方式传值时,表单中的标签的name值将会被当做action的地址的参数
此时,在后端可以通过get请求相应的name值拿到对应的value值
例子:
html中:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<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>
|
视图中:
1
2
3
4
|
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页面:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<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中获取当前的被点击的标签
1
2
3
4
|
<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
等价于
1
2
3
4
5
6
|
$.ajax({
url: url,
data: data,
success: success,
dataType: dataType
});
|
实例:
1、请求test.php网页,传送两个参数
$.get("test.php", { name: "John", time: "2pm" } );
2、显示 test.php 返回值(HTML 或 XML,取决于返回值):
1
2
3
|
$.get( "test.php" , function (data){
alert( "Data Loaded: " + data);
});
|
3、显示 test.cgi 返回值(HTML 或 XML,取决于返回值),添加一组请求参数:
1
2
3
4
|
$.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格式
1
2
3
4
5
6
7
8
|
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中:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
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
|
模板中:
1
2
3
4
5
6
7
8
9
|
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前端后端值传递问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持服务器之家。
原文链接:https://blog.csdn.net/weixin_42750983/article/details/82390972