django jquery ajax 知识点  

<div>1</div>

<div>

<divname='123'>

<h1>fff</h1>

2

<a>ff</a>

<h1>fff</h1>

</div>

<div>

大丰收的

<div>3</div>

<divclass='i1'>4</div>

<divclass='i1'>5</div>

<div>6</div>　

$.ajax({

url: '/index/',

type: "GET",

data: {''...},

success:function(arg){

}

})

$('#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() 找找html keyword">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() 删除被选的父元素

对话框（JS）：$('#i1对话框ID').model(hide,show)

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中自定义属性

- 页面（***）

删除：

对话框

<div>1</div>

<div>

<divname='123'>

<h1>fff</h1>

2

<a>ff</a>

<h1>fff</h1>

</div>

<div>

大丰收的

<div>3</div>

<divclass='i1'>4</div>

<divclass='i1'>5</div>

<div>6</div>　

$.ajax({

url: '/index/',

type: "GET",

data: {''...},

success:function(arg){

}

})

$('#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() 找找html keyword">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() 删除被选的父元素

对话框（JS）：$('#i1对话框ID').model(hide,show)

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中自定义属性

- 页面（***）

删除：

对话框