测试开发进阶(十五)

zx钟

发布于 2019-09-09 18:05:30

1.6K0

发布于 2019-09-09 18:05:30

文章被收录于专栏：测试游记测试游记

ajax

ajax技术的目的是让javascript发送http请求，与后台通信，获取数据和信息。

同步
异步
局部刷新
无刷新

ajax可以实现局部刷新，也叫做无刷新，无刷新指的是整个页面不刷新，只是局部刷新，ajax可以自己发送http请求，不用通过浏览器的地址栏，所以页面整体不会刷新，ajax获取到后台数据，更新页面显示数据的部分，就做到了页面局部刷新。

常用参数：

url 请求地址
type 请求方式，默认是'GET'，常用的还有'POST'
dataType 设置返回的数据格式，常用的是'json'格式，也可以设置为'html'
data 设置发送给服务器的数据
success 设置请求成功后的回调函数
error 设置请求失败后的回调函数
async 设置是否异步，默认值是'true'，表示异步

集合实例

使用ajax发送账号密码信息

首先使用Flask编写一份简单的后台代码：

from flask import Flask, request, jsonify

app = Flask(__name__)

#  测试数据
user_info = {
    "user": 'python01',
    'pwd': 'lemonban',
}

# 登录
@app.route('/login', methods=['post'])
def login():
    data = request.form
    # 判断账号，密码是否正确
    if user_info.get('user') == data.get('user') and user_info.get('pwd') == data.get('pwd'):
        return jsonify({'code': "1", "data": None, "msg": "成功"})
    else:
        return jsonify({'code': "0", "data": None, "msg": "密码有误"})


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

request.form获取到前端传递过来的内容，判断一下账号密码是否正确

正确：以json格式返回{'code': "1", "data": None, "msg": "成功"}
错误：以json格式返回{'code': "0", "data": None, "msg": "密码有误"}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax请求</title>
    <script type="text/javascript" src="../static/js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="../static/js/main.js"></script>

</head>
<body>

<h1> 案例一，表单发送ajax请求登录</h1>
<form action="">
    账号: <input type="text" name="username" id="username">
    密码: <input type="password" name="username" id="password">
    <input id="dl" type="button" value="登录">
</form>
</body>
</html>

前端html由两个输入框，一个按钮组成。现在点击登录按钮触发ajax请求

现在main.js中写上

$(function () {

})

表示：页面加载完毕后执行的js代码

然后在写登录按钮的点击事件

$('#dl').click(function (){

})

从html上拿到账号和密码：

var user = $('#username').val();
var pwd = $('#password').val();

发送ajax请求

$.ajax({
    type: 'post', //请求类型
    url: '/login', //请求地址
    data: { //请求参数
        "user": user,
        "pwd": pwd
    },
    dataType: 'json',//预期后台返回类型
})

可以编写.done和.fail来处理ajax发送成功和失败后的操作

现在做成，成功且状态码正确弹框提示「登录成功」，成功但状态码错误弹框提示「登录失败」，ajax发送失败提示「请求失败」

其中data是请求后返回的内容

.done(function (data) { //data:请求返回的参数
    console.log(data);
    if (data.code === "1") {
        alert('登录成功')
    } else {
        alert('登录失败')
    }
}).fail(function () {
    alert('请求失败')
})

整体代码为：

$('#dl').click(function () {
    var user = $('#username').val();
    var pwd = $('#password').val();
    $.ajax({
        type: 'post', //请求类型
        url: '/login', //请求地址
        data: { //请求参数
            "user": user,
            "pwd": pwd
        },
        dataType: 'json',//预期后台返回类型
    }).done(function (data) { //data:请求返回的参数
        console.log(data);
        if (data.code === "1") {
            alert('登录成功')
        } else {
            alert('登录失败')
        }
    }).fail(function () {
        alert('请求失败')
    })
});

输入正确账号密码

输入错误账号密码

关闭flask服务后

关闭后台后

使用ajax获取并修改下拉框

事先准备好两段数据

