当前位置: 首页>后端>正文

flask javascript调用 flask ajax

FLask框架-AJAX(异步JavaScript与XML) – 潘登同学的flask学习笔记

文章目录

  • FLask框架-AJAX(异步JavaScript与XML) -- 潘登同学的flask学习笔记
  • AJAX技术
  • AJAX使用
  • AJAX中GET请求参数传递
  • AJAX中POST请求传递参数
  • AJAX获取状态码与处理结果
  • AJAXc错误处理
  • AJAX封装
  • AJAX封装-处理响应
  • 失败处理
  • 处理返回数据
  • AJAX封装设置默认值
  • JQuery中AJAX的使用
  • JQuery中get与post


AJAX技术

AJAX 即“Asynchronous Javascript And XML”(异步 JavaScript 和XML),是指一种创建交互式、快速动态网页应用的网页开发技术,无需重新加载整个网页的情况下,能够更新部分网页的技术。

传统网站中存在的问题

  • 网速慢的情况下,页面加载时间长,用户只能等待
  • 表单提交后,如果一项内容不合格,需要重新填写所有表单内容
  • 页面跳转,重新加载页面,造成资源浪费,增加用户等待时间(分页跳转,只需要更新主要内容)

AJAX的应用场景

  • 页面上拉加载更多数据
  • 列表数据无刷新分页
  • 表单页离开焦点数据验证
  • 搜索框提示文字下拉列表
  • 级联显示

AJAX运行原理

flask javascript调用 flask ajax,flask javascript调用 flask ajax_javascript,第1张

AJAX使用

  • 1.创建AJAX XMLHttpRequest 对象
let xhr = new XMLHttpRequest()
  • 2.设置AJAX请求地址以及请求方式,通过 XMLHttpRequest.open() 方法用于指定 HTTP 请求的参数,或者说初始化 XMLHttpRequest 实例对象。它一共可以接受五个参数。
void open(
   string method,
   string url,
   optional boolean async,
   optional string user,
   optional string password
);
  • method :表示 HTTP 动词方法,比如 GETPOSTPUTDELETEHEAD等。
  • url : 表示请求发送目标 URL
  • async : 布尔值,表示请求是否为异步,默认为 true 。如果设为 false ,则 send() 方法只有等到收到服务器返回了结果,才会进行下一步操作。该参数可选。由于同步AJAX 请求会造成浏览器失去响应,许多浏览器已经禁止在主线程使用,只允许 Worker里面使用。所以,这个参数轻易不应该设为 false 。
  • user :表示用于认证的用户名,默认为空字符串。该参数可选。
  • password :表示用于认证的密码,默认为空字符串。该参数可选。
xhr.open("GET",'http://httpbin.org/get')
  • 3.发送请求, XMLHttpRequest.send() 方法用于实际发出 HTTP 请求。它的参数是可选的,如果不带参数,就表示 HTTP 请求只包含头信息,也就是只有一个 URL,典型例子就是 GET 请求;如果带有参数,就表示除了头信息,还带有包含具体数据的信息体,典型例子就是POST 请求。
  • 4.获取服务器端给客户端的响应数据 XMLHttpRequest 对象可以对以下事件指定监听函数
  • XMLHttpRequest.onloadstart:loadstart 事件(HTTP 请求发出)的监听函数
  • XMLHttpRequest.onprogress:progress事件(正在发送和加载数据)的监听函数
  • XMLHttpRequest.onabort:abort 事件(请求中止,比如用户调用了 abort() 方法)的监听函数
  • XMLHttpRequest.onerror:error 事件(请求失败)的监听函数
  • XMLHttpRequest.onload:load 事件(请求成功完成)的监听函数
  • XMLHttpRequest.ontimeout:timeout 事件(用户指定的时限超过了,请求还未完成)的监听函数
  • XMLHttpRequest.onloadend:loadend 事件(请求完成,不管成功或失败)的监听函数
  • XMLHttpRequest.onreadystatechange: readystatechange事件(当 readyState 属性变化)的监听函数
// resopnseText是响应文本
xhr.onload = function(){console.log(xhr.resopnseText)}

AJAX简单操作,实现动态加载页面

