mini-WebPython Web框架程序开发（ajax请求数据渲染个人中心页面）

Posted 2022-01-27 ZSYL

Python Web框架程序开发（ajax请求数据渲染个人中心页面）

• ajax请求数据渲染个人中心页面
• • 1. 根据用户请求返回个人中心空模板文件数据
  • 2. 在个人中心模板文件添加ajax请求获取个人中心数据
  • 3. 将个人中心数据在页面完成展示
  • 4. 小结

ajax请求数据渲染个人中心页面

1. 根据用户请求返回个人中心空模板文件数据

# 获取个人中心数据
@route("/center.html")
def center():
    # 状态信息
    status = "200 OK"
    # 响应头信息
    response_header = [("Server", "PWS/1.1")]
    # 1. 打开指定模板文件，读取模板文件中的数据
    with open("../template/center.html", "r", encoding='utf-8') as file:
        file_data = file.read()
    # 2. 查询数据库，模板里面的模板变量( %content%) 替换成以后从数据库里面查询的数据

    response_body = file_data.replace("%content%", "")

    # 这里返回的是元组
    return status, response_header, response_body

2. 在个人中心模板文件添加ajax请求获取个人中心数据

// 发送ajax请求获取个人中心页面数据
// 路径写成 center_data.html，发送ajax的时候路径其实是http://ip地址:端口号/center.data.html
$.get("center_data.html", function (data) 
        alert(data);
    
, "json");

3. 将个人中心数据在页面完成展示

$(document).ready(function()
 // 发送ajax请求，获取个人中心数据
  $.get("center_data.html",function (data) 
      // ajax 成功回调函数
      // 获取table标签
      var $table = $(".table");
      // 如果指定了返回数据的解析方式是json，那么data就是一个js对象
      for(var i = 0; i < data.length; i++)
          // 根据下标获取每一个个人中心数据js对象
          var oCenterData = data[i];

          // 封装后的每一个tr标签
          var oTr = '<tr>' +
                      '<td>'+ oCenterData.code +'</td>' +
                      '<td>'+ oCenterData.short +'</td>' +
                      '<td>'+ oCenterData.chg +'</td>' +
                      '<td>'+ oCenterData.turnover +'</td>' +
                      '<td>'+ oCenterData.price +'</td>' +
                      '<td>'+ oCenterData.highs +'</td>' +
                      '<td>'+ oCenterData.note_info +'</td>' +
                      '<td><a type="button" class="btn btn-default btn-xs" href="/update/000007.html"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> 修改 </a></td>' +
                      '<td><input type="button" value="删除" id="toDel" name="toDel" systemidvaule="000007"></td>' +
                      '</tr>'
          // 给table标签追加每一行tr标签
          $table.append(oTr)
      
  , "json");

4. 小结

• 根据用户请求返回个人中心空模板文件数据
• 在个人中心模板文件添加ajax请求获取个人中心数据
• 将个人中心数据在页面完成展示

---

加油!

感谢!

努力!