django jquery ajax 知识点

示例：

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中自定义属性                     - 页面（***）                           删除：             对话框