Jquery+PHP+ajax+php三级联动菜单(1)——w3cdream|前端学习-开发

'I'm W3cdream,创造',前·所·未·有
Jquery+PHP+ajax+php三级联动菜单(1)

发布作者:iuan   发布时间:2013-12-6   阅读次数:11362

最近公司分配下来一个任务,就是一个类似于注册功能的在线预约开户模块,因为公司的网站是使用DEDE建的网站,而且站是别人抠下来的,因为这个功能涉及到与用户之间的交互功能(一切用户提交的信息都是不可以相信的),所以对于安全性是很高的要求,对于这方面我的考虑可能还不是很高,既然要与用户进行交互,那么增强用户体验是 个非常难提起的话了,因为这个时候我们就要用到头疼的js,站长我这方面对于js的造化还不是很高所以只有使用JQUERY,废话不多聊,直接test,首先我们先要建立一个数据库,包含四个表

当然在我们网站上有相应的下载包,可以自己下载

首先完成预约的第一步,建立一个index.html文件,在这个文件中会有几个表单,

在这个表单的验证中我们引入的是formValidator这个表单验证插件,他的使用非常方便,使用一句语句就可以实现验证

这是js部分

$("#email").formValidator({onshow:"请输入你的邮箱地址然后点击 ‘<span style='color:red'>发送验证码’ </span>",
onfocus:"您能接受的邮件的地址",oncorrect:"谢谢你的合作",onempty:"需要发送验证码?"}).
inputValidator({min:1,max:50,onerror:"邮箱地址不能为空"}).
regexValidator({regexp:"email",datatype:"enum",onerror:"你输入的邮箱格式不正确"});
这是html部分

<input type="text" style="height:35px;" name="email" id="email" class="biaodanreg">
<input id="btnSendCode" type="button" value="发送验证码" onclick="sendMessage()" />
<p id="emailTip" class="onShow">请输入电子邮箱</p>
具体的验证方式可以在网上查找相关的资料,或者可以下载在我们网站上面的的这个插件的下载包,其中有实例的讲解和api的文档,

上面的一步我们完成了是js对于基本验证的功能,下面一步就是实现邮箱发送验证码的功能,对于PHP发送邮件的功能我们基本上不需要很麻烦的自己写类。我们可以直接使用插件PHPemail这个插件可以很快速的帮助我们发送验证码,在我们的文件中我们会在iuan.js文件中看到一段验证码的

//产生验证码
            for (var i = 0; i < codeLength; i++) {
                code += parseInt(Math.random() * 9).toString();
            }
然后我们通过ajax将我们的表单数据发送到后台进行处理

            //获取Email的值
                var sendeMail = $.trim($("#email").val());

                InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器,1秒执行一次
            //向后台发送处理数据
                $.ajax({
                    type: "post", //用POST方式传输
                    dataType: "text", //数据格式:JSON
                    url: 'Common/iuanpost.php', //目标地址
                    data: "action=email"+ "&code=" + code + "&email=" + sendeMail,
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(errorThrown);
                    },
                    success: function (msg){
                        alert(msg);
                    }
                });
为了防止错误性质的发送验证码,和恶意性质的行为我们设置一个定时器60s发送一个

        //timer处理函数
        function SetRemainTime() {
            if (curCount == 0) {                
                window.clearInterval(InterValObj);//停止计时器
                $("#btnSendCode").removeAttr("disabled");//启用按钮
                $("#btnSendCode").val("重新发送验证码");
                $("#btnSendCode").css({background:"rgb(103, 7, 104)",color:"white"});
                code = ""; //清除验证码。如果不清除,过时间后,输入收到的验证码依然有效    
            }
            else {
                curCount--;
                $("#btnSendCode").val(curCount + "秒后重新");
            }
        }
数据提交到后台的时候,我们就需要映入我们今天使用的插件phpemail

function send_mail ($title,$content,$from,$to,$charset='utf8',$attachment ='') { 
		include 'PHPMailer.class.php'; 
		header('Content-Type: text/html; charset='.$charset); 
		$mail = new PHPMailer(); 
		$mail->CharSet = $charset; //设置采用gb2312中文编码 
		$mail->IsSMTP(); //设置采用SMTP方式发送邮件 
		$mail->Host = "smtp.qq.com"; //设置邮件服务器的地址 
		$mail->Port = 25; //设置邮件服务器的端口,默认为25 
		$mail->From = $from; //设置发件人的邮箱地址 
		$mail->FromName = ""; //设置发件人的姓名 
		$mail->SMTPAuth = true; //设置SMTP是否需要密码验证,true表示需要 
		$mail->Username = $from; //设置发送邮件的邮箱 
		$mail->Password = ""; //设置邮箱的密码 
		$mail->Subject = $title; //设置邮件的标题 
		$mail->AltBody = "text/html"; // optional, comment out and test 
		$mail->Body = $content; //设置邮件内容 
		$mail->IsHTML(true); //设置内容是否为html类型 
		$mail->WordWrap = 50; //设置每行的字符数 
		$mail->AddReplyTo($to,"名字"); //设置回复的收件人的地址 
		$mail->AddAddress($to,"收件人地址"); //设置收件的地址 
		if ($attachment != '') //设置附件 
		{ 
			$mail->AddAttachment($attachment, $attachment); 
		} 
		if(!$mail->Send()) 
		{ 
			return false; 
		} else { 
			return true; 
		} 
	}