<body>
    <h1>AJAX的基本使用</h1>
    <div class='container'></div>
    <script>
        // 创建AJAX
        let xhr = new XMLHttpRequest();
        // 设置请求的参数
        xhr.open("GET",'http://httpbin.org/get');
        // 发生请求
        xhr.send();
        // 获取响应数据
        xhr.onload = function(){
            // 获取响应的文本内容
            content = xhr.responseText;
            // 输出到控制台
            console.log(content);
            // 获取div的对象
            = document.querySelector(".container");
            // 将数据填充到div中
           .innerHTML = content;
        }
    </script>
</body>

AJAX中GET请求参数传递

在get请求中,参数是拼接在url中的,所以此时可以获取到参数,拼接到url即可

<body>
    <h1>AJAX中GET请求传参</h1>
    <div class='container'></div>
    <script>
        // 创建AJAX
        let xhr = new XMLHttpRequest();
        // 设置url
        let url = 'http://httpbin.org/get';
        // 拼接请求参数
        let args = '?uname=pd&pwd=123'
        url += args
        // 设置请求的参数
        xhr.open("GET", url);
        // 发生请求
        xhr.send();
        // 获取响应数据
        xhr.onload = () => {
            // 获取响应的文本内容
            content = xhr.responseText;
            // 获取div的对象
            = document.querySelector(".container");
            // 将数据填充到div中
           .innerHTML = content;
        }
    </script>
</body>

flask javascript调用 flask ajax,flask javascript调用 flask ajax_flask javascript调用_02,第2张

<body>
    <h1>AJAX中GET请求传参</h1>
    <input type="text" name="" id="uname">
    <input type="text" name="" id="pwd">
    <input type="button" value="获取用户名和密码" onclick='submitform()'>
    <script>
        function submitform(){
            uname = document.getElementById('uname').value
            pwd = document.getElementById('pwd').value
            let xhr = new XMLHttpRequest();
            let url = 'http://httpbin.org/get';
            let args = '?uname=' + uname + '&pwd=' + pwd;
            url += args;
            xhr.open("GET", url);
            xhr.send(); 
            xhr.onload = () => {
                // 获取响应的文本内容
                content = xhr.responseText;
                console.log(content)
            }
        }
    </script>
</body>

AJAX中POST请求传递参数

AJAX使用post的请求基本一样。但在传参时,有些不同,参数应该放在body中,并通过XMLHttpRequest.setRequestHeader() 设置请求信息的格式

XMLHttpRequest.setRequestHeader() 方法用于设置浏览器发送的 HTTP 请求的头信息。该方法接受两个参数。第一个参数是字符串,表示头信息的字段名,第二个参数是字段值

注意:
XMLHttpRequest.setRequestHeader() 该方法必须在 open() 之后、 send() 之前调用。如果该方法多次调用,设定同一个字段,则每一次调用的值会被合并成一个单一的值发送

<table>
    <tr>
        <td>用户名:</td>
        <td><input type="text" name="" id="uname1"></td>
    </tr>
    <tr>
        <td>密码:</td>
        <td><input type="text" name="" id="pwd1"></td>
    </tr>
    <tr>
        <td><input type="button" value="传递数据-str" onclick='submitform_str()'></td>
        <td><input type="button" value="传递数据-json"></td>
    </tr>
</table>
<script>
    function submitform_str(){
            // 获取数据 
            uname1 = document.getElementById('uname1').value;
            pwd1 = document.getElementById('pwd1').value;
            // 拼接参数
            let args = 'uname=' + uname1 + '&pwd=' + pwd1;
            let xhr = new XMLHttpRequest(); 
            xhr.open('POST','http://httpbin.org/post');
            // 设置请求内容的类型
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded') // 在open之后,send之前
            xhr.send(args);
            xhr.onload = () =>{
                console.log(xhr.responseText);
            }
        }
</script>

flask javascript调用 flask ajax,flask javascript调用 flask ajax_javascript_03,第3张

function submitform_json(){
            // 获取数据 
            uname1 = document.getElementById('uname1').value;
            pwd1 = document.getElementById('pwd1').value;
            let args = {'uname' : uname1,
                        'pwd' : pwd1};
            args = JSON.stringify(args)
            let xhr = new XMLHttpRequest();
            xhr.open('POST','http://httpbin.org/post');
            // 设置请求内容的类型
            xhr.setRequestHeader('Content-Type','application/json')
            xhr.send(args);
            xhr.onload = () =>{
                console.log(xhr.responseText);
            }
        }

