前端后端傳值問題總結

前端傳給后端

通過表單傳值

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' placeholder='輸入要查詢的文章標題'/> <input type='submit' value='查詢' /> </section> </form>

視圖中:

def select_art(request,id): if request.method == ’GET’: que = request.GET.get(’que’) request.session[’que’] = que

拿到的值可以存入session中，在前端可以通過{{ request.session[que] }}拿到對應的值

<a href='http://www.aoyou183.cn/bcjs/{% 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頁面:

<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中獲取當前的被點擊的標簽

<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、顯示 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 %}

<p>type<p>

{% endfor %}

也可以進行{% if %} {% else %}操作，注意格式:必須有結尾{% endif %}

2、傳遞數據給js使用 --- 例如ajax請求

此時views視圖中的函數中的值要用json.dumps()處理成json格式

import jsonfrom 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前端后端值傳遞問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。