个人充值查询demo爬坑

àì夳堔傛蜴生んèń 2022-05-18 09:17 182阅读 0赞

今天写了一个充值和查询的小演示，在期间遇到一个输入输入检测的错误，在这里分享给大家，希望能够帮助到需要的

html部分

<!DOCTYPE html>
    <body>
    <div class="main">
        <div class="clearfix">
            <span class="recharge_account" style="width: 50%">充值时长</span>
        </div>
        <div class="recharge_con js_recharge_con"  style="margin-top: 20px">
            <div class="recharge_txt">
                <input type="text" placeholder="请输入手机号" id="userphone"><button class="search">查询</button>
            </div>
        </div>
        <div class="recharge_con js_recharge_con"  style="margin-top: 20px">
            <div class="recharge_txt">
                <input type="text" placeholder="请输入充值时长" id="addtimelong">
            </div>
        </div>
        <span class="pay_confirm disabled" id="sureadd">确认充值</span>
    </div>
    <script src="./Public/pay/mb/js/jquery-1.11.1.min.js"></script>
    </body>
    </html>

简单封装过后的js部分

(function(){
        	 
            var Page={
                canLogin:false,
                serverUrl:"http://路由",
                init:function(){
                    var _this=this;
                    _this.bindEvent()
                    _this.searchClick()
                    console.log("init")
                },
                addTime:function(){
                    var _this=this;
                    var myphone=$('#userphone').val()
                    var mytime=$('#addtimelong').val()
                    $.ajax({
                        type: 'put',
                        url: _this.serverUrl+"路由?phone="+myphone+"&remaintime="+mytime,
                         headers:{
                            	Authorization:localStorage.getItem("basic")
                            },
                        dataType:"json", 
                        success: function(resp)
                        {
                        	console.log(resp)
                        	var data=resp
                            console.log("resp",resp)
    						if(data.code==0){
    						$('#addtimelong').val('')
    						_this.canLogin=false;
    						
                            	  alert("恭喜你，充值成功！")
                            	  $("#sureadd").css("background","#CAD3D7")
    //                      	 location.reload()
                            }else{
                            	$('#addtimelong').val('')
                            	alert("该用户号码不存在. 请重新确认号码");
                            } 
                        },
                        error:function(error){
    						$('#addtimelong').val('')
                          	alert("该用户号码不存在. 请重新确认");
                        }
                    });
                },
                search:function(){
                	 var _this=this;
                    var myphone=$('#userphone').val()
                    $.ajax({
                        type: 'get',
                        url: _this.serverUrl+"路由?phone="+myphone,
                         headers:{
                            	Authorization:localStorage.getItem("basic"),
                            },
                        dataType:"json", 
                        success: function(resp)
                        {
                        	console.log(resp)
                        	var data=resp
                            console.log("resp",resp)
    						if(data.code==0){
                            	  alert("该账户当前剩余时长为："+data.data.RemainTime+"分钟")
                            }else{
                            	$('#addtimelong').val('')
                            	alert("该用户号码不存在. 请重新确认号码");
                            } 
                        },
                        error:function(error){
    						$('#addtimelong').val('')
                          	alert("该用户号码不存在. 请重新确认");
                        }
                    });
                },
                bindEvent:function(){
                    var _this=this;
                    $("#sureadd").click(function(){
                        if(_this.canLogin){
                            _this.addTime()
                        }
                    })
                    $(".main input").on('input',function(){
                    		
                        if($("#userphone").val()&&$("#addtimelong").val()){
                             if(exe.test($("#userphone").val())){
                        		$(".search").css("background","#14c864")
                 	        }else{
                    		    $(".search").css("background","#CAD3D7")
                 	        }
                	     })
                 
    	                $(".search").on('click',function(){
    		            	if($(".search").css("background"）=="#14c864"){
    		            		 
    		            	}
    	                })	
                        	if(exe.test($("#userphone").val())){
                            _this.canLogin=true;
                            $("#sureadd").css("background","#14c864")
                            $("#login_js_confirm.disabled")&&$("#login_js_confirm.disabled").removeClass("disabled")
                        	}
                        	else{
                        		$('#addtimelong').val('')
                        		alert("这不是一个手机号，请重新输入")
                        	}
                        }else{
                            _this.canLogin=false;
                           if(!$("#login_js_confirm").hasClass("disabled")){
                               $("#login_js_confirm").addClass("disabled")
                           }
                        }
                    })
                }
            }
            $(function(){
                Page.init();
            })
        })(jQuery)

