AJAX操作

最新推荐文章于 2024-09-27 18:07:01 发布

agfvw24084

最新推荐文章于 2024-09-27 18:07:01 发布

阅读量99

点赞数

文章标签： json javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/-hjj/p/10039737.html

版权

测试浏览器是否支持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>