1. 程式人生 > >Django前端基礎

Django前端基礎

name ots .data can return bootstrap === 失敗 type

準備js,jq
js寫在head裏,jq寫在body裏

bootstrap https://v3.bootcss.com/
databases http://www.datatables.club/
sweetalert http://mishengqiang.com/sweetalert

Django裏要設置下static 的目錄,和app 同等級目錄
STATICFILES_DIRS = [
os.path.join(BASE_DIR, ‘static/‘)
]

<link rel="stylesheet" type="text/css" href="{% static ‘bootstrap-3.3.7-dist/css/bootstrap.min.css‘ %}"/>

<link rel="stylesheet" type="text/css" href="{% static ‘sweetalert-1.0.1/dist/sweetalert.css‘ %}"/>
<link rel="stylesheet" type="text/css" href="{% static ‘DataTables-1.10.15/media/css/dataTables.bootstrap.min.css‘ %}"/>

<script type="text/javascript" src="{% static ‘jquery/jquery-1.12.4.js‘ %}"></script>

<script type="text/javascript" src="{% static ‘bootstrap-3.3.7-dist/js/bootstrap.min.js‘ %}"></script>
<script type="text/javascript" src="{% static ‘sweetalert-1.0.1/dist/sweetalert.min.js‘ %}"></script>
<script type="text/javascript" src="{% static ‘DataTables-1.10.15/media/js/jquery.dataTables.min.js‘ %}"></script>
<script type="text/javascript" src="{% static ‘DataTables-1.10.15/media/js/dataTables.bootstrap.min.js‘ %}"></script>

1、表格table,需要用到bootstrap(css) databases(jq)

2、jq,js中的id 屬性 用#,class 用.
比如定義 id=table_use 那用jq,就是jQuery(‘#table_use‘),class 用jQuery(‘.table_use‘)

3、寫js,jq 必須在script 裏寫,jq就寫在jQuery(document).ready(function () {});裏
<script type="text/javascript">
jQuery(document).ready(function () {
Query(‘#table_user‘).方法 ==》找到id=table_user後 ,然後再用什麽方法

});

</script>

通過ajax的方式把數據傳到後端,然後後端返回數據到前臺
ajax: Asynchronous JavaScript and XML(異步的 JavaScript 和 XML)

調用方式:

url:後端請求的地址
data:發送到後端的數據到請求的地址上
function(result) {console.log(result)} :請求成功後,後端return 返回的數據;console.log(result);返回的是一個字典格式
json : 返回的數據格式

post
jQuery.post(url,data,function(result) {console.log(result)},‘json‘)

get
jQuery.get(url,data,function(result) {console.log(result)},‘json‘)

href="javascript:void(0)" 禁用a標簽跳轉

定義一個errors 的列表,循環服務器返回的errors格式為:errors:{name: "用戶名已存在", password: "密碼不一致", tel: "號碼格式不對", age: "年齡格式不對"},變量k,v;通過push將v加入到自定義的errors中;push相當於list.append(v)
var errors = [];
jQuery.each(result[‘errors‘], function (k, v) {
errors.push(v);
});

sweetalert:
closeOnCancel: true 點擊退出框 退出,為false則不退

服務器端返回json的格式數據:
from django.http import HttpResponse,JsonResponse
return JsonResponse({‘code‘:400,‘errors‘:errors}) ===》返回的數據相當於result

code:200 成功返回
code:400 服務器返回錯誤 (比如驗證失敗)
code:403 未登錄

Django前端基礎