由于$（“。main \#userphone”）。on（'input'，function（）\{\}会监测所有输入框的输入，所以它的查询会在充值成功过后循环调用，然后就会不断的弹出余额显示。

开始我的解决方式是通过将充值完成后提交按钮变回不可选，将其的颜色改变为初始状态，再把这两者作为判断它查询余额的条件。后来经过测试发现不可行，原因在于我的的初始判断条件是输入框的输入。

后来想了半天想到的解决方式是单独再为查询列事件，条件单独设立为查询输入框的输入，并给查询设置一个可控变量，通过这个变量的变化来判断查询事件的可行性

(function(){
        	 
            var Page={
                canLogin:false,
                cansearch:false,
                serverUrl:"http://路由",
                init:function(){
                    var _this=this;
                    _this.bindEvent()
                    _this.searchClick()
                    console.log("init")
                },
                addTime:function(){
                    var _this=this;
                    var myphone=$('#userphone').val()
                    var mytime=$('#addtimelong').val()
                    $.ajax({
                        type: 'put',
                        url: _this.serverUrl+"路由?phone="+myphone+"&remaintime="+mytime,
                         headers:{
                            	Authorization:localStorage.getItem("basic")
                            },
                        dataType:"json", 
                        success: function(resp)
                        {
                        	console.log(resp)
                        	var data=resp
                            console.log("resp",resp)
    						if(data.code==0){
    						$('#addtimelong').val('')
    						_this.canLogin=false;
    						
                            	  alert("恭喜你，充值成功！")
                            	  $("#sureadd").css("background","#CAD3D7")
    //                      	 location.reload()
                            }else{
                            	$('#addtimelong').val('')
                            	alert("该用户号码不存在. 请重新确认号码");
                            } 
                        },
                        error:function(error){
    						$('#addtimelong').val('')
                          	alert("该用户号码不存在. 请重新确认");
                        }
                    });
                },
                search:function(){
                	 var _this=this;
                    var myphone=$('#userphone').val()
                    $.ajax({
                        type: 'get',
                        url: _this.serverUrl+"路由?phone="+myphone,
                         headers:{
                            	Authorization:localStorage.getItem("basic"),
                            },
                        dataType:"json", 
                        success: function(resp)
                        {
                        	console.log(resp)
                        	var data=resp
                            console.log("resp",resp)
    						if(data.code==0){
                            	  alert("该账户当前剩余时长为："+data.data.RemainTime+"分钟")
                            }else{
                            	$('#addtimelong').val('')
                            	alert("该用户号码不存在. 请重新确认号码");
                            } 
                        },
                        error:function(error){
    						$('#addtimelong').val('')
                          	alert("该用户号码不存在. 请重新确认");
                        }
                    });
                },
                searchClick:function(){
                	 var _this=this;
                	 $(".main #userphone").on('input',function(){
                	 	var exe = /(^1[3|5|8|4|7][0-9]{9}$)/;
                    if(exe.test($("#userphone").val())){
                    		_this.cansearch=true
                    		$(".search").css("background","#14c864")
                 	}else{
                 		_this.cansearch=false
                    		$(".search").css("background","#CAD3D7")
                 	}
                	 })
                 
    	            $(".search").on('click',function(){
    		            	if(_this.cansearch==true){
    		            		 _this.search()
    		            	}else{
    		            		_this.cansearch=true
    		            	}
    	            })	
                   		
                },
                bindEvent:function(){
                    var _this=this;
                    $("#sureadd").click(function(){
                        if(_this.canLogin){
                            _this.addTime()
                        }
                    })
                    $(".main input").on('input',function(){
                    		
                        if($("#userphone").val()&&$("#addtimelong").val()){
                        	if(exe.test($("#userphone").val())){
                            _this.canLogin=true;
                            $("#sureadd").css("background","#14c864")
                            $("#login_js_confirm.disabled")&&$("#login_js_confirm.disabled").removeClass("disabled")
                        	}
                        	else{
                        		$('#addtimelong').val('')
                        		alert("这不是一个手机号，请重新输入")
                        	}
                        }else{
                            _this.canLogin=false;
                           if(!$("#login_js_confirm").hasClass("disabled")){
                               $("#login_js_confirm").addClass("disabled")
                           }
                        }
                    })
                }
            }
            $(function(){
                Page.init();
            })
        })(jQuery)

