Ajax简单应用之个人简历页面搭建

1.搭建HTTP静态Web服务器。

代码实现：

 1 # 1.导入socket模块
 2 import socket
 3 import threading
 4 
 5 
 6 # 创建服务器类
 7 class HttpServerSocket(object):
 8     # 给服务器类的对象设置属性
 9     def __init__(self):
10         # 2.创建Socket对象
11         self.server_socket = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
12         # 3.设置端口复用
13         self.server_socket.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, True)
14         # 4.绑定端口
15         self.server_socket.bind(('', 8000))
16         # 5.设置监听
17         self.server_socket.listen(128)
18 
19     def start(self):
20         while True:
21             # 6.等待客户端连接
22             client_socket, ip_port = self.server_socket.accept()
23             # gevent.spawn(self.task, client_socket, ip_port)
24             print("上线了", ip_port)
25             threading.Thread(target=self.task, args=(client_socket, ip_port), daemon=True).start()
26 
27     def task(self, client_socket, ip_port):
28         # 7.接收数据
29         recv_data = client_socket.recv(1024).decode('utf-8')
30         print(recv_data)
31         if not recv_data:
32             print("客户端：%s下线了，端口号为：%s" % ip_port)
33 
34         # 8.发送数据
35         # 判断请求资源是否包含参数
36         # 请求行格式：GET /index.html HTTP/1.1
37         recv_path = recv_data.split()[1]
38         # print("第一次分割",recv_path)
39         # 如果有参数则以？分割
40         if '?' in recv_path:
41             real_recv_path = recv_path.split('?')[0]
42             # print("?分割",real_recv_path)
43         else:
44             # 如果没有参数，则保持请求路径不变
45             real_recv_path = recv_path
46             # print("无？分割",real_recv_path)
47 
48         # 设置没指定资源路径，默认返回index.html
49         if real_recv_path == '/':
50             real_recv_path = '/index.html'
51 
52         # 判断请求的资源路径是否存在
53         try:
54             with open(f"static{real_recv_path}", "rb") as file:
55                 response_body = file.read()
56         except  Exception as e:
57             # 如果不存在则返回404
58             response_line = 'HTTP/1.1 404 NOT FOUND\r\n'
59             response_header = 'Server: PWS/1.0\r\n'
60             response_body = 'sorry nor found page!\r\n'.capitalize()
61             send_data = (response_line + response_header + '\r\n' + response_body).encode('utf-8')
62             client_socket.send(send_data)
63         else:
64             # 如果存在则换回请求的页面信息
65             response_line = 'HTTP/1.1 200 OK\r\n'
66             response_header = 'Server: PWS/1.0\r\n'
67             send_data = (response_line + response_header + '\r\n').encode('utf-8') + response_body
68             client_socket.send(send_data)
69         finally:
70             # 断开与客户端连接
71             client_socket.close()
72 
73     def __del__(self):
74         # 当服务端程序结束时停止服务器服务
75         self.server_socket.close()
76 
77 
78 def main():
79     http_socket = HttpServerSocket()
80     http_socket.start()
81 
82 
83 if __name__ == '__main__':
84     main()

2.编写HTML页面：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Alax练习</title>
 6     <script src="js/jquery-1.12.4.min.js"></script>
 7     <script src="js/ajax.js"></script>
 8 
 9 </head>
10 <body>
11     <div id="div" style="text-align: center;"><h1>个人简历信息</h1></div>
12          <hr>
13 
14     <table>
15         <tr><td>个人照片：</td><td id="photo">无</td></tr>
16         <tr><td>姓名：</td><td id="name">无</td></tr>
17         <tr><td>年龄：</td><td id="age">无</td></tr>
18         <tr><td>毕业院校：</td><td id="school">无</td></tr>
19         <tr><td>专业：</td><td id="vocational">无</td></tr>
20         <tr><td>专攻语言：</td><td id="langage">无</td></tr>
21         <tr><td>开发经验：</td><td id="empiric">无</td></tr>
22         <tr><td>个人技能：</td><td id="habby">无</td></tr>
23         <tr><td>获奖信息：</td><td id="reward">无</td></tr>
24     </table>
25         <hr>
26 </body>
27 </html>

3.编写Ajax.js文件：

 1         $(function(){
 2             $.get('resume.json',{},function(response){
 3                 $('#photo').html("<img src='"+response[0]+"'>");
 4                 $('#name').html(response[1]);
 5                 $('#age').html(response[2]);
 6                 $('#school').html(response[3]);
 7                 $('#langage').html(response[4]);
 8                 $('#empiric').html(response[5]);
 9                 $('#habby').html(response[6]);
10                 $('#reward').html(response[7]);
11             },'JSON').error(function(){
12                 $('#div').html('<h1>对不起，请求错误！</h1>')
13             });
14         });

 

4.启动HTTP静态Web服务器，

访问http://127.0.0.1:8000/Ajax.html，

 

 

 

posted @ 2019-12-11 23:10  老王同鞋  阅读(372)  评论(0)  编辑  收藏  举报