自己做的访问简单的php，mysql，用ajax请求做的一个简单登录验证，很适合刚刚学习php搭建最基本的前端，后台，访问数据库流程的建立
get和post方式有些不同，稍后贴出代码。
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title></title> <script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body ng-app="myApp" ng-controller="mycro"> 用户名:<input type="text" id="user" ng-model="name"></br> 密码:<input type="password" id="pwd" ng-model="password"></br> <button ng-click="hehe()">登录</button> </body> <script> var app=angular.module("myApp",[]); app.controller("mycro",function($scope){ $scope.name="wangxupeng"; $scope.hehe=function(){ //创建XMLHttpRequest对象 var xmlHttp=null if (window.XMLHttpRequest) { xmlHttp=new XMLHttpRequest() } else if (window.ActiveXObject) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP") } var url="./pass.php"+"?name="+$scope.name+"&password="+$scope.password; xmlHttp.onreadystatechange=stateChanged//服务器状态改变调用函数 xmlHttp.open("GET",url,true) //xmlHttp.send("name="+$scope.name); xmlHttp.send(null); //访问成功处理函数 function stateChanged() { if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { //document.getElementById("txtHint").innerHTML=xmlHttp.responseText alert(xmlHttp.responseText); } }; } }) </script> </html>
上面get方式的前端请求，
<? $name=$_GET["name"]; $password=$_GET["password"]; $db=mysql_connect("localhost","wangxupeng","123456");//链接数据库 if(!$db){ die('can not connect'.mysql_error()); }else{ mysql_select_db("first",$db); $out=mysql_query("select * from user"); $count=0; while($r1=mysql_fetch_array($out)){ if($r1[0]==$name&&$r1[1]==$password){ $count++; } } if($count>=1){ echo "您已经成功登录"; } else echo "该用户不存在"; } mysql_close(); ?>
这是后台简单验证，（再次申请，只做了最简单的功能，合法性验证什么的都没有做）
－－－－－－－－－－－－－－－－－－－－－－
下面是post 方式，需要修改
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title></title> <script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body ng-app="myApp" ng-controller="mycro"> 用户名:<input type="text" id="user" ng-model="name"></br> 密码:<input type="password" id="pwd" ng-model="password"></br> <button ng-click="hehe()">登录</button> </body> <script> var app=angular.module("myApp",[]); app.controller("mycro",function($scope){ $scope.name="wangxupeng"; $scope.hehe=function(){ //创建XMLHttpRequest对象 var xmlHttp=null if (window.XMLHttpRequest) { xmlHttp=new XMLHttpRequest() } else if (window.ActiveXObject) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP") } var url="./pass.php"; xmlHttp.onreadystatechange=stateChanged//服务器状态改变调用函数 xmlHttp.open("POST",url,true) xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//设置请求头上传数据模式，post方法使用
／／详细解析下面贴出了一个帖子，讲解的更详细。
xmlHttp.send("name="+$scope.name+"&password="+$scope.password); //访问成功处理函数 function stateChanged() { if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { //document.getElementById("txtHint").innerHTML=xmlHttp.responseText alert(xmlHttp.responseText); } }; } }) </script> </html>
http://blog.csdn.net/mhmyqn/article/details/25561535［post方式需要更改content－type详细解说］
后台的php则只要把上一个php文件中全局变量$_get改成$_post就可以了。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
jquery封装好的post，get请求代码则简洁很多。
jquery的get方式代码如下：
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title></title> <script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body ng-app="myApp" ng-controller="mycro"> 用户名:<input type="text" id="user" ng-model="name"></br> 密码:<input type="password" id="pwd" ng-model="password"></br> <button ng-click="hehe()">登录</button> </body> <script> var app=angular.module("myApp",[]); app.controller("mycro",function($scope){ $scope.name="wangxupeng"; $scope.hehe=function(){ var url="./pass.php?name="+$scope.name+"&password="+$scope.password; $.get(url,function(data){ alert(data); }) } }) </script> </html>
后台无需修改
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
jquery的post方法代码如下
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title></title> <script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body ng-app="myApp" ng-controller="mycro"> 用户名:<input type="text" id="user" ng-model="name"></br> 密码:<input type="password" id="pwd" ng-model="password"></br> <button ng-click="hehe()">登录</button> </body> <script> var app=angular.module("myApp",[]); app.controller("mycro",function($scope){ $scope.name="wangxupeng"; $scope.hehe=function(){ var url="./pass.php"; $.post(url,"name="+$scope.name+"&password="+$scope.password,function(data){alert(data)}) } }) </script> </html>
这四种方式都只是简单的钱后台数据交换的基本模版。可作初学者的参考和自己的备忘笔记
