欢迎光临
我们一起进阶

python——前端ajax

掩体阅读(15)

ajax技术的目的是让javascript发送http请求,与后台通信,获取数据和信息。
ajax技术的原理是实例化xmlhttp对象,使用此对象与后台通信。ajax通信的过程不会影响后续javascript的执行,从而实现异步。

同步和异步
现实生活中,同步指的是同时做几件事情,异步指的是做完一件事后再做另外一件事,程序中的同步和异步是把现实生活中的概念对调,也就是程序中的异步指的是现实生活中的同步,程序中的同步指的是现实生活中的异步。

局部刷新和无刷新
ajax可以实现局部刷新,也叫做无刷新,无刷新指的是整个页面不刷新,只是局部刷新,ajax可以自己发送http请求,不用通过浏览器的地址栏,所以页面整体不会刷新,ajax获取到后台数据,更新页面显示数据的部分,就做到了页面局部刷新。

同源策略
ajax请求的页面或资源只能是同一个域下面的资源,不能是其他域的资源,这是在设计ajax时基于安全的考虑。特征报错提示:

XMLHttpRequest cannot load https://www.baidu.com/. No  
'Access-Control-Allow-Origin' header is present on the requested resource.  
Origin 'null' is therefore not allowed access.
ajax使用方法
常用参数:

1、url 请求地址
2、type 请求方式,默认是’GET’,常用的还有’POST’
3、dataType 设置返回的数据格式,常用的是’json’格式,也可以设置为’html’
4、data 设置发送给服务器的数据
5、success 设置请求成功后的回调函数
6、error 设置请求失败后的回调函数
7、async 设置是否异步,默认值是’true’,表示异步

以前的写法:
.ajax({
    url: 'js/user.json',
    type: 'GET',
    dataType: 'json',
    data:{'aa':1}
    success:function(data){
        ......
    },
    error:function(){
        alert('服务器超时,请重试!');
    }
});

新的写法(推荐):

$.ajax({
    url: 'js/user.json',
    type: 'GET',
    dataType: 'json',
    data:{'aa':1}
})
.done(function(data) {
    ......
})
.fail(function() {
    alert('服务器超时,请重试!');
});

python-前端的的JavaScript(六)内置对象和方法

掩体阅读(31)

JavaScript中的所有事物都是对象:字符串、数字、数组、日期,等等。在JavaScript中,对象是拥有属性和方法的数据。
对象只是带有属性和方法的特殊数据类型。
创建对象:

通过 JavaScript,您能够定义并创建自己的对象。
var person=new Object(); // 创建一个person对象
person.name=”Alex”; // person对象的name属性
person.age=18; // person对象的age属性

Date对象
创建Date对象
//方法1:不指定参数
var d1 = new Date();
console.log(d1.toLocaleString());

//方法2:参数为日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12");
console.log(d3.toLocaleString());

//方法3:参数为毫秒数
var d3 = new Date(5000);
console.log(d3.toLocaleString());
console.log(d3.toUTCString());

//方法4:参数为年月日小时分钟秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString());  //毫秒并不直接显示
Date对象的方法:
var d = new Date(); 
//getDate()                 获取日
//getDay ()                 获取星期几 从星期天开始
//getMonth ()               获取月(0-11)
//getFullYear ()            获取完整年份
//getYear ()                获取年
//getHours ()               获取小时
//getMinutes ()             获取分钟
//getSeconds ()             获取秒
//getMilliseconds ()        获取毫秒
//getTime ()                返回累计毫秒数(从1970/1/1午夜)
json对象

var str1 = ‘{“name”: “Alex”, “age”: 18}’; var obj1 = {“name”: “Alex”, “age”: 18};

// 对象转换成JSON字符串 var str = JSON.stringify(obj1); 注意Json需要大写

// JSON字符串转换成对象 var obj = JSON.parse(str1);

regexp 对象

