登陆功能:ajax的简单应用
发布时间:2020-12-16 01:43:17 所属栏目:百科 来源:网络整理
导读:最近在w3school上学习web相关的知识,感觉很有意思。发现最好的学习方法就是多写代码,所以构思用学到的知识做一个小网站。 网站首先要实现登陆。登陆的验证功能使用Javascript在前端实现。当验证成功时提交到后台,后台进行访问数据库并验证用户名和密码。
最近在w3school上学习web相关的知识,感觉很有意思。发现最好的学习方法就是多写代码,所以构思用学到的知识做一个小网站。 网站首先要实现登陆。登陆的验证功能使用Javascript在前端实现。当验证成功时提交到后台,后台进行访问数据库并验证用户名和密码。而前端和后台的交流就用ajax来实现。ajax是一种不用重新加载整个页面而更新部分网页的技术。 在前端通过ajax可以将用js得到的前端表单数据传到后台php页面,然后后台php页面进行验证并且通过echo打印出验证结果传递到前台。 Jquery真的是大大简化了前端编程过程。在引入jquery库后,ajax其实就是两个简单的函数,$.post()和$.get().分别为使用post和get方法传递数据。而区别就是get方法通过url传递数据,数据为大家可见;而post方法通过http协议传递数据,较为安全。 post方法传递数据: $.post("url",{json},callback(function(result){}));其中url为数据接收的php页面,json为要传递的数据,格式为{name:John,password:******,......} php页面的返回值为result,当得到返回值后触发callback函数。 下面是代码: HTML页面:
input type="text" name="name" id="name" placeholder="User_Name"> <input type="password" name="password" id="password" class="form-control" placeholder="Password"> <button type="submit" id="submit" class="btn btn-success">Sign_In</button> JS代码: $.post("check_ajax.php",{name:lname,password:lpassword},function(result){ flag=result; if(flag=="200")//接收后台验证成功的消息,并跳转页面 { alert("Welcome "+lname); location.href="library.php"; } if(flag=="404") { alert("Sorry,this name doesn`t exist"); } if(flag=="666") { alert("Wrong password"); } }); php代码: <?php $name=$_POST['name'];//从POST数组中的到前端传递的数据 $password=$_POST['password']; error_reporting(E_ALL ^ E_DEPRECATED);//设置报警级别。当连接数据库时,用mysql_xxx语句会报警报 $con=mysql_connect("localhost","root","1234","mysql"); if(!$con){die(mysql_error());} mysql_select_db("library",$con); $result=mysql_query("select * from user where name='".$name."'",$con); //查询数据库 $row=mysql_fetch_array($result); if(mysql_num_rows($result)==0) { echo "404";//对前端返回查询信息 } else { $check=(string)$row['password']; if($check==$password) { echo "200"; } else { echo "666"; } } mysql_close($con);//关闭数据库 ?> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |