Python全栈 Web(Ajax JSON JQuery)

  1. 云栖社区>
  2. 博客>
  3. 正文

Python全栈 Web(Ajax JSON JQuery)

巴黎香榭 2018-10-08 22:56:01 浏览1921 评论0

摘要: Flask、Python、Django、框架、服务器、客户端、浏览器、交互、WEB、Python前端、CSS、JAVA、HTML、H5、PHP、JavaScript、JQuery、分布式开发

JOSN:
    Javascript Object Notation
    作用:
        主要约束前后端交互数据的格式
    JSON的格式
        表示单个对象
            使用{}  采用键值对的格式保存数据
            键必须使用双引号引起来
            相当于Python的字典
        表示多个对象
            使用[]表示一个数组
            数组中允许包含多个字符串或对象

jQuery中的循环:
    $arr.each(function(i, obj)){
        $arr:表示jQuery中的数组
        i:表示当前元素的下标
        obj:表示的是当前元素
    };

    $.each(arr,function(i, obj){
        arr:表示jQuery中的数组
        i:表示当前元素的下标
        obj:表示的是当前元素
    });
   
<!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>

    后台处理JSON
    在后台查询出数据再转换为JSON的格式字符串  再响应
    给前端  到前端后再将字符串转换为JS对象

        1.后台获取数据
            类型允许为 元祖,列表、字典
        2.在后台将数据转换为符合JSON格式的字符串
        3.在后台将JSON格式的字符串进行响应
        4.在前端将JSON格式的字符串解析成JS对象


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


    在Python中的JSON处理
        元祖、列表、字典、只用Python中的json类就可以
        import json
        jsonstr = json.dumps(数据结构)
        return jsonstr

@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


    在前端中处理JSON
        由于在服务器响应回来的数据是string
        有些时候必要将响应回来的数据转换为JS对象或数组
        在js中
            JSON对象 = JSON.parse(JSON字符串)

var arr = JSON.parse(resText);

JQuery AJAX
    在jQuery中  提供了原生的AJAX的封装

    $obj.load(url, [data], [callback])
        作用:
            异步加载数据到$obj元素中
        参数:
            URL:异步请求地址
            data:传递给服务端的参数  可以传递字符串,JSON对象
            callback: 异步请求完成后要执行的操作 (回调函数)
            function(resText, statusText){
                resText:响应数据
                statusText:响应的状态文本
            }

<!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>


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


    $.get(url, [data], [callback], [type])
        url:异步请求地址
        data:请求提交的数据 可以是字符串,json对象
        callback:请求成功时的回调函数
        function(resText){
            resText:响应后来的文本
        }
        type:
            响应回来的数据类型
            HTML:响应回来的文本是HTML文本(默认)
            text:响应回来的文本是普通文本
            json:响应回来的文本是json对象

<!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>


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



【云栖快讯】阿里巴巴小程序繁星计划,20亿补贴第一弹云应用免费申请,限量从速!  详情请点击

网友评论