Python Web 框架-Ajax day09

其他 2018-10-31 16:31:34 阅读次数: 0

目录

1.JSON

2.JQUERY AJAX

day08回顾

1.xhr的成员

  xhr：XMLHttpRequest

  1. 创建请求 - open()
    open(method,url,asyn)
  2. xhr的请求状态 - readyState
    0：请求尚未初始化
    1：建立连接
    2：服务器接收请求
    3：请求处理中
    4：响应完成
  3. 服务器端的响应状态 - status
    200：服务器端正常处理
  4. 每当请求状态发生改变时要激发的事件 - onreadystatechange
    xhr.onreadystatechange = function(){
      if(xhr.readyState==4&&xhr.status==200){
        console.log(xhr.responseText)
      }
    }
  5. 发送请求 - send(body)
    如果是get请求方式，body应为 null
    如果是post请求方式，body则为拼好的参数字符串
     
  6. 设置请求消息头 - setRequestHeader(header,content)
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

2.AJAX的使用步骤

  1. GET请求
    1. 创建xhr
    2. 创建请求
    3. 设置回调函数
    4. 发送请求
  2. POST请求
    1. 创建xhr
    2. 创建请求
    3. 设置回调函数
    4. 设置请求消息头 - Content - Type
    5. 发送请求

3.JSON
  JSON：JavaScript Object Notation

  1. 作用
    约束前后端交互数据的格式
  2. JSON 的格式
    1. 表示单个对象
      1. 使用 {} 表示一个对象
      2. {} 中采用key:value 的格式保存数据
      3. key 必须使用" "引起来
      4. value 如果是字符串的话，也必须使用 ""引起来
      5. 多对key:value，使用,隔开
         
    2. 表示数组
      1. 使用 [] 表示一个数组
      2. 数组中允许包含若干字符串 或 对象
        arr = [
          {},
          {},
          {}
        ]

4.jq中的循环遍历

  1. $arr.each(function(i,obj){
      $arr:表示的是jq中的数组
      i:表示当前元素的下标
      obj:表示的是当前元素
    });
     
  2. $.each(arr,function(i,obj){
      arr:表示的是普通数组
      i:表示的是当前元素的下标
      obj:表示的是当前元素
    });

1.JSON

  1. 后台处理JSON
    在后台查询出数据再转换为JSON格式的字符串，再响应给前端，到了前端后再将字符串转换为JS对象
    1. 后台先获取数据
      类型允许为：
      1. 元组
      2. 列表
      3. 字典
    2. 在后台将数据转换为符合JSON格式的字符串
    3. 在后台将JSON格式的字符串进行响应
    4. 在前端将JSON格式的字符串解析成JS对象
  2. Python中的JSON处理
    元组，列表，字典
    使用Python 中的 json 类就可以完成转换
    import json
    jsonStr = json.dumps(元组|列表|字典)
    return jsonStr
  3. 前端中的JSON处理
    由于在服务器端响应回来的数据是 String，有些时候有必要将响应回来的数据转换为JS对象或数组
      在JS中
        JSON对象=JSON.parse(JSON字符串)

2.JQUERY AJAX


  在jquery 中提供了对原生的AJAX的封装

  1. $obj.load(url,data,callback)
    作用：异步加载数据到 $obj 元素中
    参数：
    1. url：异步请求的地址
    2. data：传递给服务器的参数（可选）
      1. 可以传递普通字符串
        ‘name=zhangsf&age=85’
      2. 可以传递JSON
        {
        "name":"zhangsf",
        "age":85
        }
    3. callback：异步请求完成后要执行的操作（可选）
      回调函数
      function(resText,statusText){
        resText:响应数据
        statusText:响应的状态文本
      }
      示例03-load.html
  2. $.get(url,data,callback,type)
    1. url：异步请求地址
    2. data：请求提交的数据
      可以是字符串，可以是JSON
    3. callback：请求成功时的回调函数
      function(resText){
        resText:表示响应回来的文本
      }
    4. type：响应回来的数据类型
      1. html：响应回来的文本是html文本
      2. text：响应回来的文本是普通文本
      3. json：响应回来的数据是JSON对象
        示例04-get.html

今日示例：

AjaxDemo2.py

from flask import Flask, render_template, request
import json
from flask_sqlalchemy import SQLAlchemy
import pymysql
pymysql.install_as_MySQLdb()

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI']="mysql://root:123456@localhost:3306/flask"
db = SQLAlchemy(app)

