js实现验证码功能（包含数据交互）

                $api.addEvt($api.dom('.unbind-detail-send-smg'), 'click', function () {

                    //点击后倒计时
                    clearInterval(timer);
                    var time = 60;
                    var _this = this;
                    timer = setInterval(function () {

                        if (time <= 0) {
                            _this.innerText = '';
                            _this.innerText = '点击重新发送';
                            _this.style.opacity = 1;
                            _this.disabled = false;
                        } else {
                            _this.disabled = true;
                            _this.innerText = "";
                            _this.style.opacity = 0.3;
                            _this.innerText = "重新发送" + (time) + "秒";
                            time--;
                        }
                    }, 1000);

                    // 发送请求
                    W.addBridgeEvent('unBindingDeviceSendMsg', function (ret) {
                        msgId = ret.success;

                    });

                    W.NET.POST({
                        eventName: 'unBindingDeviceSendMsg',
                        url: '/ysscale/mobile/user/device/unBindingDeviceSendMsg',
                        data: {
                            deviceMac: deviceMac,
                            msgId: "",
                            userId: userId
                        }
                    })
                })
                
前面一部分是实现发送验证码功能，后面是调用封装的ajax请求向后台发送参数。

<script>
//封装好的 Ajax ：打开方式 地址 是否异步 回调函数 提交数据
function Ajax (method,address,flag,callBacks,data) {
	var xhr = null;
	if(window.XMLHttpRequest) {
		xhr = new XMLHttpRequest();
	} else {
		xhr = new ActiveXObject('Microsoft.XMLHTTP');
	}
	if (method == 'GET') {
		xhr.open('GET',address,flag);
		xhr.send();		
	}else if (method == 'POST') {
		xhr.open('POST',address,flag);
		xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
		xhr.send(data);			
	}
	
	xhr.onreadystatechange = function() {
		if ( xhr.readyState == 4 ) {
			if ( xhr.status == 200 ) {
				callBacks(xhr.responseText);
			} else {
				alert('出错了,Err：' + xhr.status);
			}
		}
		
	}	
}		

window.onload = function () {
	var btn = document.getElementById('btn');
	function show (data) {
		console.log(data);
	}
	btn.onclick = function () {
		var username = document.getElementById('user').value;
		var age = document.getElementById('age').value;
		data = "username=" + username + "&age=" + age;
		Ajax('POST','post.php',true, show, data);
	}
}
复制代码

上面这段代码实现原生的封装ajax ,post请求，传递json格式需要将xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');改为xhr.setRequestHeader('content-type','application/json');

注意传输的data值要为字符串，之前传成对象了。对象转字符串用 JSON.stringify(data)

                //提交验证码按钮事件
                $api.addEvt($api.dom('.unbind-detail-right'), 'click', function () {
                    msgCode = $api.dom('.unbind-detail-msgCode').value


                    if (!msgCode) {

                        api.toast({
                            msg: '验证码不能为空'
                        })
                    } else if (msgCode.length == 6) {
                        W.NET.POST({
                            eventName: 'unBindingDevice',
                            url: '/ysscale/mobile/user/device/unBindingDevice',
                            data: {
                                deviceMac: deviceMac,
                                msgId: msgId,
                                msgCode: msgCode,
                                userId: userId
                            }
                        })

                        api.toast({
                            msg: '验证码已提交'
                        })

                    } else {
                        api.toast({
                            msg: '验证码长度不正确'
                        })

                    }

                    W.addBridgeEvent('unBindingDevice', function (ret) {
                        // console.log(JSON.stringify(ret))
                        if (ret.success == 'true') {
                            W.senBridgeEvent('deciveDetail', 'unbindDeciveSuccess');
                            W.senBridgeEvent('myDecive', 'refreshMyDecive');
                            ROUTER.go(-1);

                        } else {
                            api.toast({msg: err});
                            // api.toast({
                            //     msg: '解绑失败'
                            // })
                        }
                    })

                })  


实现验证码确定事件，要注意后端传回来的值为“true”而不是true，所以判断为    ret.success == 'true'

ROUTER.go(-1);为删除本页并返回上一个页，实现返回两个比较难，可以在本页写个广播传给上一页，在在上一页写个立即执行函数调用ROUTER.go(-1);实现连续返回两页。
也可以在验证码页使用iframe实现多级页面跳转。
复制代码