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

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

代码实现：

 # 1.导入socket模块

 import socket

 import threading

 # 创建服务器类

 class HttpServerSocket(object):

     # 给服务器类的对象设置属性

     def __init__(self):

         # 2.创建Socket对象

         self.server_socket = socket.socket(socket.AF_INET, socket.SOCK_STREAM)

         # 3.设置端口复用

         self.server_socket.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, True)

         # 4.绑定端口

         self.server_socket.bind(('', 8000))

         # 5.设置监听

         self.server_socket.listen(128)

     def start(self):

         while True:

             # 6.等待客户端连接

             client_socket, ip_port = self.server_socket.accept()

             # gevent.spawn(self.task, client_socket, ip_port)

             print("上线了", ip_port)

             threading.Thread(target=self.task, args=(client_socket, ip_port), daemon=True).start()

     def task(self, client_socket, ip_port):

         # 7.接收数据

         recv_data = client_socket.recv(1024).decode('utf-8')

         print(recv_data)

         if not recv_data:

             print("客户端：%s下线了，端口号为：%s" % ip_port)

         # 8.发送数据

         # 判断请求资源是否包含参数

         # 请求行格式：GET /index.html HTTP/1.1

         recv_path = recv_data.split()[1]

         # print("第一次分割",recv_path)

         # 如果有参数则以？分割

         if '?' in recv_path:

             real_recv_path = recv_path.split('?')[0]

             # print("?分割",real_recv_path)

         else:

             # 如果没有参数，则保持请求路径不变

             real_recv_path = recv_path

             # print("无？分割",real_recv_path)

         # 设置没指定资源路径，默认返回index.html

         if real_recv_path == '/':

             real_recv_path = '/index.html'

         # 判断请求的资源路径是否存在

         try:

             with open(f"static{real_recv_path}", "rb") as file:

                 response_body = file.read()

         except  Exception as e:

             # 如果不存在则返回404

             response_line = 'HTTP/1.1 404 NOT FOUND\r\n'

             response_header = 'Server: PWS/1.0\r\n'

             response_body = 'sorry nor found page!\r\n'.capitalize()

             send_data = (response_line + response_header + '\r\n' + response_body).encode('utf-8')

             client_socket.send(send_data)

         else:

             # 如果存在则换回请求的页面信息

             response_line = 'HTTP/1.1 200 OK\r\n'

             response_header = 'Server: PWS/1.0\r\n'

             send_data = (response_line + response_header + '\r\n').encode('utf-8') + response_body

             client_socket.send(send_data)

         finally:

             # 断开与客户端连接

             client_socket.close()

     def __del__(self):

         # 当服务端程序结束时停止服务器服务

         self.server_socket.close()

 def main():

     http_socket = HttpServerSocket()

     http_socket.start()

 if __name__ == '__main__':

     main()

2.编写HTML页面：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Alax练习</title>

     <script src="js/jquery-1.12.4.min.js"></script>

     <script src="js/ajax.js"></script>

 </head>

 <body>

     <div id="div" style="text-align: center;"><h1>个人简历信息</h1></div>

          <hr>

     <table>

         <tr><td>个人照片：</td><td id="photo">无</td></tr>

         <tr><td>姓名：</td><td id="name">无</td></tr>

         <tr><td>年龄：</td><td id="age">无</td></tr>

         <tr><td>毕业院校：</td><td id="school">无</td></tr>

         <tr><td>专业：</td><td id="vocational">无</td></tr>

         <tr><td>专攻语言：</td><td id="langage">无</td></tr>

         <tr><td>开发经验：</td><td id="empiric">无</td></tr>

         <tr><td>个人技能：</td><td id="habby">无</td></tr>

         <tr><td>获奖信息：</td><td id="reward">无</td></tr>

     </table>

         <hr>

 </body>

 </html>

3.编写Ajax.js文件：

         $(function(){

             $.get('resume.json',{},function(response){

                 $('#photo').html("<img src='"+response[0]+"'>");

                 $('#name').html(response[1]);

                 $('#age').html(response[2]);

                 $('#school').html(response[3]);

                 $('#langage').html(response[4]);

                 $('#empiric').html(response[5]);

                 $('#habby').html(response[6]);

                 $('#reward').html(response[7]);

             },'JSON').error(function(){

                 $('#div').html('<h1>对不起，请求错误！</h1>')

             });

         });

巴特西

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

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

2.编写HTML页面：

3.编写Ajax.js文件：

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

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

最新文章

热门文章