zepto ajax接收验证码

最新推荐文章于 2021-08-05 12:05:28 发布

神奇大叔

最新推荐文章于 2021-08-05 12:05:28 发布

阅读量235

点赞数

分类专栏： zepto.js 网页制作案例文章标签： ajax zeptojs nodejs

本文链接：https://blog.csdn.net/weixin_43294560/article/details/104146582

版权

网页制作案例同时被 2 个专栏收录

41 篇文章 3 订阅

订阅专栏

zepto.js

7 篇文章 3 订阅

订阅专栏

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>
  <!--
    * 如何废除一个ajax请求 ----abort()方法
    需求：点击获取验证码的按钮，用户十秒时候可以再次获取，当十秒过后第一次请求没有返回，用户再次点击获取
    然后因为网速好或者其他原因，两次请求同时返回，该怎么解决

    * disabled属性   设置表单项或者按钮不可再点击或者操作；但是只是针对click事件，而并没有针对touch事件作出处理。
  -->
  <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>