zoukankan      html  css  js  c++  java
  • Ajax

    AJAX(Asynchronous Javascript And XML) 翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互。

    • 同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求
    • 异步交互:客户端发出一个请求后,无需等待服务器响应结束后,就可发出第二个请求

    例:

    提供页面,实现简单的计算

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title></head>
    <body>
    <input type="text" id="i1"> + <input type="text" id="i2"> = <button id="b1">ajax sum</button>
    </body><label for="i3"><input type="text" id="i3"></label>
    
    <script src="/statics/jQuery.js"></script>
    <script>
        $('#b1').click(function () {
            $.ajax({
                url:'',
                type:'POST',
                data:{i1:$('#i1').val(),i2:$('#i2').val()},
                success:function (data) {
                    $('#i3').val(data)
                }
            })
        })
    </script>
    </html>

    views.py文件

    def index(request):
        if request.method == 'POST':
            i1 = request.POST.get('i1')
            i2 = request.POST.get('i2')
            ret = int(i1)+int(i2)
            print(ret)
            return HttpResponse(ret)
        return render(request,'index.html')

    应用场景:

    github的注册,用户填完用户名后直接向服务器发送请求,判断用户名是否合法或重复,

    在把结果展示出来,在整个过程中页面没有刷新,只是局部刷新,请求发出后浏览器还可以进行其他的操作,无需等待服务器的响应

    优点: 就是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容

    • ajax不需要任何插件,但需要允许javascript在浏览器上执行
    • 使用的是JavaScript技术向服务器发送异步请求
    • 请求无需刷新整个页面
    • 因为刷新的是局部,所以性能号

    关键点在:局部刷新,异步请求

     基本语法:

    ajax基本语法
        提交的地址(url)
        提交的方式(type)
        提交的数据(data)
        回调函数(success)
    
    
        $('#d1').click(function () {
        $.ajax({
        // 提交的地址
        url:'/index/',
        // 提交的方式
        type:'POST',
        // 提交的数据
        data:{'name':'jason','password':'123'},
        // 回调函数
        success:function (data) { // data接收的就是异步提交返回的结果
                    alert(data)
             }
        })
    })
  • 相关阅读:
    allure2生成html报告
    H5如何测试?
    请描述什么是性能测试、什么是负载测试、什么是压力测试?
    Web/App端自动化测试对比
    如果给你一台电梯,请问你如何测试它
    PC、APP、H5三端测试的相同与不同
    App测试工具选择
    app测试和web测试的区别
    unittest单元测试框架详解
    Jmeter之逻辑控制器(Logic Controller)
  • 原文地址:https://www.cnblogs.com/python-Arvin/p/11904857.html
Copyright © 2011-2022 走看看