zepto ajax接收验证码

客官°小女子只卖身不卖艺 2021-07-24 11:57 391阅读 0赞

**zepto的ajax方式和jq一样**

node.js服务器设置:

/** * Created by 10853 on 2020/2/1. */
    //引入模块
    var express=require('express');
    
    //创建服务器
    var app=express();
    
    
    //开启服务器并监听端口
    app.listen(3000,function(){ 
        console.log('this express server is running at http://127.0.0.1:3000 ');
    
    })
    
    app.get('/',function(req,res){ 
        var arr=[1,2,3,4,5];
        //跨域设置
        res.set('Access-Control-Allow-Origin','*');
    
        setTimeout(function(){ 
            res.send(arr);
        },3000);
    })
    
    app.post('/register',function(req,res){ 
        var list=req.body.name;
        console.log(list);
    })

页面设置:

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    		<title>ajax容易忽视的重点</title>
    		<style type="text/css">
    			#btn{ 
    				width: 200px;
    				height: 200px;
    				background: red;
    				border-radius: 20px;
    				text-align: center;
    				line-height: 200px;
    				font-size: 30px;
    			}
    		</style>
    	</head>
    <body>
      
      <button id="btn">按钮</button>
      <script src="../js/zepto.js" type="text/javascript" charset="utf-8"></script>
      <script src="../js/touch.js" type="text/javascript" charset="utf-8"></script>
      <script type="text/javascript">
    		$(function(){ 
    			//标识用户是否可以点击,当颜色变回来才可以点击
    			var isSend=false;
    			var xhr=null;
    			$('#btn').on('touchstart',function(){ 
    
    				if(isSend)
    				{ 
    					return;
    				}
    				isSend=true;
    
    				$('#btn').css('background-color','gray');
    
    				setTimeout(function(){ 
    					$('#btn').css('background-color','red');
    					isSend=false;
    				},2000);
    
    				//判断用户是否发送请求
    				if(!xhr) { 
    					xhr = sendXml();
    				}else{ 
    					//如果每次点击代表发送一次请求,每次点击取消上一次的ajx请求
    					//取消上一次的ajax请求
    					xhr.abort();
    					xhr=sendXml();
    				}
    			});
    
    			function sendXml()
    			{ 
    				var xhr= $.ajax({ 
    						...
    				});
    
    				return xhr;
    			}
    		})
      </script>
    </body>
    </html>