从零开始学Python-day10

2017-01-09 19:20:48来源:作者:人点击

第七城市
Python-day10

学习要有定位,明确目标的去学习。坚持下去,然后就会有所收获--leaves (ps:有时候终点看似很近却又很远)

python-09 --jQuery详解、AJax相关知识以及html页面包装

一、jQuery详解
任务:jQuery的w3c教程看完,初步了解jQuery
网页链接:http://www.w3school.com.cn/jquery/index.asp

1.1 jQuery场景:主要对html内元素进行操作

1.用来选择html页面中指定的标签【通过id、class等】

2.操作-DOM元素进行增删改查
2.1 操作html文档内容---常用元素 table form div等
2.2 操作html元素属性---常用属性
2.3操作html元素的样式---CSS动作就是样式

3.事件 ---什么情况下触发jQuery的操作,ajax等

1.2 jQuery的使用格式
$(选择器).动作 ==> $(selector).action()
$ ==>美元符号定义jQuery

选择器(selector) ===>"查询"和"查找"HTML元素
jQuery的action()执行对元素的操作


常用的动作有以下四种:

$(选择器).html(value) #获取或者设置HTML标签值

$(选择器).val(value) #获取或者设置表单值
$(选择器).attr(value) #获取或者设置属性标签值
$(选择器).css(value) #获取或者设置标签样式值

选择器种类:

种类一:id选择器:一个html页面中id是唯一的

$('#idname').action() ==== > $('username').action()

1.html() 操作HTML元素

2.val() 操作表单的动作

$('button').action() ===> $('#okbtn').attr('data-id')

$('.class').action() ===>


种类二 :类选择器 class,主要是id太多的情况很难管理(id选择器是单个操作,class为批量操作)

class = "btn" 按钮类 ==> $(".update-btn").css('color','red')==>获取所有的更新按钮并将颜色更改为红色。

选择器举例:
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。


1.3 jQuery使用小例

$(选择器).val(value) #获取或者设置表单值

1.3.1 初试jQuery的id选择器
html代码为:
<div id='divtest'> divtest </div><div id='div1'> </div><div id='div2'></div><script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script><script>alert($('#divtest').html())$('#div1').html('nihao div1')$('#div2').html($('#divtest').html())</script>


执行效果截图:




1.3.2 jQuery添加事件响应

html代码为:

<div id='divtest'> divtest </div><div id='div1'> </div><div id='div2'></div><button type='button'>click me</button><script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script><script>alert($('#divtest').html())$('#div1').html('nihao div1')//$('#div2').html($('#divtest').html())$('button').click(function(){$('#div2').html($('#divtest').html())})</script>
执行效果截图为:




$(选择器).css(value) #获取或者设置标签样式值
1.3.3 使用jQuery改变CSS样式值
<div id='divtest'> divtest </div><div id='div1'> </div><div id='div2'></div><button type='button'>click me</button><script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script><script>alert($('#divtest').html())$('#div1').html('nihao div1')$('button').click(function(){$('#div2').html($('#divtest').html())})$('#div1').css('color','blue'); //改变css颜色的样式$('#div2').css('color','red');</script>
执行效果截图:



1.3.4 Button按钮绑定id
html代码:

<button id='okbtn' type='button' data-id='1'>click me</button><script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
执行效果截图:




class 选择器练习:
html代码练习:

<div id='divtest'> divtest </div><div id='div1'> </div><div id='div2'></div><button id='okbtn' type='button' data-id='1'>click me</button><p class='reboot'>33333</p><p class='reboot'>33333</p><p class='reboot'>33333</p><p class='reboot'>33333</p><p class='reboot'>33333</p><p class='reboot'>33333</p><p class='reboot'>33333</p><script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script><script>alert($('#divtest').html())$('#div1').html('nihao div1')$('button').click(function(){$('#div2').html($('#divtest').html()) $('.reboot').css('color','red')})$('#div1').css('color','blue');$('#div2').css('color','red');</script>
执行效果截图




1.4 jQuery小结

1. id选择器和class选择器是最常用的两种选择器

2. id选择器的id在页面html元素中是唯一的标示。适用于某一个特定元素的定义


3. class选择器,是同一类元素共用属性,是用于相同元素类型的批量定义

4.也可以根据元素类型选择,如下图






5.多个选择器的写法
$('选择器1,选择器2,...')
$('#aaa,p').css("color","green")

二、jQuery 之AJAX
AJAX是与服务器交换数据的艺术,他在不重载全部页面的情况下,实现了对部分网页的更新。(使用AJAX的应用程序案例:谷歌地图、腾讯地图、优酷视频、人人网等)

