前端后端傳值問題總結(jié)

前端傳給后端

通過表單傳值

1、通過表單get請求傳值

在前端當(dāng)通過get的方式傳值時，表單中的標(biāo)簽的name值將會被當(dāng)做action的地址的參數(shù)

此時，在后端可以通過get請求相應(yīng)的name值拿到對應(yīng)的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='輸入要查詢的文章標(biāo)題'/> <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] }}拿到對應(yīng)的值

<a href='http://www.b3g6.com/bcjs/{% url ’backweb:select_art’ %}?page={{ page.paginator.num_pages }}&que={{ request.session.que }}' rel='external nofollow' >最后一頁</a>

2、表單通過post請求傳值

當(dāng)前端通過post傳值時，在視圖中可以通過POST請求拿到對應(yīng)的表單中的name屬性對應(yīng)的value值

通過ajax傳值

POST -----------------------------------

通過ajax的post請求可以將html頁面的值傳到對應(yīng)的視圖函數(shù)中，在后端可以通過request.POST.get(鍵)獲得前端通過ajax的data中的值，request.POST獲取ajax傳遞的所有數(shù)據(jù)

注意:如果前端的dataType是json格式，后端的返回數(shù)據(jù)應(yīng)該也是json格式，否則會請求不成功(但是可以接收前端ajax傳輸過來的值)。

將后端數(shù)據(jù)變?yōu)閖soon格式如下:

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中

如果事件綁定了多個標(biāo)簽，想要知道點(diǎn)擊的標(biāo)簽可以使用$(this)獲得。

通過標(biāo)簽對象.text()可以獲得標(biāo)簽中的值。

通過標(biāo)簽對象.val()可以獲得標(biāo)簽的value值(例如在表單中的值)

通過標(biāo)簽對象.attr(標(biāo)簽屬性名)可以獲得標(biāo)簽屬性對應(yīng)的值

以上的方法都可以給參，如果有參就代表修改屬性值。

可以在標(biāo)簽中定義一個屬性動態(tài)生成值

<span id='num_{{ good.id }}'></span>

此時可以在綁定的時間函數(shù)中傳入一個同樣的參數(shù)，就可以在js中獲取當(dāng)前的被點(diǎn)擊的標(biāo)簽

<button onclick='addToCart({{ good.id }});'>+</button> function addToCart(good_id){ $(’#num_’+ good_id).html(data.data.c_num) }

ajax中不能通過$(this)獲得當(dāng)前觸發(fā)的標(biāo)簽，但是可以在ajax之外將對象獲取，在ajax中的函數(shù)中使用。

GET-----------------------------

語法：$(selector).get(url,data,success(response,status,xhr),dataType)

這是一個簡寫的GET請求功能

參數(shù)：

url:必選規(guī)定將請求發(fā)送到哪個URL

data:可選。規(guī)定聯(lián)通請求發(fā)送到服務(wù)器的數(shù)據(jù)

success(response,status,xhr):可選。當(dāng)請求成功時執(zhí)行的函數(shù)。

額外參數(shù):

response - 包含后臺傳送回來的數(shù)據(jù)

status - 包含請求的狀態(tài)

xhr - 包含XMLHttpRequest對象

dataType:可選。規(guī)定預(yù)計的服務(wù)器相應(yīng)的數(shù)據(jù)類型。默認(rèn)的，jQuery將只能判斷。

可能的類型:

xml html text script json jsonp

等價于

$.ajax({ url: url, data: data, success: success, dataType: dataType});

實(shí)例：

1、請求test.php網(wǎng)頁，傳送兩個參數(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，取決于返回值)，添加一組請求參數(shù)：

$.get('test.cgi', { name: 'John', time: '2pm' }, function(data){ alert('Data Loaded: ' + data); });

后端傳給前端

當(dāng)我們需要給前臺中傳遞數(shù)據(jù)時，可以使用以下的方法:

1、傳遞數(shù)據(jù)和html渲染，不進(jìn)行復(fù)雜的數(shù)據(jù)處理

使用render()將數(shù)據(jù)傳給對應(yīng)的html頁面，字典的值可以是數(shù)字、字符串、列表、字典、object、Queryset等

return render(request, ’backweb/article_detail.html’,{’types’: typess})

在html中使用{{ 鍵 }}來獲取數(shù)據(jù) --- {{ types }}

可以可迭代的數(shù)據(jù)進(jìn)行迭代

{% for type in types %}

<p>type<p>

{% endfor %}

也可以進(jìn)行{% if %} {% else %}操作，注意格式:必須有結(jié)尾{% endif %}

2、傳遞數(shù)據(jù)給js使用 --- 例如ajax請求

此時views視圖中的函數(shù)中的值要用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:請求成功時調(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請求，后臺處理請求并返回status, result --- ajax的數(shù)據(jù)類型為定義為json，所以返回的數(shù)據(jù)也得是json，不然請求失敗(請求失敗不代表數(shù)據(jù)傳不到后臺，只是后臺的數(shù)據(jù)會返回失敗)

在 success: 后面定義回調(diào)函數(shù)處理返回的數(shù)據(jù)，需要使用 JSON.parse(data)

以上這篇淺談Django前端后端值傳遞問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持好吧啦網(wǎng)。