1. 程式人生 > >基於ajax提交資料

基於ajax提交資料

 

昨日回顧:
1 inclusion_tag
-幹什麼用的?生成html的片段(動態,傳引數,傳資料)
-app下新建一個模組,templatetags
-建立一個py檔案(mytag.py)
-from django.template import Library
-register=Library() ----->register名字一定不能變
-寫裝飾器(標籤,過濾器,inclusion_tag)
[email protected]_tag('模板路徑',name='重新命名')
-def my_in(): 不寫,寫多個,不寫不傳,寫多個,按空格來傳參
- 一堆邏輯處理,查資料庫
- ret=Book.object.all()
return {''books':ret}
-在模板中:
可以用books這個變數,渲染頁面
-應用:
-在另一個模板中:
-{%load mytag.py%}
-{% my_in %}
2 defer,only
-defer---->除了指定欄位之外
-only---->只查詢幾個欄位
-比如:ret=Book.object.all().only('name')
-id始終會查
-結果是queryset物件,套book物件
-問:如果取price,發生了什麼?
-它會再次查詢資料庫,對資料庫造成壓力
3 事務(原子性操作)
from django.db import transition
with transition.atomic():
sql1
sql2
4 choice
-模型表中某個欄位,可以指定choice,用在選擇不經常變的情況,經常變,儘量用資料庫
user_type=models.ForeignKey(to='Info', to_field='id',db_constraint=False)
#取出對應的漢字
# author物件.user_type.name
mychoice=((1,'男'),(2,'女'),(3,'其他'))
# dd = models.ForeignKey(to='Info', to_field='id')
#取出對應的漢字
dd = models.ForeignKey(choices=mychoice)
5 反向解析
-動態獲取路徑(根據名字)
-路由: url(r'^inde/$', views.Test.as_view(),name='index'),
url(r'^inde/(\d+)$', views.Test.as_view(),name='index'),
-在檢視層:
def mytest(request):
# 用在檢視層
url=reverse('index',args=(12,))
return redirect(url)
-在模板中用:
<a href="/index/">點我跳到index頁面</a>
<a href="{% url 'index' 12 %}">點我跳到index頁面</a>
{#這個位置相當於放了"/inde/"#}


6 多對多的關係,三種寫法
-手動建立第三張表(不建立關聯關係)
class Book(models.Model):
# 預設會建立id
name = models.CharField(max_length=32)
class Author(models.Model):
name = models.CharField(max_length=32)
class Book2Author(models.Model):
id = models.AutoField(primary_key=True)
book=models.ForeignKey(to='Book',to_field='id')
author=models.ForeignKey(to='Author',to_field='id')
-不管是插入和查詢,刪除,都很麻煩(一般不用)
-自動建立第三張表
-查詢,插入,刪除,都很方便
-缺點:欄位是固定的,第三張表如果要新增欄位,實現不了
-手動建立第三張表,建立關聯關係
class Book(models.Model):
# 預設會建立id
name = models.CharField(max_length=32)
# 中介模型,手動指定第三張中間表是Book2Author
authors=models.ManyToManyField(to='Author',through='Book2Author',through_fields=('book','author'))
class Author(models.Model):
name = models.CharField(max_length=32)
def __str__(self):
return self.name
class Book2Author(models.Model):
id = models.AutoField(primary_key=True)
book=models.ForeignKey(to='Book',to_field='id')
author=models.ForeignKey(to='Author',to_field='id')

-through:來指定我的第三張表是哪個
-through_fields:('book','author'),第一個值是:從中間表找到設定關聯欄位的表,通過哪個欄位,第一個位置就寫它
-終極總結:防止混了:關聯欄位就是表名小寫,第一個值:就是當前表的表名小寫
-查詢,新增,刪除,都很方便
-第三張表,可以新增別的欄位

7 ajax
1 什麼是ajax:非同步的JavaScript和xml,跟後臺互動,都用json
2 ajax幹啥用的?前後端做資料互動:
3 之前學的跟後臺做互動的方式:
-第一種:在瀏覽器視窗輸入地址(get)
-第二種:用form表單提交資料
4 特點:
-非同步(非同步和同步的區別:同步是請求發過去,要等著迴應;非同步:不需要等迴應,可以進行其他操作)
-區域性重新整理:
5 $.ajax({
url:'/index/',
type:'post',
//data:往後臺提交的資料
data:{'name':'lqz','age':18},
//成功的時候回撥這個函式
success:function (data) {
alert(data)
}
})
6 上傳檔案
模板層:
$("#btn").click(function () {
//上傳檔案,必須用FormData,生產一個formdata物件
var formdata=new FormData();
formdata.append('name',$("#name").val());
//取出檔案$("#myfile")[0].files拿到的是檔案列表,取第0個把具體的檔案取出來
formdata.append('myfile',$("#myfile")[0].files[0]);

$.ajax({
url:'/files_ajax/',
type:'post',
//不預處理資料,(name=lqz&age=18)
processData:false,
//指定往後臺傳資料的編碼格式(urlencoded,formdata,json)
//現在用formdata物件處理了,就不需要指定編碼格式了,不要給我編碼了
contentType:false,
data:formdata,
success:function (data) {
alert(data)

}
})

檢視層:(跟form表單上傳檔案完全一樣)
def files_ajax(request):
# 提交檔案從,request.FILES中取,提交的資料,從request.POST中取
name=request.POST.get('name')
print(name)
dic_files = request.FILES
myfile = dic_files.get('myfile')
with open(myfile.name, 'wb') as f:
# 迴圈上傳過來的檔案
for line in myfile:
# 往空檔案中寫
f.write(line)
return HttpResponse('ok')

7 基於ajax提交json格式資料
-模板層:
$('#btn').click(function () {
var post_data={'name':$("#name").val(),'pwd':$("#pwd").val()};
console.log(typeof post_data);
// 如何把post_data這個字典,轉成json格式字串
//JSON.stringify相當於python中json.dumpus(post_data)
//pos是個字串,json格式字串
var pos=JSON.stringify(post_data);
console.log(typeof pos);
$.ajax({
url:'/json/',
type:'post',
data:pos,
contentType:'application/json',
success:function (data) {
//如果data是json格式字串,如何轉成物件(字典)?
//data=JSON.parse(data)
console.log(typeof data)
console.log(data)
var ret=JSON.parse(data)
console.log(typeof ret)
console.log(ret.status)
//alert(data)

}
})
})
-檢視層:
def add_json(request):
if request.method=='GET':
return render(request,'json.html')
print(request.POST)
print(request.GET)
print(request.body)
import json
# res是個字典
res=json.loads(request.body.decode('utf-8'))
print(res)
print(type(res))
dic={'status':'100','msg':'登入成功'}
# return HttpResponse('ok')
# 返回給前臺json格式
return HttpResponse(json.dumps(dic))
# return JsonResponse(dic)

-重點:*****
- 請求的編碼方式:
contentType:'application/json',
-響應回來解析的方式
dataType:'json',
作業:

1 使用者在表單輸入使用者名稱與密碼,通過Ajax提交給伺服器,伺服器驗證後返回響應資訊,客戶端通過響應資訊確定是否登入成功,成功,則跳轉到百度,否則,在頁面上顯示相應的錯誤資訊location.href='http://www.baidu.com'
2 兩種提交資料的方式(urlencoded,json)
3 手動建立第三張表:
詳見下午
4 上課講的敲一遍