class Users(db.Model):
  __tablename__ = "users"
  id = db.Column(db.Integer,primary_key=True)
  uname = db.Column(db.String(50))
  upwd = db.Column(db.String(50))
  realname = db.Column(db.String(30))

  # 将当前对象中的所有属性封装到一个字典中
  def to_dict(self):
    dic = {
      'id':self.id,
      'uname':self.uname,
      'upwd':self.upwd,
      'realname':self.realname
    }
    return dic


  def __repr__(self):
    return "<Users:%r>" % self.uname


class Province(db.Model):
  __tablename__ = "province"
  id = db.Column(db.Integer,primary_key=True)
  proname = db.Column(db.String(30),nullable=False)
  cities = db.relationship('City',backref='province',lazy='dynamic')

  def to_dict(self):
    dic = {
      'id' : self.id,
      'proname':self.proname
    }
    return dic

  def __init__(self,proname):
    self.proname = proname

  def __repr__(self):
    return "<Province:%r>" % self.proname

class City(db.Model):
  __tablename__ = "city"
  id = db.Column(db.Integer,primary_key=True)
  cityname = db.Column(db.String(30),nullable=False)
  pro_id = db.Column(db.Integer,db.ForeignKey("province.id"))

  def to_dict(self):
    dic = {
      'id' : self.id,
      'cityname' : self.cityname,
      'pro_id' : self.pro_id,
    }
    return dic

  def __init__(self,cityname,pro_id):
    self.cityname = cityname
    self.pro_id = pro_id

  def __repr__(self):
    return "<City:%r>" % self.cityname

db.create_all()


@app.route('/page')
def page_views():
  return render_template('01-page.html')

@app.route('/json')
def json_views():
  list = ["Fan Bingbing","Li Chen","Cui Yongyuan"]
  dic = {
    'name':'Bingbing Fan',
    'age' : 40,
    'gender':'female',
  }

  uList = [
    {
      'name': 'Bingbing Fan',
      'age': 40,
      'gender': 'female',
    },
    {
      'name' : "Jinbao Hong",
      'age' : 70,
      'gender' : 'male'
    }
  ]
  jsonStr = json.dumps(uList)
  return jsonStr

@app.route('/json_users')
def json_users():
  user = Users.query.filter_by(id=1).all()
  list = []
  for u in user:
    list.append(u.to_dict())
  return json.dumps(list)


@app.route('/01-users')
def users_01():
  return render_template('01-users.html')

@app.route('/01-server')
def server_01():
  users = Users.query.all()
  list = []
  for user in users:
    list.append(user.to_dict())
  return json.dumps(list)

@app.route('/02-province')
def province_views():
  return render_template('02-province.html')

@app.route('/02-loadPro')
def loadPro_views():
  provinces = Province.query.all()
  list = []
  for pro in provinces:
    list.append(pro.to_dict())
  return json.dumps(list)

@app.route('/02-loadCity')
def loadCity_views():
  # 接收前端传递过来的数据,pid为前端传递过来的参数名
  pid = request.args.get('pid')
  cities = City.query.filter_by(pro_id=pid).all()
  list = []
  for city in cities:
    list.append(city.to_dict())
  return json.dumps(list)

@app.route('/03-load')
def load_views():
  return render_template('03-load.html')

@app.route('/03-server',methods=['POST'])
def server_03():
  name = request.form.get('name')
  age = request.form.get('age')
  return "姓名:%s,年龄:%s" % (name,age)

@app.route('/04-get')
def get_views():
  return render_template('04-get.html')

@app.route('/04-server')
def server_04():
  cities = City.query.all()
  list = []
  for city in cities:
    list.append(city.to_dict())
  return json.dumps(list)

if __name__ == '__main__':
  app.run(debug=True)

01-page.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="/static/js/common.js"></script>
  <script src="/static/js/jquery-1.11.3.js"></script>
  <script>
    $(function(){
      /*为#btn绑定click事件*/
      $("#btn").click(function(){
        //1.创建xhr
        var xhr = createXhr();
        //2.创建请求
        xhr.open('get','/json',true);
        //3.设置回调函数
        xhr.onreadystatechange=function(){
          if(xhr.readyState==4&&xhr.status==200){
            var resText = xhr.responseText;
            /*console.log(typeof(resText));
            console.log(resText);*/

            //将resText　转换为　JSON对象
            var arr = JSON.parse(resText);
            $.each(arr,function(i,obj){
              console.log(obj.name);
              console.log(obj.age);
              console.log(obj.gender);
            });

          }
        }
        //4.发送请求
        xhr.send(null);
      });
    });
  </script>
</head>
<body>
  <button id="btn">JSON</button>
</body>
</html>

