用python前端html后端django_浅谈Django前端后端值传递问题
前端后端傳值問(wèn)題總結(jié)
前端傳給后端
通過(guò)表單傳值
1、通過(guò)表單get請(qǐng)求傳值
在前端當(dāng)通過(guò)get的方式傳值時(shí)，表單中的標(biāo)簽的name值將會(huì)被當(dāng)做action的地址的參數(shù)
此時(shí)，在后端可以通過(guò)get請(qǐng)求相應(yīng)的name值拿到對(duì)應(yīng)的value值
例子:
html中:
{% csrf_token %}
類(lèi)別
{% for art in art_list %}
{{ art }}
{% endfor %}
視圖中:
def select_art(request,id):
if request.method == 'GET':
que = request.GET.get('que')
request.session['que'] = que
拿到的值可以存入session中，在前端可以通過(guò){{ request.session[que] }}拿到對(duì)應(yīng)的值
最后一頁(yè)
2、表單通過(guò)post請(qǐng)求傳值
當(dāng)前端通過(guò)post傳值時(shí)，在視圖中可以通過(guò)POST請(qǐng)求拿到對(duì)應(yīng)的表單中的name屬性對(duì)應(yīng)的value值
通過(guò)ajax傳值
POST -----------------------------------
通過(guò)ajax的post請(qǐng)求可以將html頁(yè)面的值傳到對(duì)應(yīng)的視圖函數(shù)中，在后端可以通過(guò)request.POST.get(鍵)獲得前端通過(guò)ajax的data中的值，request.POST獲取ajax傳遞的所有數(shù)據(jù)
注意:如果前端的dataType是json格式，后端的返回?cái)?shù)據(jù)應(yīng)該也是json格式，否則會(huì)請(qǐng)求不成功(但是可以接收前端ajax傳輸過(guò)來(lái)的值)。
將后端數(shù)據(jù)變?yōu)閖soon格式如下:
resp = '請(qǐng)求成功re'
return HttpResponse(json.dumps(resp))
或者
return JsonResponse(data)
例子~有些地方寫(xiě)多余了:
html頁(yè)面:
$(function(){
$('#t1 a,#tz a').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('不推薦')
}else if (ta == '不推薦'){
t.text('推薦')
}else if(ta == '展示'){
t.text('不展示')
}else if (ta == '不展示'){
t.text('展示')
}
},
error:function(){
alert('請(qǐng)求失敗')
}
})
})
})
注意：
jqery中
如果事件綁定了多個(gè)標(biāo)簽，想要知道點(diǎn)擊的標(biāo)簽可以使用$(this)獲得。
通過(guò)標(biāo)簽對(duì)象.text()可以獲得標(biāo)簽中的值。
通過(guò)標(biāo)簽對(duì)象.val()可以獲得標(biāo)簽的value值(例如在表單中的值)
通過(guò)標(biāo)簽對(duì)象.attr(標(biāo)簽屬性名)可以獲得標(biāo)簽屬性對(duì)應(yīng)的值
以上的方法都可以給參，如果有參就代表修改屬性值。
可以在標(biāo)簽中定義一個(gè)屬性動(dòng)態(tài)生成值
此時(shí)可以在綁定的時(shí)間函數(shù)中傳入一個(gè)同樣的參數(shù)，就可以在js中獲取當(dāng)前的被點(diǎn)擊的標(biāo)簽
+
function addToCart(good_id){
$('#num_'+ good_id).html(data.data.c_num)
}
ajax中不能通過(guò)$(this)獲得當(dāng)前觸發(fā)的標(biāo)簽，但是可以在ajax之外將對(duì)象獲取，在ajax中的函數(shù)中使用。
GET-----------------------------
語(yǔ)法：$(selector).get(url,data,success(response,status,xhr),dataType)
這是一個(gè)簡(jiǎn)寫(xiě)的GET請(qǐng)求功能
參數(shù)：
url:必選規(guī)定將請(qǐng)求發(fā)送到哪個(gè)URL
data:可選。規(guī)定聯(lián)通請(qǐng)求發(fā)送到服務(wù)器的數(shù)據(jù)
success(response,status,xhr):可選。當(dāng)請(qǐng)求成功時(shí)執(zhí)行的函數(shù)。
額外參數(shù):
response - 包含后臺(tái)傳送回來(lái)的數(shù)據(jù)
status - 包含請(qǐng)求的狀態(tài)
xhr - 包含XMLHttpRequest對(duì)象
dataType:可選。規(guī)定預(yù)計(jì)的服務(wù)器相應(yīng)的數(shù)據(jù)類(lèi)型。默認(rèn)的，jQuery將只能判斷。
可能的類(lèi)型:
xml html text script json jsonp
等價(jià)于
$.ajax({
url: url,
data: data,
success: success,
dataType: dataType
});
實(shí)例：
1、請(qǐng)求test.php網(wǎng)頁(yè)，傳送兩個(gè)參數(shù)
$.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，取決于返回值)，添加一組請(qǐng)求參數(shù)：
$.get("test.cgi", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});
后端傳給前端
當(dāng)我們需要給前臺(tái)中傳遞數(shù)據(jù)時(shí)，可以使用以下的方法:
1、傳遞數(shù)據(jù)和html渲染，不進(jìn)行復(fù)雜的數(shù)據(jù)處理
使用render()將數(shù)據(jù)傳給對(duì)應(yīng)的html頁(yè)面，字典的值可以是數(shù)字、字符串、列表、字典、object、Queryset等
return render(request, 'backweb/article_detail.html',{'types': typess})
在html中使用{{ 鍵 }}來(lái)獲取數(shù)據(jù) --- {{ types }}
可以可迭代的數(shù)據(jù)進(jìn)行迭代
{% for type in types %}
type
{% endfor %}
也可以進(jìn)行{% if %} {% else %}操作，注意格式:必須有結(jié)尾{% endif %}
2、傳遞數(shù)據(jù)給js使用 --- 例如ajax請(qǐng)求
此時(shí)views視圖中的函數(shù)中的值要用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中使用時(shí)需要加safe過(guò)濾器 --- 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:請(qǐng)求成功時(shí)調(diào)用的函數(shù) status:描述狀態(tài)的字符串 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 發(fā)送ajax請(qǐng)求，后臺(tái)處理請(qǐng)求并返回status, result --- ajax的數(shù)據(jù)類(lèi)型為定義為json，所以返回的數(shù)據(jù)也得是json，不然請(qǐng)求失敗(請(qǐng)求失敗不代表數(shù)據(jù)傳不到后臺(tái)，只是后臺(tái)的數(shù)據(jù)會(huì)返回失敗)
在 success: 后面定義回調(diào)函數(shù)處理返回的數(shù)據(jù)，需要使用 JSON.parse(data)
以上這篇淺談Django前端后端值傳遞問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持我們。
本文標(biāo)題: 淺談Django前端后端值傳遞問(wèn)題
本文地址: http://www.cppcns.com/jiaoben/python/325309.html
總結(jié)
以上是生活随笔為你收集整理的用python前端html后端django_浅谈Django前端后端值传递问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： hibernate开发优缺点
- 下一篇： websocket python爬虫_p