project_data = {"code": "1",
                "data": [{"title": "前程贷", "id": "1001"},
                         {"title": "智慧金融", "id": "1002"},
                         {"title": "生鲜到家", "id": "1003"},
                         {"title": "柠檬班app", "id": "1004"}],
                "msg": "四个项目",
                }
# 接口数据
interface_data = {
    "1001": {"code": "1",
             "data": [{"name": "前程贷登录1001"},
                      {"name": "前程贷注册1001"}],
             "msg": "2个接口", },

    "1002": {"code": "1",
             "data": [{"name": "智慧-登录1002"},
                      {"name": "智慧-注册1002"},
                      {"name": "智慧-贷款1004"}, ],
             "msg": "3个接口", },

    "1003": {"code": "1",
             "data": [{"name": "生鲜-登录1003"},
                      {"name": "生鲜-注册1003"},
                      {"name": "生鲜下单1003"}, ],
             "msg": "3个接口", },

    "1004": {"code": "1",
             "data": [{"name": "app登录1004"},
                      {"name": "app注册1004"},
                      {"name": "app报名1004"},
                      {"name": "app缴费1004"},
                      ],
             "msg": "4个接口", },
}

效果

现在需要使用get来获取项目内容,所以flask部分代码为：

# 获取项目列表
@app.route('/pro_list', methods=['get'])
def pro_list():
    return jsonify(project_data)

所以我使用ajax发送get请求访问/pro_list再把他写到下拉框里面就可以了

下拉框的修改采用字符串拼接的方式：var option = '<option value="' + res[i].id + '">' + res[i].title + '</option>';用for循环将它从数据中读取出来一个个填入

// 当页面加载完毕之后，发送ajax请求获取项目和接口
$.ajax({
    url: '/pro_list',
    type: 'get',
    dataType: 'json',
}).done(function (data) {
    if (data.code === '1') {
        // 成功后 将项目数据加载到页面
        var res = data.data;
        console.log(res);
        for (i in res) {
            var option = '<option value="' + res[i].id + '">' + res[i].title + '</option>';
            $('#pro').append(option)

        }
    } else {
        alert(data.msg)
    }
}).fail(function () {
    alert('请求失败')
});

接口部分下拉框是跟随项目的修改而改变的，所以需要使用change并获取到项目的value内容

# 获取接口列表
@app.route('/interface', methods=['post'])
def interface():
    inter_id = request.form.get('pro_id')
    if inter_id:
        res_data = interface_data.get(inter_id)
        if res_data:
            return jsonify(res_data)
        else:
            return jsonify({"code": "0", "data": None, "msg": "没有该项目"})
    else:
        return jsonify({"code": "0", "data": None, "msg": "请求参数不能为空"})

后台代码中可以从request.form.get('pro_id')看出，ajax需要传递一个pro_id的属性

'pro_id': $(this).val()就可以直接拿到下拉框的value值了

// 当页面上的项目选项选择了之后，发送请求获取该项目的接口
$('#pro').change(function () {
    $.ajax({
        type: 'post',
        url: '/interface',
        data: {
            'pro_id': $(this).val(),
        },
        dataType: 'json'
    }).done(function (data) {
        if (data.code === '1') {
            // 情况接口选择框中的数据
            $('#interface').empty();
            // 成功后 将项目数据加载到页面
            var res = data.data;
            console.log(res);
            for (i in res) {
                var option = '<option value="">' + res[i].name + '</option>';
                $('#interface').append(option)

            }
        }
    })
});

所以一份ajax请求为：

$.ajax({
    type: 'xxx', // 类型 get post ...
    url: 'xxx', //地址 同域名下
    data: {'xxx': 'xxx'}, // post等发送数据时要使用
    dataType: 'xxx',//预期后台返回类型

}).done(function (data) { //data->接口返回的内容
    //成功后done
}).fail(function () {
    // 失败后fail
});

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2019-09-06，如有侵权请联系 cloudcommunity@tencent.com 删除

ajax