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>')

             });

         });

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

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

Ajax简单应用之个人简历页面搭建的更多相关文章

扩展auth_user字段、BBS需求分析、创建BBS数据库、注册页面搭建与用户头像展示及Ajax提交数据
昨日内容回顾 csrf跨站请求 1. SQL注入 2. xss攻击 3. csrf跨站请求 4. 密码加密(加盐) '''django中默认有一个中间件来验证csrf''' # 只针对post请求才验 ...
ajax简单后台交互
ajax简单后台交互 1,扯淡单身的生活,大部分时间享受自由,小部分时间忍受寂寞. 生活有时候,其实蛮苦涩,让人难以下咽.那些用岁月积累起来的苦闷,无处宣泄,在自己的脑海里蔓延成一片片荆棘,让你每每 ...
AJAX载入外部JS文件到页面并让其执行的方法（附源码）
一. 向HTML页面中动态添加JS文件(从外部载入)并让其执行的两种方法 1.只适用于IE浏览器的简单方法: 先在文档中放置一张JS"空床"并添加ID:<script id= ...
和我一起打造个简单搜索之ElasticSearch集群搭建
我们所常见的电商搜索如京东,搜索页面都会提供各种各样的筛选条件,比如品牌.尺寸.适用季节.价格区间等,同时提供排序,比如价格排序,信誉排序,销量排序等,方便了用户去找到自己心里理想的商品. 站内搜索对 ...
AJAX简单介绍
什么是AJAX Ajax 是 AsynchronousJavaScript and XML(以及 DHTML 等)的缩写. HTML 用于建立 Web表单并确定应用程序其它部分使用的字段. ·J ...
ajax简单手写了一个猜拳游戏
使用ajax简单写一个猜拳游戏 HTML代码 <!DOCTYPE HTML> <html lang="en-US"> <head> <me ...
javascript AJAX简单原理及什么是ajax
AJAX简单原理供初学者理解 AJAX的原理: Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面.这其 ...
仿联想商城laravel实战---3、前端页面搭建（什么情况下需要路由接参数）
仿联想商城laravel实战---3.前端页面搭建(什么情况下需要路由接参数) 一.总结一句话总结: 比如访问课程的时候,不同的课程(比如云知梦),比如访问不同的商品,比如访问不同的分类 //商品详 ...
BBS 页面搭建知识点整理
表关系图及建表 from django.db import models # Create your models here. from django.contrib.auth.models impo ...

随机推荐

自定义cell的步骤
---恢复内容开始--- 自定义cell的步骤(每个cell的高度不一样,每个cell里面显示的内容也不一样) 1.新建一个继承自UITableViewCell的子类 2.在initWithStyle ...
Spring IOC容器装配Bean_基于注解配置方式
bean的实例化 1.导入jar包(必不可少的) 2.实例化bean applicationContext.xml(xml的写法) <bean id="userDao" cl ...
ASP.NET Core SignalR ：学习消息通讯，实现一个消息通知
什么是 SignalR 目前我用业余时间正在做一个博客系统,其中有个功能就是评论通知,就是假如A用户评论B用户的时候,如果B用户首页处于打开状态,那么就会提示B用户有未读消息.暂时用SignalR来实 ...
实现一个简单的散列表(HashMap)
下面参考java.util.HashMap<K, V>,写了一个简单的散列表,只实现了其中的put和get方法,使用链接法"碰撞冲突".代码最后,自定义了一个Peopl ...
oracle逻辑存储结构
oracle数据库管理系统有三个重要的概念:实例.数据库.数据库服务器.oracle数据库的存储结构可以分为逻辑存储结构和物理存储结构.逻辑存储结构用于描绘Oracle内部组织和管理数据的方式,而物理 ...
keychain 的学习
keychain 的使用 http://www.cnblogs.com/ios8/archive/2012/06/25/iOS-keychain.html
react-native android/ios 手动/自动修改版本号
目录一手动操作 1.Android 2.IOS 二自动从配置文件读取并写入相应的地方 1.package.json配置版本 2.Android: 3.IOS 添加sell代码当版本迭代时候要修 ...
POJ1458 Subsquence
A subsequence of a given sequence is the given sequence with some elements (possible none) left out. ...
zabbix监控系统系列
来自网站:http://www.361way.com/zabbix-summarize/3335.html 一.zabbix的特点 zabbix是一个基于WEB界面的提供分布式系统监视以及网络监视功能 ...
玩转摄像头之基于SDRAM缓冲 USB2.0视频采集系统 MT9T001、MT9P031 演示展示
玩转摄像头之基于SDRAM缓冲 USB视频采集系统 MT9T001.MT9P031 最新设计的系统: 核心板(FPGA+SDRAM)+底板(68013+DVP)+sensor 先看图核心板正 ...

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

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

2.编写HTML页面：

3.编写Ajax.js文件：

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

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

Ajax简单应用之个人简历页面搭建的更多相关文章

随机推荐

热门专题