flask javascript调用 flask ajax,flask javascript调用 flask ajax_AJAX_04,第4张

注意 get 请求是不能提交 json 对象数据格式的,传统网站的表单提交也是不支持 json 对象数据格式的

AJAX获取状态码与处理结果

flask javascript调用 flask ajax,flask javascript调用 flask ajax_flask_05,第5张

我们需要判断服务器响应的数据是正确还是错误来解析数据,否则前面就会显示出错

AJAX状态码

在创建AJAX对象,配置AJAX对象,发送请求,以及接收完服务器端响应数据,这个过程中的每一个步骤都会对应一个数值,这个数据就是AJAX状态码

XMLHttpRequest.readyState 返回一个整数,表示实例对象的当前状态。该属
性只读。它可能返回以下值。

  • 0:表示 XMLHttpRequest 实例已经生成,但是实例的 open() 方法还没有被调用。
  • 1:表示 open() 方法已经调用,但是实例的 send() 方法还没有调用,仍然可以使用实例的setRequestHeader() 方法,设定 HTTP 请求的头信息。
  • 2:表示实例的 send() 方法已经调用,并且服务器返回的头信息和状态码已经收到。
  • 3:表示正在接收服务器传来的数据体(body 部分)。这时,如果实例的 responseType 属性等于 text 或者空字符串, responseText 属性就会包含已经收到的部分信息。
  • 4:表示服务器返回的数据已经完全接收,或者本次接收已经失败。

HTTP状态码

XMLHttpRequest.status 属性返回一个整数,表示服务器回应的 HTTP 状态码。一般来说,如果通信成功的话,这个状态码是200;如果服务器没有返回状态码,那么这个属性默认是200。请求发出之前,该属性为 0 。该属性只读

XMLHttpRequest.onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时,再执行任务

function get_data() {
            let xhr = new XMLHttpRequest();
            xhr.open('GET', 'https://httpbin.org/get');
            xhr.send();
            xhr.onreadystatechange = () => {
                // 当AJAX的状态码为4,并且http的状态码为200时
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        console.log(xhr.responseText)
                        // 转换数据类型
                        data = JSON.parse(xhr.responseText)
                        console.log(data)
                    } else {
                        // 查看异常
                        console.log(xhr.status)
                    }
                } else {
                    console.log(xhr.readyState)
                }
            }
        }

服务器端响应的数据格式

在真实的项目中,服务器端大多数情况下会以JSON对象作为响应数据的格式。

在http请求与响应的过程中,无论是请求参数还是响应内容,如果是对象类型,一般都会被转换为对象字符串进行传输

JSON.parse()  //将json字符串转换为json对象

AJAXc错误处理

网络畅通,服务器端能接收到请求,服务器端返回的结果不是预期的结果。可以判断服务器端返回的状态码,分别进行处理。 xhr.status获取http状态码

  • 网络畅通,服务器端没有接收到请求,返回404状态。检查请求地址是否错误
  • 网络畅通,服务器端能接收到请求,服务器端返回500状态码
  • 网络中断,请求无法发送到服务器端

在AJAX中设置一个专门处理请求失败的监听函数 XMLHttpRequest.onerror :error 事件(请求失败)的监听函数

AJAX封装

对POST与GET方法进行封装

function AJAX1(options) {
    // options是一个JSON对象,
    // options:
        //  type:请求的方式
        //  url:请求的地址
        //  data:请求的参数,类型的JSON
    let xhr = new XMLHttpRequest();
    // 处理请求的参数
    let args =  '?'
        for (let key in options.data) {
            args += key + '=' + options.data[key] + '&'
        }
        args = args.substr(0,args.length-1)
    if (options.type.toUpperCase() == "GET") {
        xhr.open(options.type, temp_url+args);
        xhr.send();
    } else if (options.type.toUpperCase() == "POST") {
        args = args.substr(1,args.length)
        xhr.open(options.type, options.url);
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
        xhr.send(args);
    }
    xhr.onreadystatechange = () => {
        // 当AJAX的状态码为4,并且http的状态码为200时
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                data = JSON.parse(xhr.responseText)
                console.log(data)
            } else {
                // 查看异常
                console.log(xhr.status)
            }
        } else {
            console.log(xhr.readyState)
        }
    }
    xhr.onerror = () => {
        console.log('网络中断')
    }
}

