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

前端傳給后端

通過表單傳值

1、通過表單get請(qǐng)求傳值

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

此時(shí)，在后端可以通過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" class="textbox textbox_225" placeholder="輸入要查詢的文章標(biāo)題"/>
 <input type="submit" value="查詢" class="group_btn"/>
 </section>
 </form>

視圖中:

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

拿到的值可以存入session中，在前端可以通過{{ request.session[que] }}拿到對(duì)應(yīng)的值

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

2、表單通過post請(qǐng)求傳值

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

通過ajax傳值

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

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

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

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

resp = '請(qǐng)求成功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('請(qǐng)求失敗')
 }
 })
 })
 })
</script>

注意：

jqery中

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

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

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

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

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

語法：$(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)傳送回來的數(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)頁，傳送兩個(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頁面，字典的值可以是數(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請(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過濾器 --- 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前端后端值傳遞問題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論