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>