运用封装好的AJAX

<input type="button" value="获取响应数据get" onclick='get_data()'>
<input type="button" value="发送请求数据post" onclick='post_data()'>
<script>
    function get_data() {
        AJAX1({
            type: 'get',
            url: 'https://httpbin.org/get',
            data: {
                uname: 'pd',
                pwd: '123'
            }
        })
    }
    function post_data() {
        AJAX1({
            type: 'post',
            url: 'https://httpbin.org/post',
            data: {
                uname: 'pd',
                pwd: '123'
            }
        })
    }
</script>

flask javascript调用 flask ajax,flask javascript调用 flask ajax_javascript_06,第6张

AJAX封装-处理响应

当AJAX发送了请求后,AJAX都应该回馈一个内容。这时就会分如下2个情况:

失败处理

可以通过onerror监听函数处理错误情况,

处理返回数据

请求成功能可以,通过onreadystatechange监听函数处理。以下是可以使用的属性

  • XMLHttpRequest.response
  • XMLHttpRequest.response 属性表示服务器返回的数据体(即 HTTP 回应的 body 部分)。它可能是任何数据类型,比如字符串、对象、二进制对象等等,具体的类型由XMLHttpRequest.responseType 属性决定。该属性只读
  • 如果本次请求没有成功或者数据不完整,该属性等于 null 。但是,如果 responseType 属性等于 text 或空字符串,在请求没有结束之前( readyState 等于3的阶段), response 属性包含服务器已经返回的部分数据。
  • XMLHttpRequest.responseType
  • XMLHttpRequest.responseType 属性是一个字符串,表示服务器返回数据的类型。这个属性是可写的,可以在调用 open() 方法之后、调用 send() 方法之前,设置这个属性的值,告诉服务器返回指定类型的数据。如果 responseType 设为空字符串,就等同于默认值 text
  • XMLHttpRequest.responseType 属性可以等于以下值。
  • ”“(空字符串):等同于 text ,表示服务器返回文本数据。
  • “arraybuffer”:ArrayBuffer 对象,表示服务器返回二进制数组。
  • “blob”:Blob 对象,表示服务器返回二进制对象。
  • “document”:Document 对象,表示服务器返回一个文档对象。
  • “json”:JSON 对象。
  • “text”:字符串。

上面几种类型之中, text 类型适合大多数情况,而且直接处理文本也比较方便。 document 类型适合返回 HTML / XML 文档的情况,这意味着,对于那些打开 CORS 的网站,可以直接用AJAX 抓取网页,然后不用解析 HTML 字符串,直接对抓取回来的数据进行 DOM 操作。 blob 类型适合读取二进制数据,比如图片文件

  • XMLHttpRequest.responseText
  • XMLHttpRequest.responseText 属性返回从服务器接收到的字符串,该属性为只读。只有HTTP 请求完成接收以后,该属性才会包含完整的数据
  • XMLHttpRequest.responseXML
  • XMLHttpRequest.responseXML 属性返回从服务器接收到的 HTML 或 XML 文档对象,该属性为只读。如果本次请求没有成功,或者收到的数据不能被解析为 XML 或 HTML,该属性等于null
  • 该属性生效的前提是 HTTP 回应的 Content-Type 头信息等于 text/xmlapplication/xml 。这要求在发送请求前, XMLHttpRequest.responseType 属性要设为 document 。如果 HTTP回应的 Content-Type头信息不等于 text/xmlapplication/xml ,但是想从 responseXML 拿到数据(即把数据按照 DOM 格式解析),那么需要手动调用XMLHttpRequest.overrideMimeType()方法,强制进行 XML 解析。
  • XMLHttpRequest.responseURL
  • XMLHttpRequest.responseURL 属性是字符串,表示发送数据的服务器的网址

AJAX封装设置默认值

在使用AJAX时,往往需要传递多个参数。为了简化使用封装的AJAX方法,因此可以考虑给AJAX方法设置默认参数