这样写之后由于两个事件的条件独立，所以不论是充值前后，查询都不会有冲突了，所以要解决这类问题就得先理清事件触发的判断条件，再根据其条件做相应的处理。以上就是个人这次解决问题的部分心得，希望大家可以有用到的地方！

发表评论取消回复

表情：

评论列表（有 0 条评论，182人围观）

还没有评论，来说两句吧...

相关阅读

相关 java实现会员充值功能

近期负责的项目中有关于充值会员的功能，特做一个会员充值流程小结，这中间或许也存在着不足。希望可以得到大家的理解和建议。在调用第三方接口支付时修改表的状态(此处不做详细阐述)。

快来打我*/ 2023年09月29日 11:59/ 0 赞/ 25 阅读

相关 Vue--爬坑

1.路由变化页面数据不刷新问题；出现这种情况是因为依赖路由的params参数获取写在created生命周期里面,因为相同路由二次甚至多次加载的关系没有达到监听，退出页

╰+哭是因爲堅強的太久メ/ 2023年06月01日 12:51/ 0 赞/ 39 阅读

相关商业发掘 - 苹果 IOS 充值代充，充值卡为什么会便宜，以及其中的一些门道

文章目录商业发掘 - 苹果 IOS 充值代充，充值卡为什么会便宜，以及其中的一些门道 1、虚拟卡小额充满 2

系统管理员/ 2022年12月07日 12:05/ 0 赞/ 647 阅读

相关爬坑笔记

引子游戏开发过程中遇坑在所难免，没遇到的话基本上也是因为爬的不够远不够深罢了，近日自己便遇到一坑，虽小但又觉的挺微妙（subtle），在此一记~ 问题

浅浅的花香味﹌/ 2022年07月28日 11:57/ 0 赞/ 223 阅读

相关机房重构——充值

写在前面的话：其实重构开始有一段时间了但是由于开始不知道如何下手搞得乱七八糟，浪费了很多时间，因为看博客什么的好多人都用了存储过程，泛型什么的感觉自己需要学的有

谁践踏了优雅/ 2022年07月28日 01:04/ 0 赞/ 223 阅读

相关 php充值页面写法

控制器 public function actionOnline() \{ if (Yii::app()->request->isAjaxRequest)

雨点打透心脏的1/2处/ 2022年06月09日 07:14/ 0 赞/ 156 阅读

相关我swoole爬坑记,swoole安装和小demo（1）

Date : 2017-09-08 安装前准备： php -v 如果php版本小于5.6的，请卸载 rpm -qa | grep php 删除掉 rpm -e

偏执的太偏执、/ 2022年06月07日 23:49/ 0 赞/ 225 阅读

相关个人充值查询demo爬坑

今天写了一个充值和查询的小演示，在期间遇到一个输入输入检测的错误，在这里分享给大家，希望能够帮助到需要的 html部分 <!DOCTYPE html> <b

àì夳堔傛蜴生んèń/ 2022年05月18日 09:17/ 0 赞/ 183 阅读

相关【C#重构】——充值

教师端功能：实现对学生卡号的充值用到的表：student\_info 查询相应卡号学生信息；recharge\_info充值记录表 recharge\_info充值记

男娘i/ 2022年05月12日 14:34/ 0 赞/ 281 阅读

相关个人 github demo 整理

一、java 相关 1. 布隆过滤器使用：[https://github.com/ChaseDreamBoy/bloom-filter-demo][https_gith

深碍√TFBOYSˉ_/ 2021年11月11日 06:01/ 0 赞/ 614 阅读