前端後端傳值問題總結

前端傳給後端

通過表單傳值

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" class="textbox textbox_225" placeholder="輸入要查詢的文章標題"/>
 <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] }}拿到對應的值

<a href="{% 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,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",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 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,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前端後端值傳遞問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。