Python Web 框架-Ajax day08

1.AJAX

2.JSON

day07回顾

1.cookie

保存cookie的值到浏览器
响应对象.set_cookie(key,value,max_age)
获取cookie的值
request.cookies:类型为字典
request.cookies['get']
request.cookies.get('get','')
if 'get' in request.cookies:
... ...
删除cookie的值
响应对象.delete_cookie('key')

2.session
from flask import session
app.config['SECRET_KEY'] = 'xxxx'

保存session的值
session['key'] = 值
获取session的值
session['key']
删除session的值
del.session['key']

3.XMLHttpRequest - xhr

作用
代替浏览器异步的向服务器发送请求并接受响应
创建 xhr
主流浏览器：XMLHttpRequest
IE6-：ActiveXObject('Microsoft.XMLHTTP')

1.AJAX

创建 xhr
xhr 的成员
1. 方法 - open()
  作用：创建请求
  语法：open(method,url,asyn)
  method:请求方式，取值‘get’或‘post’
  url:请求地址，字符串
  asyn:是否采用异步的方式
  true：异步（默认）
  false：同步
  ex：
  xhr.open('get','/server',true);
2. 属性 - readyState
  作用：请求状态，通过不同的请求状态来表示xhr与服务器的交互情况
  由0-4共5个值来表示5个不同的状态
  0：请求尚未初始化
  1：已经与服务器建立连接
  2：服务器端已接收请求
  3：请求正在处理中
  4：响应已经完成
3. 属性 - status
  作用：服务器端的响应状态码
  200：表示服务器正确处理所有的请求以及给出响应
  404：请求资源不存在
  500：服务器内部错误
  ... ...
4. 事件 - onreadystatechange
  作用：每当xhr的readyState发生改变的时候都要触发的操作 - 回调函数
  
  只有当readyState的值为4并且status的值为200的时候，才可以正常的去接收响应数据
5. 属性 - responseText
  作用：响应数据
6. 方法 - send()
  作用：通知xhr向服务器端发送请求
  语法：send(body)
  get请求：body的值为null
  send(null)
  post请求：此处为要提交的数据
  send('请求数据')
AJAX的操作步骤
1. GET请求
  1. 创建 xhr 对象
  2. 创建请求 - open()
  3. 设置回调函数 - onreadystatechange
    判断状态并接收响应数据
  4. 发送请求 - send()
    
    请求参数：
    推荐：请求地址后拼QueryString
    xhr.open('get','02-server?key=value&key=value',true)
2. POST请求
  ajax的post请求，会把 Content - Type 请求消息头的值修改为 ‘text/plain；charset=utf-8’，导致了服务器端没有办法正常接收数据
  解决方法：将Content-Type 请求消息头的值再更改回 application/x-www-form-urlencoded 即可
  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

2.JSON

JSON介绍
JSON：JavaScript Object Notation
JS 对象表现形式

在ajax中，允许将复杂格式的响应数据构建成 JSON的格式再进行响应输出
JSON表现
1. JSON表示单个对象
  1. 使用 {} 表示单个对象
  2. 在 {} 中使用 Key:value 的形式来表示属性（数据）
  3. Key必须要用 " " 引起来
  4. value如果是字符串的话，也需要用" "引起来
    
    ex:
    var obj = {
    "name":"王老师",
    "age":30,
    "gender":"Unknown"
    }
```
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 </head>
 <body>
  <button onclick="btnClick()">JSON</button>
  <script>
	function btnClick(){
		var obj = {
			"name":"王老师",
			"age" : 30,
			"gender" : "Unknown"
		}
		console.log(obj.name);
		console.log(obj.age);
		console.log(obj.gender);
	}
  </script>
 </body>
</html>
```
2. JSON表示一个数组
  1. 使用 [] 表示一个数组
  2. 数组中允许包含若干JSON对象或字符串
    1. 使用JSON数组表示若干字符串
      var arr = ["王大锤","王夫人","王二小"];
    2. 使用JSON数组表示若干对象
      保存3个人的信息（name,age,gender）
      var arr = [
      {
      "name":"王老师",
      "age":30,
      "gender":"男"
      },
      {
      "name":"王夫人",
      "age":28,
      "gender":"女"
      }
      ];

使用 jq 的 each() 迭代数组

$arr.each();
$arr:jQuery中的数组
语法：
$arr.each(function(index,obj){
index:遍历出来的元素的下标
obj:遍历出来的元素
});

$.each();
语法：
$.each(arr,function(index,obj){});
arr : js 中的普通数组
示例：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 </head>
 <body>
  <script src="jquery-1.11.3.js"></script>
  <script>
	var arr = [
		{
			"name":"王老师",
			"age":40,
			"gender":"男"
		},
		{
			"name":"王夫人",
			"age":28,
			"gender":"男"
		}
	];

	/*for(var i=0;i<arr.length;i++){
		var obj = arr[i];
		console.log('姓名:' + obj.name);
		console.log('年龄:' + obj.age);
		console.log('性别:' + obj.gender);
	}*/

	/*使用jquery 循环遍历 arr */
	/*$(arr).each(function(i,obj){
		console.log("下标为"+i+"的元素:");
		console.log("姓名:"+obj.name);
		console.log("年龄:"+obj.age);
		console.log("性别:"+obj.gender);
	});*/

	$.each(arr,function(i,obj){
		console.log("下标为"+i+"的元素:");
		console.log("姓名:"+obj.name);
		console.log("年龄:"+obj.age);
		console.log("性别:"+obj.gender);
	});
  </script>
 </body>
