• 数据库数据转json字符串及ajax请求数据渲染

    续接：1.使用web框架程序处理客户端的动态资源请求代码实现 

               2.web框架之路由列表及SQL语句查询数据库数据替换模板变量

    一、数据库数据转json字符串

    web框架程序可以开发数据接口，为客户端程序提供数据服务，步骤如下

    1. 根据sql语句查询数据库
    2. 把数据转成json字符串返回
    3. 浏览器通过指定接口地址获取web框架提供的数据
    • 字符串转换：json.dumps(指定对象，ensure_ascii=False)
      • 第一个参数表示要把指定对象转成json字符串
      • ensure_ascii=False表示不使用ascii编码，可以在控制台显示中文

    webFrame.py文件如下

    1. import json
    2. import pymysql
    3. route_list = []  # 定义路由列表
    4. def route(path):   # 定义带参数的装饰器
    5.     def outFunc(func):  # 装饰器
    6.         route_list.append((path, func))   # 执行装饰器装饰指定函数时，将路径和函数追加到路由列表
    7.         def inFunc():
    8.             return func()  # 执行指定函数
    9.         return inFunc
    10.     return outFunc    # 返回装饰器
    11.  
    12. @route('/center.html')
    13. def center():  # 获取个人中心数据
    14.     status = "200 OK 成功状态！"   # 响应状态
    15.     response_header = [("Server", "PWS2.0"), ("Content-Type", "text/html;charset=utf-8")]   # 响应头,需加上("Content-Type", "text/html;charset=utf-8")，指定编码格式，否则中文乱码
    16.  
    17.     # 查询数据库
    18.     # 创建连接对象
    19.     conn = pymysql.connect(host="localhost", port=3306, user='root', password='******', database='python_sql',
    20.                            charset='utf8')
    21.     cur = conn.cursor()  # 获取游标对象
    22.     sql = 'select s.name,s.age,s.gender,t.NAME from students as s inner join student2 as t on s.id=t.id;'  # 查询SQL语句
    23.     rowCount = cur.execute(sql)  # 执行SQL语句，返回执行过程中影响的行数
    24.     print('SQL语句执行过程中影响的行数为%d' % rowCount)
    25.     result = cur.fetchall()
    26.     print("数据库查询结果为：", result)
    27.  
    28.     # 将元祖转为列表字典
    29.     resultToList = [{
    30.         'name': i[0],
    31.         'age': i[1],
    32.         'gender': i[2],
    33.         'NAME': i[3]
    34.     } for i in result]
    35.     print('转为列表字典后结果为：', resultToList, '类型为：', type(resultToList))
    36.     json_str = json.dumps(resultToList, ensure_ascii=False)   # 将列表转为json字符串数据,ensure_ascii=False表示能够显示中文
    37.     print('转为json字符串后的数据为：', json_str, '类型为：', type(json_str))  # 浮点数不能序列化需先转为字符串
    38.     cur.close()  # 关闭游标
    39.     conn.close()  # 关闭连接
    40.     return status, response_header, json_str
    41.  
    42. def notFound():  # 没有找到动态资源请求
    43.     status = "404 not found 资源不存在"
    44.     response_header = [("server"), "pws2.0"]
    45.     data = "not found"
    46.     return status, response_header, data
    47.  
    48. def handle_request(env):   # 处理动态资源请求
    49.     request_path = env["request_path"]   # 通过key关键字request_path获取值
    50.     print("接收到的动态资源请求路径为：", request_path)
    51.     for path, func in route_list:
    52.         if request_path == path:
    53.             result = func()
    54.             return result
    55.  
    56.     else:  # 没有找到动态资源
    57.         result = notFound()
    58.         return result
    59. # if __name__ == '__main__':   # 测试查询打印数据库数据用
    60. #     center()

    center.html文件如下

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>个人中心title>
    6. head>
    7. <body>
    8. <h2>这里是个人中心页面h2>
    9. <h3>{% DATE %}h3>
    10. body>
    11. html>

     数据库查询结果如下

     输出结果如下 

    1. ……以上省略
    2. …… 
    3. 拆包前： ('200 OK 成功状态！', [('Server', 'PWS2.0'), ('Content-Type', 'text/html;charset=utf-8')], '[{"name": "XY", "age": 20, "gender": "男", "NAME": "yx"}, {"name": "YX", "age": 18, "gender": "女", "NAME": "XYY"}, {"name": "XY", "age": 18, "gender": null, "NAME": "yxx"}]')
    4. 接收到的动态资源请求路径为： /center.html
    5. SQL语句执行过程中影响的行数为3
    6. 数据库查询结果为： (('XY', 20, '男', 'yx'), ('YX', 18, '女', 'XYY'), ('XY', 18, None, 'yxx'))
    7. 转为列表字典后结果为： [{'name': 'XY', 'age': 20, 'gender': '男', 'NAME': 'yx'}, {'name': 'YX', 'age': 18, 'gender': '女', 'NAME': 'XYY'}, {'name': 'XY', 'age': 18, 'gender': None, 'NAME': 'yxx'}] 类型为： <class 'list'>
    8. 转为json字符串后的数据为： [{"name": "XY", "age": 20, "gender": "男", "NAME": "yx"}, {"name": "YX", "age": 18, "gender": "女", "NAME": "XYY"}, {"name": "XY", "age": 18, "gender": null, "NAME": "yxx"}] 类型为： <class 'str'>
    9. 拆包后status, headers, response_body分别为： 200 OK 成功状态！ [('Server', 'PWS2.0'), ('Content-Type', 'text/html;charset=utf-8')] [{"name": "XY", "age": 20, "gender": "男", "NAME": "yx"}, {"name": "YX", "age": 18, "gender": "女", "NAME": "XYY"}, {"name": "XY", "age": 18, "gender": null, "NAME": "yxx"}]
    10. comm_socket, ip_port值为： socket fd=756, family=AddressFamily.AF_INET, type=SocketKind.SOCK_STREAM, proto=0, laddr=('127.0.0.1', 9000), raddr=('127.0.0.1', 54585)> 和 ('127.0.0.1', 54585)

    center.html页面JSON字符串数据如下 

    响应头添加("Content-Type", "text/html;charset=utf-8")后显示正常，其用来指定编码格式

    二、ajax请求center.html中数据渲染到showCenter.html页面

    在webFrame.py中添加showCenter()函数

    1. @route('/showCenter.html')
    2. def showCenter():  # 获取个人中心数据
    3.     status = "200 OK 成功状态！"   # 响应状态
    4.     response_header = [("Server", "PWS2.0"), ("Content-Type", "text/html;charset=utf-8")]   # 响应头,需加上("Content-Type", "text/html;charset=utf-8")，指定编码格式，否则中文乱码
    5.     with open("templates/showCenter.html", "r", encoding='utf-8') as file:
    6.         file_date = file.read()
    7.     result = file_date.replace("{%Date%}", "")
    8.     return status, response_header, result

    showCenter.html文件如下

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>获取个人中心数据title>
    6.     
    7.     <link rel="stylesheet" href="/plugins/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    8.     <script type="text/javascript" src="/js/jquery-3.4.1.min.js">script>
    9.     <script type="text/javascript" src="/plugins/bootstrap-3.4.1-dist/js/bootstrap.min.js">script>
    10.     <script>
    11.         $(document).ready(function () {
    12.             var tbody = $(".tbody")
    13.             // 发送Ajax请求，获取center.html中数据
    14.             $.get("center.html", function (data) { // 此处为本地请求，实际形式为http://ip地址:端口号/center.html
    15.                 for (var i = 0; i < data.length; i++) {
    16.                     var oneData = data[i];  // 根据下标获取每个js对象
    17.                     var oneLine = '' +
    18.                         '' + oneData.name + '' +
    19.                         '' + oneData.age + '' +
    20.                         '' + oneData.gender + '' +
    21.                         '' + oneData.NAME + '' +
    22.                         ''
    23.                     tbody.append(oneLine)   // 为table表中tbody追加每一行数据
    24.                 }
    25.             }, "json");   // 指定以json格式解析，则以上data为一个json对象
    26.         })
    27.     script>
    28. head>
    29. <body>
    30. <div class="container">
    31.     <h2>ajax请求center.html中数据渲染h2>
    32.     <table class="table table-bordered">
    33.         <thead>
    34.         <tr>
    35.             <th>nameth>
    36.             <th>ageth>
    37.             <th>genderth>
    38.             <th>NAMEth>
    39.         tr>
    40.         thead>
    41.         <tbody class="tbody">
    42.         {%Date%}
    43.         tbody>
    44.     table>
    45. div>
    46. body>
    47. html>

    学习导航：http://xqnav.top/

  • 相关阅读:
    web前端学习笔记二
    蓝桥杯时间显示
    Mybatis核心配置文件中的常用标签
    [附源码]java毕业设计图书管理系统论文
    【计算机网络】HTTPS
    【Linux内核性能优化】ulimit（nproc、nofile）
    数字赋能机械制造业，供应链协同管理系统解决方案助力企业供应链再升级
    走近ChatGPT与类似产品：原理解析与比较
    51单片机外设篇：LED点阵
    python基础内容
  • 原文地址：https://blog.csdn.net/qq_43874317/article/details/127825351