Ajax简单应用之个人简历页面搭建
Posted 老王同鞋
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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，
以上是关于Ajax简单应用之个人简历页面搭建的主要内容，如果未能解决你的问题，请参考以下文章