个人充值查询demo爬坑

àì夳堔傛蜴生んèń 2022-05-18 09:17 167阅读 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 条评论，167人围观）

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

相关阅读

相关 Vue--爬坑

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

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

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

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

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

相关攻城略地mysql充值_攻城掠地充值有巨惠!平台折扣5.0超划算

攻城掠地充值有巨惠，平台折扣5.0超划算，低价入手超多元宝福利，这是非常难的，各类神将、资源以及超强装备一键到手真简便，完美打造属于你的战力巅峰，简直爽到爆。 ![96627

青旅半醒/ 2022年11月01日 10:52/ 0 赞/ 187 阅读

相关爬坑笔记

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

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

相关机房重构——充值

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

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

相关 php充值页面写法

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

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

相关我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 赞/ 203 阅读

相关个人充值查询demo爬坑

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

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

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

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

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

相关个人 github demo 整理

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

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