前端后端傳值問題總結
前端傳給后端
通過表單傳值
1、通過表單get請求傳值
在前端當通過get的方式傳值時，表單中的標簽的name值將會被當做action的地址的參數
此時，在后端可以通過get請求相應的name值拿到對應的value值
例子:
html中:
{% csrf_token %}
類別
{% 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中，在前端可以通過{{ 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'
return HttpResponse(json.dumps(resp))
或者
return JsonResponse(data)
例子~有些地方寫多余了:
html頁面:
$(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('請求失敗')
}
})
})
})
注意：
jqery中
如果事件綁定了多個標簽，想要知道點擊的標簽可以使用$(this)獲得。
通過標簽對象.text()可以獲得標簽中的值。
通過標簽對象.val()可以獲得標簽的value值(例如在表單中的值)
通過標簽對象.attr(標簽屬性名)可以獲得標簽屬性對應的值
以上的方法都可以給參，如果有參就代表修改屬性值。
可以在標簽中定義一個屬性動態生成值
此時可以在綁定的時間函數中傳入一個同樣的參數，就可以在js中獲取當前的被點擊的標簽
+
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 %}
type
{% 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前端后端值傳遞問題
本文地址: http://www.cppcns.com/jiaoben/python/325309.html
