【Ajax】设置用户只可发送一次数据，多余数据不做反应

a9c93f2300

于 2022-12-29 15:57:42 发布

阅读量138

点赞数

分类专栏：网络应用文章标签： ajax javascript 前端

本文链接：https://blog.csdn.net/m0_50939789/article/details/128483328

版权

网络应用专栏收录该内容

18 篇文章 2 订阅

订阅专栏

说明

设置变量 isSending 发送后改变状态
当 isSending 状态改变后不执行发送

前端页面

<html>
    <head>
        <meta http-equiv="Access-Control-Allow-Origin" content="*" />
    </head>
    <body>
        <button>点击请求</button>
        <div id="content" style="width: 300px;height:200px;border:1px solid;"></div>
    </body>
    <script>
        const btn = document.getElementsByTagName('button');
        const content = document.getElementById('content');
        let xhr = null
        let isSending = false // 是否正在发送Ajax请求
        
        btn[0].onclick = function(){
            if(!isSending){
                isSending = true
                xhr = new XMLHttpRequest();
                xhr.open('GET', 'http://127.0.0.1:8000/delay');
                xhr.send('a=200&b=300')
                xhr.onreadystatechange = function(){

                    if(xhr.readyState === 4){
                        if(xhr.status >= 200 && xhr.status < 300){
                            content.innerHTML = xhr.response;
                    }
                    }
                }
            }
        }

    </script>
</html>

后端脚本

const express = require('express');
const app = express()
app.get('/server', (Request, Response)=>{
    Response.setHeader('Access-Control-Allow-Origin', '*')
    Response.send('Hello Ajax')

})
app.get('/delay', (Request, Response)=>{
    Response.setHeader('Access-Control-Allow-Origin', '*')
    setTimeout(()=>{
        Response.send('Hello Ajax')
    }, 3000)
})
app.get('/ie', (Request, Response)=>{
    Response.setHeader('Access-Control-Allow-Origin', '*')
    Response.send('Hello IE')
})
app.post('/server', (Request, Response)=>{
    Response.setHeader('Access-Control-Allow-Origin', '*')
    Response.send('Hello Ajax-4')
})
app.listen(8000, ()=>{
    console.log('8000 running meproject express')
})