• 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
    '
    59             response_header = 'Server: PWS/1.0
    '
    60             response_body = 'sorry nor found page!
    '.capitalize()
    61             send_data = (response_line + response_header + '
    ' + response_body).encode('utf-8')
    62             client_socket.send(send_data)
    63         else:
    64             # 如果存在则换回请求的页面信息
    65             response_line = 'HTTP/1.1 200 OK
    '
    66             response_header = 'Server: PWS/1.0
    '
    67             send_data = (response_line + response_header + '
    ').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,

     

     

     

    该花的钱要花,该吃的饭要吃。
  • 相关阅读:
    点击Notification之后收起通知栏
    Visual Studio常用的快捷键
    数据库语法二之外键
    数据引擎 创建表完整语法,字段类型,约束条件
    数据库 tcp协程实现并发 回调函数
    GIL以及协程
    进程,互斥锁,生产者消费者,线程
    udp协议,进程(同步,异步)
    单例模式,网络编程之tcp协议以及粘包问题
    网络编程
  • 原文地址:https://www.cnblogs.com/chao666/p/12026450.html
Copyright © 2020-2023  润新知