django jquery ajax 知識點
阿新 • • 發佈：2017-09-08
django func data 編輯 包含 pac tle 內部 on()
示例：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div id=‘d‘>1</div>
<div>
<div id=‘i1‘ name=‘123‘>
<h1>fff</h1>
2
<a id=‘v‘>ff</a>
<h1>fff</h1>
</div>
<div>
大豐收的
<div>3</div>
<div class=‘i1‘>4</div>
<div class=‘i1‘>5</div>
<div>6</div>
|
ajax用法：
| 1 2 3 4 5 6 7 8 |
$.ajax({
url: ‘/index/‘,
type: "GET",
data: {‘‘...},
success:function(arg){
}
})
|
1.先導入jquers文件，才能使用ajax
2、方法
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
$(‘#i1‘) 找id=i1的標簽
$(‘.i1‘) 找(類) class="i1"$(‘#i1‘).attr(‘name‘) 找找id=i1的標簽，去其中找name對應的屬性值
$(‘#i1‘).attr(‘name‘,‘123‘) 找找id=i1的標簽，去其中找name,重新設置值
$(‘#i1‘).text() 找找id=i1的標簽, 獲取中間的文本內容 2 ff
$(‘#i1‘).html() 找找id=i1的標簽, 獲取中間的文本內容 2<a>ff</a>
$(‘#i1‘).append(‘<h1>fff</h1>‘) 找找id=i1的標簽, 將參數追加到內部尾部
var tag = document.createElement(‘h1‘) 創建一個<h1> </h1>
$(tag).text(‘ffff‘) 獲取ffff
$(‘#i1‘).append(tag) 把ffff加到h1標簽中，結果：<h1>ffff</h1>
$(‘#i1‘).append(‘<h1>fff</h1>‘) 找找id=i1的標簽, 將參數追加到內部尾部
$(‘#i1‘).prepend(‘<h1>fff</h1>‘) 找找id=i1的標簽, 將參數追加到內部頭部
$(‘#i1‘).after(‘<h1>fff</h1>‘) 找到id=li的標簽，將參數追加到後面
$(‘#i1‘).before(‘<h1>fff</h1>‘) 找到id=li的標簽，將參數追加到前面
$(‘#v‘).parent() 返回被選元素的直接父元素。
$(‘#v‘).parent().parent() 返回被選元素的爺爺
$(‘#v‘).parent().remove() 刪除被選的父元素
|
FontAwesome 圖標 用:class
BootStrap 表格,按鈕 ,表單類
| 1 |
對話框（JS）：$(‘#i1對話框ID‘).model(hide,show)
|
ajax: 依賴 jquery
綁定事件: $.ajax({})
jquery :$()
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 |
1.
Python序列化
字符串 = json.dumps(對象) 對象->字符串
對象 = json.loads(字符串) 字符串->對象
JavaScript:
字符串 = JSON.stringify(對象) 對象->字符串
對象 = JSON.parse(字符串) 字符串->對象
應用場景：
數據傳輸時，
發送：字符串
接收：字符串 -> 對象
2. ajax
$.ajax({
url: ‘http//www.baidu.com‘,
type: ‘GET‘,
data: {‘k1‘:‘v1‘},
success:function(arg){
// arg是字符串類型
// var obj = JSON.parse(arg)
}
})
$.ajax({
url: ‘http//www.baidu.com‘,
type: ‘GET‘,
data: {‘k1‘:‘v1‘},
dataType: ‘JSON‘,
success:function(arg){
// arg是對象
}
})
$.ajax({
url: ‘http//www.baidu.com‘,
type: ‘GET‘,
data: {‘k1‘:[1,2,3,4]},
dataType: ‘JSON‘,
success:function(arg){
// arg是對象
}
})
發送數據時：
data中的v
a. 只是字符串或數字
$.ajax({
url: ‘http//www.baidu.com‘,
type: ‘GET‘,
data: {‘k1‘:‘v1‘},
dataType: ‘JSON‘,
success:function(arg){
// arg是對象
}
})
b. 包含屬組
$.ajax({
url: ‘http//www.baidu.com‘,
type: ‘GET‘,
data: {‘k1‘:[1,2,3,4]},
dataType: ‘JSON‘,
traditional: true,
success:function(arg){
// arg是對象
}
})
c. 傳字典
b. 包含屬組
$.ajax({
url: ‘http//www.baidu.com‘,
type: ‘GET‘,
data: {‘k1‘: JSON.stringify({}) },
dataType: ‘JSON‘,
success:function(arg){
// arg是對象
}
})
3. 事件委托
$(‘要綁定標簽的上級標簽‘).on(‘click‘,‘要綁定的標簽‘,function(){})
$(‘要綁定標簽的上級標簽‘).delegate(‘要綁定的標簽‘,‘click‘,function(){})
4. 編輯
5. 總結
新URL方式：
- 獨立的頁面
- 數據量大或條目多
對話框方式：
- 數據量小或條目少
-增加，編輯
- Ajax: 考慮，當前頁；td中自定義屬性
- 頁面（***）
刪除：
對話框
|
django jquery ajax 知識點