01-users.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="/static/js/common.js"></script>
  <script src="/static/js/jquery-1.11.3.js"></script>
  <script>
    $(function(){
      $("#showAll").click(function(){
        var xhr = createXhr();
        xhr.open('get','/01-server',true);
        xhr.onreadystatechange = function(){
          if(xhr.readyState==4&&xhr.status==200){
            var arr = JSON.parse(xhr.responseText);
            var html = "";
            $.each(arr,function(i,obj){
              html += "<tr>";
                html += "<td>"+obj.id+"</td>";
                html += "<td>"+obj.uname+"</td>";
                html += "<td>"+obj.upwd+"</td>";
                html += "<td>"+obj.realname+"</td>";
              html += "</tr>";
            });
            $("#show-body").html(html);
          }
        }
        xhr.send(null);
      });
    });
  </script>
</head>
<body>
  <button id="showAll">显示所有数据</button>
  <table border="1">
    <thead>
      <tr>
        <th>id</th>
        <th>用户名</th>
        <th>密码</th>
        <th>真实姓名</th>
      </tr>
    </thead>
    <tbody id="show-body">

    </tbody>
  </table>
</body>
</html>

02-province.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="/static/js/common.js"></script>
  <script src="/static/js/jquery-1.11.3.js"></script>
  <script>

    function loadPro(){
      var xhr = createXhr();
      //false : 表示采用同步的方式执行，必须保证loadPro()执完毕之后才能执行其他的操作
      xhr.open('get','/02-loadPro',false);
      xhr.onreadystatechange = function(){
        if(xhr.readyState==4 && xhr.status==200){
          var arr = JSON.parse(xhr.responseText);
          var html = "";
          $.each(arr,function(i,obj){
            html += "<option value='"+obj.id+"'>";
            html += obj.proname;
            html += "</option>";
          });
          $("#selPro").html(html);
        }
      }
      xhr.send(null);
    }

    /**
     * 根据省份的id查询对应的所有的城市信息
     * 参数pid:要查询的省份的id
     * */
    function loadCity(pid){
      var xhr = createXhr();
      var url = '/02-loadCity?pid='+pid;
      xhr.open('get',url,true);
      xhr.onreadystatechange = function(){
        if(xhr.readyState==4&&xhr.status == 200){
          var arr = JSON.parse(xhr.responseText);
          var html = "";
          $.each(arr,function(i,obj){
            html+="<option value='"+obj.id+"'>";
            html+=obj.cityname;
            html+="</option>";
          });
          $("#selCity").html(html);
        }
      }
      xhr.send(null);
    }

    $(function(){
      /**加载所有的省份信息*/
      loadPro();
      /**为selPro绑定change事件*/
      $("#selPro").change(function(){
        loadCity(this.value);
      });
      /**调用loadCity(),先将默认的城市加载进来*/
      console.log($("#selPro").val());
      loadCity($("#selPro").val());

    });

  </script>
</head>
<body>
  <select id="selPro">

  </select>

  <select id="selCity"></select>
</body>
</html>

03-load.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <button id="btnLoad">使用load方法加载</button>
  <div id="show"></div>
  <script src="/static/js/jquery-1.11.3.js"></script>
  <script>
    $(function(){
      $("#btnLoad").click(function(){
        //var params = "name=sf.zh&age=85";
        var params = {
          "name":'yinsusu',
          "age":25,
        }
        $("#show").load(
          '/03-server',
          params,
          function(resText,statusText){
            /*console.log("resText:"+resText);
            console.log("statusText:"+statusText);*/

            $(this).html("<h1>"+resText+"</h1>");
          });
      });
    });
  </script>
</body>
</html>

04-get.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <button id="btnGet">发送get请求</button>
  <div id="show"></div>

  <script src="/static/js/jquery-1.11.3.js"></script>
  <script>
    $(function(){
      $("#btnGet").click(function(){
        $.get('/04-server',function(resText){
          /*console.log("type："+typeof(resText));
          console.log(resText);*/
          $.each(resText,function(i,obj){
            console.log(obj.id + ":" + obj.cityname);
          });
        },'json');
      });
    });
  </script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_42584444/article/details/82963388
今日推荐
周排行
LRU cache算法
windows10, 自带的OpenSSH, key权限问题, 文件权限问题
测试用例书写方法
HIVE-默认分隔符的（linux系统的特殊字符）查看，输入和修改
最贵的AMD 7nm显卡来了！这设计 够狂野
java多线程简单demo
[ 转载 ]在Android系统上使用busybox——最简单的方法
QT connect学习
BFSIFT算法分析
Xcode10：library not found for -lstdc++.6.0.9 临时解决
每日归档
更多
2024-08-06(0)
2024-08-05(0)
2024-08-04(0)
2024-08-03(0)
2024-08-02(0)
2024-08-01(0)
2024-07-31(0)
2024-07-30(0)
2024-07-29(0)
2024-07-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022