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):
hod == 'GET':
que = ('que')
request.session['que'] = que
拿到的值可以存⼊session中，在前端可以通过{{ request.session[que] }}拿到对应的值
<a href="{% url 'backweb:select_art' %}?page={{ page.paginator.num_pages }}&que={{ request.session.que }}">最后⼀页</a>
2、表单通过post请求传值
当前端通过post传值时，在视图中可以通过POST请求拿到对应的表单中的name属性对应的value值
通过ajax传值
POST -----------------------------------
通过ajax的post请求可以将html页⾯的值传到对应的视图函数中，在后端可以通过(键)获得前端通过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/',
url:'/backweb/index/',
dataType:'json',
type:'POST',
data:{
ta: ta,
id:id
},
success:function(data){
<!--alert(data)-->
if (ta == '推荐'){
<('不推荐')
}else if (ta == '不推荐'){
<('推荐')
}else if(ta == '展⽰'){
<('不展⽰')
}else if (ta == '不展⽰'){
<('展⽰')
}
},
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、显⽰ i 返回值(HTML 或 XML，取决于返回值)，添加⼀组请求参数：$.get("i", { 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):
hod == "POST":
name = ('name')
status = 0
result = "Error!"
return HttpResponse(json.dumps({
"status": status,
jquery ajax例子"result": result
}))
JS 发送ajax请求，后台处理请求并返回status, result --- ajax的数据类型为定义为json，所以返回的数据也得是json，不然请求失败(请求失败不代表数据传不到后台，在 success: 后⾯定义回调函数处理返回的数据，需要使⽤ JSON.parse(data)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。