前端后端傳值問(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中:

<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中，在前端可以通過(guò){{ request.session[que] }}拿到對(duì)應(yīng)的值

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

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)

例子~有些地方寫多余了:

html頁(yè)面:

<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(’請(qǐng)求失敗’) } }) }) })</script>

注意：

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)生成值

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

此時(shí)可以在綁定的時(shí)間函數(shù)中傳入一個(gè)同樣的參數(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中不能通過(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)寫的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ù)類型。默認(rèn)的，jQuery將只能判斷。

可能的類型:

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 %}

<p>type<p>

{% endfor %}

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

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

此時(shí)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中使用時(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ù)類型為定義為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è)參考，也希望大家多多支持好吧啦網(wǎng)。