AJAX操作

测试浏览器是否支持AJAX（如果不支持，则使用ActiveXObject）

返回XML或者AXO的对象

封装返回XML或者AXO对象的函数，在每次需要时调用

AJAX操作步骤

当AJAX异步操作的时候失败，可以到响应内查看相关报错的信息

AJAX设置按钮输出文本框的值

form表单提交案例

这是一个AJAX的POST请求案例

创建一个数据库和数据库相关的配置

原生AJAX+jquery的表单验证案例

<!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-3.3.1.min.js"></script>
  <script>
    $(function(){
      $("[name='loginname']").blur(function(){
        //1.获取xhr
        var xhr = getXhr();
        //2.创建请求
        var lname=this.value;
        var url = "/06-server?lname="+lname;
        xhr.open('get',url,true);
        //3.设置回调函数
        xhr.onreadystatechange = function(){
          if(xhr.readyState==4&&xhr.status==200){
            $("#loginNameShow").html(xhr.responseText);
          }
        }
        //4.发送请求
        xhr.send(null);
      });
    });
  </script>
</head>
<body>
<form action="" method="post">
  <p>
    登录名称: <input type="text" name="loginname">
    <span id="loginNameShow"></span>
  </p>
  <p>
    登录密码: <input type="password" name="loginpwd">
  </p>
  <p>
    用户名称: <input type="text" name="uname">
  </p>
  <p>
    <input type="submit">
  </p>
</form>
</body>
</html>

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/ajax"
db = SQLAlchemy(app)

class Users(db.Model):
  id = db.Column(db.Integer,primary_key=True)
  loginname = db.Column(db.String(30))
  loginpwd = db.Column(db.String(30))
  username = db.Column(db.String(30))

db.create_all()

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

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

@app.route('/02-server')
def server02():
    return "这是我的第一个ajax请求"

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

@app.route('/03-server')
def server03():
  uname = request.args.get('uname')
  return "欢迎:%s" % uname

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

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

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

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

@app.route('/06-server')
def server06():
  # 接收前端传递过来的参数 - lname
  lname=request.args.get('lname')
  # 以lname作为条件，通过Users实体类查询数据
  user=Users.query.filter_by(loginname=lname).first()
  # 如果查询出来了数据的话则说明登录名称已存在，否则通过
  if user:
    return "用户名称已存在"
  else:
    return "通过"

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

AJAX+jquery获取数据库列表书库的案例

json可以直接打印在控制台

json案例

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

		//1.为#jsonSingle绑定click事件
		$("#jsonSingle").click(function(){
			var jsonObj = {
				"name":"MrWang",
				"age":37,
				"gender":"男"
			};
			console.log("姓名:"+jsonObj.name);
			console.log("年龄:"+jsonObj.age);
			console.log("性别:"+jsonObj.gender);
		});

		//2.为#jsonArray绑定click事件
		$("#jsonArray").click(function(){
			var arr = [
				{
					"name":"王老师",
					"age":37,
					"gender":"男"
				},
				{
					"name":"王夫人",
					"age":15,
					"gender":"男"
				}
			];

			for(var i in arr){
				//i表示的是每个元素的下标(字符串类型) 和 字符串索引
				var obj = arr[i];
				console.log("姓名:"+obj.name);
				console.log("年龄:"+obj.age);
				console.log("性别:"+obj.gender);
			}


		});

		//3.为btnShow绑定click事件
		$("#btnShow").click(function(){
			var html = "";
			for(var i=0;i<arr.length;i++){
				var obj = arr[i];
				html += "<tr>";
					html += "<td>"+obj.name+"</td>";
					html += "<td>"+obj.age+"</td>";
					html += "<td>"+obj.gender+"</td>";
				html += "</tr>";
			}
			$("#body").html(html);
		});

	});
  </script>
 </head>
 <body>
  <button id="jsonSingle">JSON-单个对象</button>
  <button id="jsonArray">JSON-数组</button>
	<button id="btnShow">显示所有</button>
	<table border="1">
		<thead>
			<tr>
				<th>姓名</th>
				<th>年龄</th>
				<th>性别</th>
			</tr>
		</thead>
		<tbody id="body"></tbody>
	</table>
 </body>
</html>