// AJAX封装请求参数
function AJAX1(options) {
    // options是一个JSON对象,
    // options:
        //  type:请求的方式
        //  url:请求的地址
        //  data:请求的参数,类型的JSON
        // success:请求成功以后如何处理
        // error:请求失败以后如何处理
    let defaults = {
        type:'GET',
        url:'',
        success:()=>{},
        error:()=>{}
    }
    // 合并属性 最终在第一个参数上default有完整的属性,但是第二个参数占主导地位
    Object.assign(defaults,options)
    let xhr = new XMLHttpRequest();
    // 处理请求的参数
    let args =  '?'
        for (let key in defaults.data) {
            args += key + '=' + defaults.data[key] + '&'
        }
        args = args.substr(0,args.length-1)
    if (defaults.type.toUpperCase() == "GET") {
        xhr.open(defaults.type, temp_url+args);
        xhr.send();
    } else if (defaults.type.toUpperCase() == "POST") {
        args = args.substr(1,args.length)
        xhr.open(defaults.type, defaults.url);
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
        xhr.send(args);
    }
    // 接受响应
    xhr.onreadystatechange = () => {
        // 当AJAX的状态码为4,并且http的状态码为200时
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                defaults.success(xhr.responseText)
            } else {
                // 查看异常
                defaults.error(xhr.status)
            }
        } else {
            defaults.error(xhr.readyState)
        }
    }
    xhr.onerror = () => {
        defaults.error('1000:网络中断')
    }
}
function get_data() {
    AJAX1({
        // type: 'get',
        url: 'https://httpbin.org/get',
        data: {
            uname: 'pd',
            pwd: '123'
        },
        success:(response)=>{
            console.log(response)
        },
        error:(response)=>{
            console.log('返回的状态码是:' + response)
        }
    })
}
function post_data() {
    AJAX1({
        type: 'post',
        url: 'https://httpbin.org/post',
        data: {
            uname: 'pd',
            pwd: '123'
        },
        success:(response)=>{
            console.log(response)
        },
        error:(response)=>{
            console.log('返回的状态码是:' + response)
        }
    })
}

JQuery中AJAX的使用

jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。

需要引入文件,线上地址

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>

调用方式,在前面加一个$符号

<body>
    <h1>JQuery中使用AJAX</h1>
    <input type="button" value="发送请求" onclick='post_data()'>
    <input type="button" value="获取数据" onclick='get_data()'>
    <script>
        function post_data(){
            $.ajax({
                type:'post',
                url:'https://httpbin.org/post',
                data:{
                    uname:'pd',
                    pwd:'h12',
                },
                success:(response)=>{
                    console.log(response)
                }
            })
        }
        function get_data(){
            $.ajax({
                type:'get',
                url:'https://httpbin.org/get',
                // 也可以用拼接的写法
                // data:'uname=pd&pwd=123',
                data:{
                    uname:'pd',
                    pwd:'123',
                },
                success:(response)=>{
                    console.log(response)
                }
            })
        }
    </script>
</body>

JQuery中AJAX的参数解释

jQuery.AJAX([settings])
    – type
    – url
    – data
    – contentType
    – beforSend 发送请求前可修改 XMLHttpRequest对象的函数,如添加自定义 HTTP 头
    – success
    – error

需求:后台要求一定是json数据格式,在contentType:'application/json', 设置即可

function post_json(){
    $.ajax({
        type:'post',
        url:'https://httpbin.org/post',
        data:{
            uname:'pd',
            pwd:'h12',
        },
        contentType:'application/json',
        success:(response)=>{
            console.log(response)
        }
    })
}

beforeSend的使用:主要应用于发送请求前的处理

  • 获取前 将div设置面加载…
  • 提交表单前 验证数据

如果在函数中返回ture继续执行发送请求,如果返回flase取消发送

JQuery中get与post

JQuery为GET与POST设置的专门的方法

function get_data(){
    $.get(
        'https://httpbin.org/get',
        {uname:'pd', pwd:'h12'},
        function(response){
            console.log(response);
        }
    )}

function post_data(){
    $.post(
        'https://httpbin.org/post',
        // 也可以传递str参数
        {uname:'pd', pwd:'h12'},
        function(response){
            console.log(response);
        }
    )}


https://www.xamrdz.com/backend/3te1962933.html

相关文章: