從零開始學Python-day10

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-8
from flask import Flask ,render_template

import json

app = 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_template
import json
app = 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文件下載，並放到對應目錄下。

步驟三：運行測試。

從零開始學Python-day10

Nginx R31 doc 官方文檔-01-nginx 如何安裝

Qt/C++音視頻開發74-合併標籤圖形/生成yolo運算結果圖形/文字和圖形合併成一個/水印濾鏡

挑戰程序設計競賽 2.2章習題 POJ - 3617 Best Cow Line 貪心

字節面試：MySQL什麼時候鎖表？如何防止鎖表？

.NET8連接SQL SERVER 2008 R2 報：證書鏈是由不受信任的頒發機構頒發的

golang開發環境搭建(win10)

python計算機視覺學習筆記——PIL庫的用法

Golang初學：獲取程序內存使用情況，std runtime

讀《圖解HTTP》總結--第一章

讀《圖解HTTP》總結--第四章

讀《圖解HTTP》總結--第二章

從零開始學Python-day1

讀《圖解HTTP》總結--第三章

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結