2.1 初试AJAX异步请求
##flask逻辑端代码[root@xiaowei AJAX]# cat ajax.py #!/usr/bin/python#coding:utf-8from flask import Flask ,render_templateimport jsonapp = Flask(__name__)#import session后初始化加密串app.secret_key = "qazQAZ!@"@app.route('/')def index():return render_template('ajax.html')@app.route('/list')def list():user = {'id':1,'name':'test','age': 18}return json.dumps({'code':0,'result':user})if __name__ == "__main__":app.run(host='0.0.0.0',port=888,debug=True)##html前端代码<html><body><div id='test'> <table border='1px'><thead><tr><th>Name</th><th>Age</th><th>Option</th></tr></thead><tbody><!--{% if user %}<tr><td><input id='name' value= {{ user.name}}></td><td><input id='age' value ={{ user.age}}></td><td><input  name='update-btn' type='button' data-id= {{ user.id }}  value='update'></td>{% endif %}--></tbody></table></div></body><script src='/static/js/jquery-3.1.0.min.js'></script><script>$.getJSON('/list',function(data){	console.log(data)//{'code':0,'result':{'age': 18, 'id': 1, 'name': 'test'}	if (data['code'] == 0){		var str = ""		data = data['result'] 		str = "<tr>"+ 			'<td>' +  data['name'] + '</td>' +			'<td>' + data['age'] + '</td>' +			‘<td>’+'<button data-id ="' +  data['id'] + '">更新</button>' + '</td>' +			"</tr>"		console.log(str)		$('tbody').html(str)	}else {		$('#errmsg').html("fail")	}})</script></html>


验证截图:





ajax异步实现html前端拼接:





2.2 回调函数
flask逻辑端可以接受GET和POST两种请求,回调函数就是接收请求url的结果.

回调函数的格式:
$.getJSON(请求逻辑端的url,回调函数(接受逻辑端反馈结果的函数){



})

小例子:
$.getJSON("/list",function(data){
拿到逻辑端的数据后,对数据处理,一般情况下就是渲染html页面
})

2.3 AJAX的优点:页面和数据分离(以AJAX.py为例)

1.index页面返回为空页面,但没有数据

2.list页面只返回数据,但是没有页面

2.4 AJAX实现POST请求

完整的ajax的post请求前后端代码:

前端:from flask import Flask ,render_templateimport jsonapp = Flask(__name__)@app.route('/')def index(): return render_template('ajax.html')@app.route('/list')def list(): user = {'id':1,'name':'test','age': 18} return json.dumps({'code':0,'result':user})	@app.route('/add',methods=['GET','POST'])def add(): user = dict((k,v[0]) for k ,v in dict(request.form).items()) print user return json.dumps({'code':0,'result':user})if __name__ == "__main__":app.run(host='0.0.0.0',port=888,debug=True)前端html:<html><body><div id='test'><table border='1px' id='utable'><thead><tr><th>Name</th><th>Age</th><th>Option</th></tr></thead><tbody></tbody></table><form id="loginForm"><tr><td>Name<input id ="name"  type='text' name='name'> </td></tr><tr><td>Password<input id ="password" type='password' name='password'> </td></tr><tr><td><input id ="loginbtn" type='submit' value='login'></td></tr></form></body><script src='/static/js/jquery-3.1.0.min.js'></script><script>$.getJSON('/list',function(data){	console.log(data)//{'code':0,'result':{'age': 18, 'id': 1, 'name': 'test'}	if (data['code'] == 0){		var str = ""		data = data['result']		str = "<tr>"+			'<td>' +  data['name'] + '</td>' +			'<td>' + data['age'] + '</td>' +			'<td>' + '<button id="updatebtn" data-id="' +  data['id'] + '">更新</button>' + '</td>' + "</tr>"		console.log(str)		$('tbody').html(str)	}else {		$('#errmsg').html("fail")	}})$('#loginbtn').on('click',function(){var str = $('#loginForm').serialize()console.log(str)$.post('/add',str,function(data){console.log(data)data = JSON.parse(data)console.log(data)if (data['code'] == 0){alert(data['result']['name'])}else{alert('Wrong')}})return  false})</script></html>

结果截图:





实现原理:回调函数





2.5 $.get()和$.getJSON()的区别

1.$.get(url,[data],[callback])
说明:URL为请求地址,data为请求数据的列表,callback为请求成功后的回调函数,回调函数接受两个参数,第一个是服务器返回的数据;第二个参数是服务器的状态,是可选参数。

2.$.post(url,[data],[callback],[type])

说明:同$.get(),只是多了一个type参数,type为请求的数据类型,可以是html、xml、json等,如果我们设置这个type参数为JSON时,那么返回的格式为json格式,否则就是和$.get()一样返回字符串。

3.$.getJSON(url,[data],[callback])

JSON.parse() 将字符串转换为字典格式


4.$.ajax(option)

$.ajax()这个函数功能强大,可以对Ajax进行许多精确的控制。

$.ajax({url: "ajax/ajax_selectPicType.aspx",data:{Full:"fu"},type: "POST",dataType:'json',success:CallBack,error:function(er){BackErr(er);}});


2.6 AJAX的应用场景(就用户管理系统而言)

AJAX的用处:

1.login登录模块使用ajax实现,登录成功弹出提示,确认后跳转个人页面

2.更新用户

更新第一步:update分为两块

GET:返回一个空的表单html,我们需要通过ajax的getJSon请求getByid这个逻辑端拿到数据,然后将数据渲染到这个空表单中

POST请求:ajax的POST请求逻辑端返回JSON



3.删除也使用ajax来完成

三、login登录页面嵌套
步骤一:根据平常上网登录时候看到比较好看的登录界面进行嵌套,本次以jumpserver开源为例。
如图:




步骤二:根据src元素进行js、css文件下载,并放到对应目录下。

步骤三:运行测试。




本文出自 “11931192” 博客,转载请与作者联系!
第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台