</html>

今日示例：

AjaxDemo1.py

from flask import Flask, render_template, request
import pymysql
from flask_sqlalchemy import SQLAlchemy

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



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

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

@app.route('/02-server')
def server02_views():
    return "这是AJAX的请求"

@app.route('/03-get')
def get03_views():
    return render_template('03-get.html')

@app.route('/03-server')
def server03_views():
    uname = request.args['uname']
    return "欢迎:"+uname

@app.route('/04-post')
def post_views():
    return render_template('04-post.html')

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

@app.route('/05-post')
def post05_views():
    return render_template('05-post.html')

@app.route('/06-checkname')
def checkname():
    return render_template('06-checkname.html')

@app.route('/06-server',methods=['POST'])
def server06_views():
    uname=request.form['username']
    user = Users.query.filter_by(uname=uname).first()
    if user:
        return "用户名称已存在"
    else:
        return "通过"


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

common.js

/**
 * Created by tarena on 18-9-30.
 */
function createXhr(){
    if(window.XMLHttpRequest)
        return new XMLHttpRequest();
    else
        return new ActiveXObject('Microsoft.XMLHTTP');
}

01-getxhr.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button onclick="getXhr()">测试xhr</button>
    <script src="/static/js/common.js"></script>
    <script>
        function getXhr(){
            var xhr = createXhr();
            console.log(xhr);
        }
    </script>
</body>
</html>

02-get.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <p>
    登录名: <input type="text" id="username">
    <span id="show"></span>
  </p>
  <script SRC="/static/js/common.js"></script>
  <script src="/static/js/jquery-1.11.3.js"></script>
  <script>
    $(function(){
      $("#username").blur(function(){
        //1.创建xhr
        var xhr = createXhr();
        //2.创建请求
        xhr.open('post','/06-server',true);
        //3.设置回调函数
        xhr.onreadystatechange=function(){
          if(xhr.readyState==4&&xhr.status==200){
            $("#show").html(xhr.responseText);
          }
        }
        //4.设置请求消息头
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        //5.发送请求
        xhr.send("username="+$("#username").val());
      });
    });
  </script>
</body>
</html>

03-get.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>
</head>
<body>
  姓名：<input type="text" id="uname">
  <button id="btnSend">发送AJAX请求</button>
  <p id="show"></p>
  <script>
    $(function(){
      $("#btnSend").click(function(){
        //1.创建xhr
        var xhr = createXhr();
        //2.创建请求
        var url = "/03-server?uname="+$("#uname").val();
        xhr.open('get',url,true);
        //3.设置回调函数
        xhr.onreadystatechange = function(){
          if(xhr.readyState==4&&xhr.status==200){
            $("#show").html(xhr.responseText);
          }
        }
        //4.发送请求d
        xhr.send(null);
      });
    });
  </script>
</body>
</html>

04-post.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <button id="btnPost">发送POST请求</button>
  <p id="show"></p>
  <script src="/static/js/common.js"></script>
  <script src="/static/js/jquery-1.11.3.js"></script>
  <script>
    $(function(){
      $("#btnPost").click(function(){
        //1.获取xhr
        var xhr = createXhr();
        //2.创建请求
        xhr.open('post','/04-server',true);
        //3.设置回调函数
        xhr.onreadystatechange = function(){
          if(xhr.readyState==4&&xhr.status==200){
            $("#show").html(xhr.responseText);
          }
        }

        //设置Content-Type请求消息头
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

        //4.发送请求
        xhr.send("uname=sf.zh&age=85");
      });
    });
  </script>
</body>
</html>

05-post.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <form action="/04-server" method="post" enctype="text/plain">
    <p>
      姓名 : <input type="text" name="uname">
    </p>
    <p>
      年龄 : <input type="text" name="age">
    </p>
    <p>
      <input type="submit">
    </p>
  </form>
</body>
</html>

06-checkname.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <p>
    登录名: <input type="text" id="username">
    <span id="show"></span>
  </p>
  <script SRC="/static/js/common.js"></script>
  <script src="/static/js/jquery-1.11.3.js"></script>
  <script>
    $(function(){
      $("#username").blur(function(){
        //1.创建xhr
        var xhr = createXhr();
        //2.创建请求
        xhr.open('post','/06-server',true);
        //3.设置回调函数
        xhr.onreadystatechange=function(){
          if(xhr.readyState==4&&xhr.status==200){
            $("#show").html(xhr.responseText);
          }
        }
        //4.设置请求消息头
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        //5.发送请求
        xhr.send("username="+$("#username").val());
      });
    });
  </script>
</body>
</html>

Python Web 框架-Ajax day08

1.AJAX

2.JSON

猜你喜欢