上面的文件就是实例化我们使用的邮件发送的类,我们现在就需要调用这个类,然后通过自己的函数将我们的邮件发送出去,定义一个函数,这个函数才是真正被我们前台调用的函数类

function postEmail(){
		$data=connect();                //数据库链接函数
		if(!$data){
			echo "数据库链接出问题!";
		}else{
			$code = $_POST['code'];
			$email = $_POST['email'];
			$years = date("Y-m-d H:i:s");

			$dataemail = preg_match("/^\\w+((-\\w+)|(\\.\\w+))*\\@[A-Za-z0-9]+((\\.|-)[A-Za-z0-9]+)*\\.[A-Za-z0-9]+$/", $email);
			$datacode = preg_match("/[0-9]{6}$/", $code);
			if(empty($code) || empty($email) || !$datacode ||!$dataemail){
				echo "数据传送出错";
			}else{
					$title="";
				 	$content="您本次注册的验证码为"."  ".$code."  "."请在半小时内验证预期无效<br>";
				 	$from="";
					$to=$email;
					$charset='utf8';
					$img=send_mail ($title,$content,$from,$to,$charset='utf8',$attachment ='');
					if($img){
						$query=mysql_query("insert into dede_iuan_record(Id,Email,Code,Active,Sendtime) values (null,'$email','$code','0','$years')");
					 	echo "发送成功,请注意查收验证码";
					}else{
					 	echo "邮件发送失败";
	 				}
			}
		}

	}
这个时候我们的用户会接受到一个验证码,将我们的验证码填入其中,再填入验证码的时候我们会触发一个onblur事件

<dt>邮箱验证码:</dt>
    <dd>
	 <input type="text" style="height:35px;" name="code" id="code" onblur="postCode()" class="biaodanreg">
	 <p id="codeShow" class="onShow">请输入邮箱验证码</p>
    </dd>
        function postCode(){
            var codes = $("#code").val();
            var emails = $.trim($("#email").val());
            $.post(
                "Common/iuanpost.php",
                  {
                    action:"postCode",
                    email:emails,
                    code:codes
                  },
                  function(data){
                    //alert("Data: " + data + "\nStatus: " + status);
                    if(data=='success'){
                        // $("#codeShow").attr({class:"onCorrect"});
                        $("#codeShow").html("验证成功");
                        $("#submit").removeAttr("disabled");
                        $("#submit").css({background:"#FF0000",color:"whiter",border:"#FF0000"});
                    }if(data=='error'){
                        // alert("0000000");
                        // $("#codeShow").attr({class:"onError"});
                        $("#codeShow").html("验证出错,或者验证码过期");
                        $("#submit").attr({disabled:"true"});
                        $("#submit").css({background:"#aaa",color:"#efefef",border:"#aaa"});
                    }
                  });

        }
当然我们发送的验证码会被存储到我们的数据库中dede_iuan_record中去,当我们的数据提交成功后相应的我们的验证的Avtive会变为0就失去的效应,

	function postCode(){
		$data=connect();
		if(!$data){
			echo "数据库链接出问题!";
		}else{
			$code = trim($_POST['code']);
			$email = trim($_POST['email']);

			$dataemail = preg_match("/^\\w+((-\\w+)|(\\.\\w+))*\\@[A-Za-z0-9]+((\\.|-)[A-Za-z0-9]+)*\\.[A-Za-z0-9]+$/", $email);
			$datacode = preg_match("/[0-9]{6}$/", $code);
			if(empty($code) || empty($email) || !$datacode ||!$dataemail){
				echo "error";
				echo "数据传送出错,请检查您的邮箱是否正确\n或者验证码是否填写";
			}else{
				$counts = mysql_query("SELECT * FROM dede_iuan_record WHERE Code='$code' AND Email='$email' AND Active=0;");
				$row = mysql_fetch_array($counts);
				if(is_array($row)){
					
					echo "success";
				}else{
					echo "error";
				}
			}
		}

	}

这就是页面的第一步完结,待续……



常用昵称:萧强,全端布道者

姓名:“刘晓强”,W3CDream创始人,目前就职于易点付。专注于web前端和移动端方面知识的研究,熟练掌握photoshop和AI,喜爱Flat UI设计和Metro UI风格,熟练掌握CSS3+HTML5技术、LESS CSS和Sass CSS,还有jQuery框架方面及一些前端框架bootstrap响应式设计等。新浪微博
友荐云推荐

PHP+MySQL网络编程

热点文章

新闻资讯

标签云

友情赞助