RegExp 是正则表达式的缩写。

// 创建RegExp对象方式
var reg1 = new RegExp(“pattern”, [flags]);
pattern:正则表达式的文本

[flags]: 匹配模式,这个参数可选 该标志有以下值的任意组合
g :全局匹配;找到所有匹配,而不是在第一个匹配后停止
i :忽略大小写
m :多行; 将开始和结束字符(^和$)视为在多行上工作(也就是,分别匹配每一行的开始和结束(由 \n 或 \r 分割),而不只是只匹配整个输入字符串的最开始和最末尾处。
u: Unicode; 将模式视为Unicode序列点的序列.
y粘性匹配; 仅匹配目标字符串中此正则表达式的lastIndex属性指示的索引(并且不尝试从任何后续的索引匹配)。

RegExp 对象的方法
RegExp 对象有 3 个方法:
test():检索字符串中的指定值。返回值是 true 或 false。

1 var part2=new RegExp('e');
2 undefined
3 part2.test("The best things in life are free");
4 结果true

exec() :检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配,则返回 null,检索字符串中指定的值。返回找到的值,并确定其位置。

var part2=new RegExp('e');
part2.exec("The best things in life are free");
结果;["e", index: 2, input: "The best things in life are free"]

RegExpObject.compile(regexp,modifier): 用于在脚本执行过程中编译正则表达式,也可用于改变和重新编译正则表达式。regexp 正则表达式。modifier规定匹配的类型。”g” 用于全局匹配,”i” 用于区分大小写,”gi” 用于全局区分大小写的匹配。

String对象与正则结合的4个方法

ar s2 = "hello world";

s2.match(/o/g);         // ["o", "o"]             查找字符串中 符合正则 的内容
s2.search(/h/g);        // 0                      查找字符串中符合正则表达式的内容位置
s2.split(/o/g);         // ["hell", " w", "rld"]  按照正则表达式对字符串进行切割
s2.replace(/o/g, "s");  // "hells wsrld"          对字符串按照正则进行替换

其中

s2.match(/o/g)下边式子的缩写,这样就不用新定义的对象了

var s2="hello, world";
var n = new RegExp("o","g");
console.log(s2.match(n ));
//RegExp对象

//创建正则对象方式1
// 参数1 正则表达式
// 参数2 验证模式:g(global)和i(忽略大小写)

// 用户名只能是英文字母、数字和_,并且首字母必须是英文字母。长度最短不能少于6位 最长不能超过12位。

// 创建RegExp对象方式
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$", "g");

// 匹配响应的字符串
var s1 = "bc123";

//RegExp对象的test方法,测试一个字符串是否符合对应的正则规则,返回值是true或false。
reg1.test(s1);  // true

// 创建方式2
// /填写正则表达式/匹配模式
var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/g;

reg2.test(s1);  // true



// String对象与正则结合的4个方法
var s2 = "hello world";

s2.match(/o/g);         // ["o", "o"]             查找字符串中 符合正则 的内容
s2.search(/h/g);        // 0                      查找字符串中符合正则表达式的内容位置
s2.split(/o/g);         // ["hell", " w", "rld"]  按照正则表达式对字符串进行切割
s2.replace(/o/g, "s");  // "hells wsrld"          对字符串按照正则进行替换

// 关于匹配模式:g和i的简单示例
var s1 = "name:Alex age:18";

s1.replace(/a/, "哈哈哈");      // "n哈哈哈me:Alex age:18"
s1.replace(/a/g, "哈哈哈");     // "n哈哈哈me:Alex 哈哈哈ge:18"      全局匹配
s1.replace(/a/gi, "哈哈哈");    // "n哈哈哈me:哈哈哈lex 哈哈哈ge:18"  不区分大小写

RegExp对象

实例
在字符串中全局搜索 “man”,并用 “person” 替换。然后通过 compile() 方法,改变正则表达式,用 “person” 替换 “man”

var str='Every man in the world! Every woman on earth!';
patt=/man/g;
str2=str.replace(patt,"person");
console.log(str2);

结果:

"Every person in the world! Every woperson on earth!"
match对象
abs(x)      返回数的绝对值。
exp(x)      返回 e 的指数。
floor(x)    对数进行下舍入。
log(x)      返回数的自然对数(底为e)。
max(x,y)    返回 x 和 y 中的最高值。
min(x,y)    返回 x 和 y 中的最低值。
pow(x,y)    返回 x 的 y 次幂。
random()    返回 0 ~ 1 之间的随机数。
round(x)    把数四舍五入为最接近的整数。
sin(x)      返回数的正弦。
sqrt(x)     返回数的平方根。
tan(x)      返回角的正切。

Python的GUI编程(十七)Pack、Place、Grid

掩体阅读(84)

简介:

本文讲述如何使用 tkinter 的布局管理 (被称作 layout managers 或 geometry managers). tkinter 有三种布局管理方式:

· pack
· grid
· place

注意这三种布局管理在同一个 master window 里一定不可以混用! 布局管理有以下功能:

· 将控件放置在屏幕上,包括控件的位置及控件的大小
· 将控件注册到本地窗口系统中
· 管理控件在屏幕上的显示

虽然控件自己也可以指定大小和对齐方式等信息, 但最终的控件大小及位置还是由布局管理决定的.

Pack 布局管理

pack 是三种布局管理中最常用的. 另外两种布局需要精确指定控件具体的显示位置, 而 pack 布局可以指定相对位置, 精确的位置会由 pack 系统自动完成. 这也使得 pack 布局没有另外两种布局方式灵活. 所以 pack 是简单应用的首选布局

fill 控件填充方式
from Tkinter import *
root=Tk()
root1=Tk()
root.geometry('200x200')
# printroot.pack_slaves()
Label(root,text='pack').pack()
#使用用默认的设置pack将向下添加组件,第一个在最上方,然后是依次向下排列。
# 这样的话最后一个已经显示出来的,这就是为什么称Pack为弹性的容器的原因了,
# 虽然有这个特性,但它并不是总是能够按照我们的意思进行布局,我们可以强制设置容器的大小,以覆盖Pack的默认设置。Pack的优先级低。
for i in range(5):
    Label(root,text='pack'+str(i)).pack()
# printroot.pack_slaves()
#第一个只保证在Y方向填充,第二个保证在XY两个方向上填充,第三个不使用填充属性,
# 注意Pack只会吝啬地给出可以容纳这三个组件的最小区域,它不允许使用剩余的空间了,故下方留有“空白”。
Label(root,text ='pack5',bg = 'red').pack(fill = Y)
Label(root,text ='pack6',bg = 'blue').pack(fill = BOTH)
Label(root,text ='pack7',bg = 'green').pack(fill = X)

Label(root).pack()

# 创建三个Label分别使用不同的fill属性
Label(root1,text ='pack11',bg = 'red').pack(fill = Y,expand = 1)
Label(root1,text ='pack12',bg = 'blue').pack(fill = BOTH,expand = 1)
Label(root1,text ='pack13',bg = 'green').pack(fill = X,expand = 0)

# 创建三个Label分别使用不同的fill属性,改为水平放置
# 将第一个Label居左放置
Label(root1,text ='pack21',bg = 'red').pack(fill = Y,expand = 1,side = LEFT)
# 将第二个Label居右放置
Label(root1,text ='pack22',bg = 'blue').pack(fill = BOTH,expand = 1,side = RIGHT)
# 将第三个Label居左放置,靠Label放置,注意它不会放到Label1的左边
Label(root1,text ='pack23',bg = 'green').pack(fill = X,expand = 0,side = LEFT)

root.mainloop()
root1.mainloop()
设置组件之间的间隙大小

ipadx,ipady设置内部间隙
padx,pady设置外部间隙
side 顺次放置控件

from Tkinter import *
root=Tk()

# L1 =LabelFrame(root,text = 'pack1',bg = 'red').pack(side = LEFT,ipadx = 20)
Lb1=Label(root,text='Label1',bg='green')
Lb1.pack(side=LEFT,ipadx=20,expand=1)

Lb2=Label(root,text='Label2',bg='blue')
Lb2.pack(side=LEFT,padx=20,expand=1,fill=BOTH)

Lb3=Label(root,text='Label3',bg='red')
Lb3.pack(side=LEFT,pady=20,expand=0,fill=X)

root.mainloop()
Place 布局管理

Place 布局管理可以显式的指定控件的绝对位置或相对于其他控件的位置. 要使用 Place 布局, 调用相应控件的 place() 方法就可以了. 所有 tkinter 的标准控件都可以调用 place()
方法.

下面是一个使用 Place 布局的例子: 为 Label 控件设置随机的背景色, 然后计算各个 Label 的背景色的亮度(灰度值), 如果其亮度小于 120, 则将其前景色(文字颜色, fg属性)设置为白色, 否则设为黑色.

这样做是为了避免使背景色和前景色过于接近而导致文字不易阅读.

from Tkinter import *
root=Tk()
root.geometry('200x200')
lb=Label(root,text='Label',fg='red')
# 使用绝对坐标将组件放到指定的位置
lb.place(x=10,y=10,anchor=NW)

lb1=Label(root,text='Label2',fg='blue')
# 使用相对坐标放置组件位置
# relx,rely指定组件放置的绝对位置,范围为(0-1.0)
lb1.place(relx=0.5,rely=0.5,anchor=CENTER)

# place同时指定多个组件
# v = IntVar()
for i in range(1,6):
    Radiobutton(
        root,
        text = 'Radio' + str(i),
        # variable = v,
        #value = i
        ).place(y = 30* i,anchor = NW)

# 同时使用相对和绝对坐标时,相对坐标优先操作,然后是在这个相对坐标的基础上进行偏移
lb2 = Label(root,text= ' Place2',fg = 'green')
lb3 = Label(root,text= 'Place',fg = 'red')
# 先设置相对坐标为(0.01,0.2)
lb2.place(relx =0.01,rely = 0.2,anchor = CENTER,x = 160,y = 0)
# 先设置相对坐标为(0.01,0.02)
lb3.place(relx =0.01,rely = 0.02,anchor = CENTER,x = 160,y = 160)

root.mainloop()

Grid 布局管理

Pack 作为首选的布局管理方式,其运作方式并不是特别易于理解. 已经由 Pack 布局完成的设计也很难做出改变. Grid 布局在1996年作为另一种可供选择的布局方式被引入. Grid 布局方式易学易用, 但似乎大家还是习惯用 Pack.

Grid 在很多场景下是最好用的布局方式.相比而言, Pack 布局在控制细节方面有些力不从心. Place 布局虽然可以完全控制控件位置, 但这也导致使用 Place 会比其他两种布局方式更加复杂.

Grid 把控件位置作为一个二维表结构来维护,即按照行列的方式排列控件: 控件位置由其所在的行号和列号决定. 行号相同而列号不同的几个控件会被彼此上下排列; 列号相同而行号不同的几个控件会被彼此左右排列.

使用 Grid 布局的过程就是为各个控件指定行号和列号的过程. 不需要为每个格子指定大小, Grid 布局会自动设置一个合适的大小.

from Tkinter import *

colours = ['red', 'green', 'orange', 'white', 'yellow', 'blue']

r = 0
for c in colours:
    Label(text=c, relief=RIDGE, width=15).grid(row=r, column=0)
    Entry(bg=c, relief=SUNKEN, width=10).grid(row=r, column=1)
    r = r + 1

mainloop()  

Python的GUI编程(十五)Text(文本)

掩体阅读(68)

简介

Text 控件用来显示多行文本. Tkinter 的 Text 控件很强大, 很灵活, 可以实现很多功能. 虽然这个控件的主要用途是显示多行文本, 但其还可以被用作简单的文本编辑器, 甚至是网页浏览器. 

Text 控件可以显示网页链接, 图片, HTML页面, 甚至 CSS 样式表. 

from Tkinter import *
root=Tk()

text=Text(root,width=100,height=3,fg='red')
# insert的第一个参数为索引;第二个为添加的内容
text.insert(1.0,'fgjsdfkjgierjgidfkgjol ')
# 
text.insert(1.0,'uilqwwwwwre ')
# 
text.insert('2.end','\n')
text.insert(2.0,'weqrfrfrfrfrfrfrfrf ')
text.insert(2.0,'qwrewrrrrrw ')
# text.insert(3,'fgjsdfkjgierjgidfkgjol')
text.pack()
root.mainloop()

mark是用来表示在Text中位置的一类符号
mark: INSERT/CURRENT/END/SEL_FIRST/SEL_LAST控制添加位置

from Tkinter import *
root = Tk()
t = Text(root)
#向Text中添加10行文本
for i in range(1,10):
    t.insert(1.0,'❤❤❤❤❤❤❤❤\n')
#定义各个Button的回调函数,这些函数使用了内置的 mark:INSERT/CURRENT/END/SEL_FIRST/SEL_LAST
def insertText():
    t.insert(INSERT,' Love❤')
def currentText():
    t.insert(CURRENT,' Love❤')
def endText():
    t.insert(END,' Love❤')
def selFirstText():
    t.insert(SEL_FIRST,' Love❤')
def selLastText():
    t.insert(SEL_LAST,' Love❤')
#INSERT
Button(root,
       text = 'insert Love❤ at INSERT',
       command = insertText
       ).pack(fill = X)
#CURRENT
Button(root,
       text = 'insert Love❤ at CURRENT',
       command = insertText
       ).pack(fill = X)
#END
Button(root,
       text = 'insert Love❤ at END',
       command = endText
       ).pack(fill = X)
#SEL_FIRST
Button(root,
       text = 'insert Love❤ at SEL_FIRST',
       command = selFirstText
       ).pack(fill = X)
#SEL_LAST
Button(root,
       text = 'insert Love❤  at SEL_LAST',
       command = selLastText
       ).pack(fill = X)

t.pack()
root.mainloop()
#几个内置的mark:
#INSERT:光标的插入点
#CURRENT:鼠标的当前位置所对应的字符位置
#END:这个Text buffer的最后一个字符
#SEL_FIRST:选中文本域的第一个字符,如果没有选中区域则会引发异常
#SEL_LAST:选中文本域的最后一个字符,如果没有选中区域则会引发 异常

使用表达式来增强mark
表达式(expression)可以个性任何的Indexes
– count chars :前移count字符
– count chars : 后移count字符
– count lines : 前移count行
– count lines : 后移count行
– linestart: 移动到行的开始
– linesend: 移动到行的结束
– wordstart:移动到字的开始
– wordend:移动到字的结束

from Tkinter import *
root = Tk()
t = Text()
# 向第一行,第一列添加文本0123456789
for i in range(1,10):
    t.insert(1.0,'0123456789\n')
a = 'test_mark'
def forwardChars():
    # 直接连接字符串
    t.mark_set(a,CURRENT + '+ 5 chars')
    # t.mark_set(a,CURRENT + '+5c')
def backwardChars():
    # t.mark_set(a,CURRENT + '- 5 chars')
    t.mark_set(a,CURRENT + '-5c')
def forwardLines():
    # t.mark_set(a,CURRENT + '+ 5 lines)
    t.mark_set(a,CURRENT + '+5l')
def backwardLines():
    # t.mark_set(a,CURRENT + '- 5 lines)
    t.mark_set(a,CURRENT + '-5l')
def lineStart():
    # 注意linestart前面的那个空格不可省略
    t.mark_set(a,CURRENT + ' linestart')
def lineEnd():
    # 注意lineend前面的那个空格不可省略
    t.mark_set(a,CURRENT + ' lineend')
def wordStart():
    # 移动到当前字的开始。
    t.mark_set(a,CURRENT + ' wordstart')
def wordend():
    # 移动到当前字的结束
    t.mark_set(a,CURRENT + ' wordend')
# mark:test_mark默认值为CURRENT
t.mark_set(a,CURRENT)
Button(root,text = 'forward 5 chars',command = forwardChars).pack(fill = X)
Button(root,text = 'backward 5 chars',command = backwardChars).pack(fill = X)
Button(root,text = 'forward 5 lines',command = forwardLines).pack(fill = X)
Button(root,text = 'backward 5 lines',command = backwardLines).pack(fill = X)
Button(root,text = 'line start',command = lineStart).pack(fill = X)
Button(root,text = 'line end',command = lineEnd).pack(fill = X)
Button(root,text = 'word start',command = lineEnd).pack(fill = X)
Button(root,text = 'word end',command = lineEnd).pack(fill = X)
# 测试三个位置的不同,CURRENT可以得知是当前光标的位置;mark就表示mark的位置了,INSERT好像一植都在1.0处没有改变。
def insertText():
    t.insert(INSERT,'insert')
def currentText():
    t.insert(CURRENT,'current')
def markText():
    t.insert(a,'mark')
Button(root,text = 'insert jcodeer.cublog.cn',command = insertText).pack(fill = X)
Button(root,text = 'current jcodeer.cublog.cn',command = currentText).pack(fill = X)
Button(root,text = 'mark jcodeer.cublog.cn',command = markText).pack(fill = X)
t.pack()
root.mainloop()

滑动条移动读取文本:

from Tkinter import *
root=Tk()
S=Scrollbar(root)
T=Text(root,height=5,width=50)
S.pack(side=RIGHT,fill=Y)
T.pack(side=LEFT,fill=Y)
S.config(command=T.yview)
T.config(yscrollcommand=S.set)
quote='T ext widg ets provide advanced capabilities that allow you to edit a multiline text and format the way it has to be displayed, such as chang ing its color and font.\
You can also use eleg ant structures like tabs and marks to locate specific sections of the text, and apply chang es\
to those areas. Moreover, you can embed windows and imag es in the text because this widg et was desig ned to\
handle both plain and formatted text.'
T.insert(END,quote)
mainloop()
from Tkinter import *
root=Tk()

text1=Text(root,height=20,width=30)
photo=PhotoImage(file='D:/temp/1.gif')
text1.insert(END,'\n')
text1.image_create(END,image=photo)

text1.pack(side=LEFT)

text2=Text(root,height=20,width=50)
scroll=Scrollbar(root,command=text2.yview)
text2.tag_config('bold_italics',font=('Arial',12,'bold','italic'))
text2.tag_config('big',font=('Verdana',20,'bold'))
text2.tag_config('color',foreground='#476042',font=('Tempus Sans ITC',12,'bold'))
text2.tag_bind('follow','<1>',lambda  e,t=text2:t.insert(END,'NO Pass'))
text2.insert(END,'\n Flower\n','big')
quto='池中荷花'
text2.insert(END,quto,'color')
text2.insert(END,'follow-up\n','follow')
text2.pack(side=LEFT)
scroll.pack(side=RIGHT,fill=Y)

root.mainloop()

tag _config:您可以使用此方法来配置标记属性,其中包括:对齐(中心、左或右)、选项卡(此属性与文本小部件选项卡的属性具有相同的功能)和下划线(用于下划线标记的文本)。

小白学堂,学的不止是技术,更是前程

关于我们免责声明