使用AngularJS实现的本地数据库(xampp)访问

最新推荐文章于 2021-02-06 12:52:15 发布

Steven--Lee

最新推荐文章于 2021-02-06 12:52:15 发布

阅读量1.6k

点赞数

分类专栏： Angularjs 文章标签： angularjs

本文链接：https://blog.csdn.net/momDIY/article/details/53822836

版权

Angularjs 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

第一部分连接数据库
<?php
//连接数据库
$dbHost="localhost";
$dbUserName="root";
$dbPWD="123456";
$dbName="angular";
$char_code="utf-8";

$conn=new mysqli($dbHost,$dbUserName,$dbPWD,$dbName);

第二部分数据库查询

<?php
require_once('SQL.php');
header("Conntent-type:text/json");
$sex=$_GET["sex"];
//0：女。1：男。2：全部
$conn->query("set names utf8");
if($sex=='女'||$sex=='男'){
   $result=$conn->query("select * from student where sex='$sex'");
}else{
   $result=$conn->query("select * from student");
}
$arr=[];
if($result){
       foreach($result as $thisVal){
           array_push($arr,$thisVal);
       }
       echo json_encode(array("data"=>$arr));
   }

第三部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script type="text/javascript" src="../js/angular-1.3.0.js"></script>
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.css" />
	</head>

	<body style="min-width: 150px;" ng-app="myApp" ng-controller="myController">
		<button class="btn btn-danger" ng-click="clickAction($event)" id="男">男生信息</button>
		<button class="btn btn-warning" ng-click="clickAction($event)" id="女">女生信息</button>
		<button class="btn btn-info" ng-click="clickAction($event)" id="">全部</button>
		<table class="table table-striped">
			<tr class="warning">
				<td>学号</td>
				<td>姓名</td>
				<td>性别</td>
				<td>年龄</td>
			</tr>
			<tr class="active" ng-repeat="student in aa">
				<td>{{student.ID}}</td>
				<td>{{student.name}}</td>
				<td>{{student.sex}}</td>
				<td>{{student.age}}</td>
			</tr>
		</table>
			<script type="text/javascript">
				var myApp=angular.module("myApp",[]);
				myApp.controller("myController",function($scope,$http){
					$scope.clickAction=function(event){
					$scope.aa=[];

						var Se=event.target.id;

						console.log(Se);
						$http.get("http://192.168.10.151/newANGULAR/SQL_ITEM/Angular_SQL.php?sex="+Se).success(function(res){
//							$scope.aa=[];
							for(var i = 0; i < res.data.length; i++) {
								$scope.aa.push(res.data[i]);
							}
							console.log(res);

							console.log(res.data.length);
						});
					}
				});
				
				
			</script>
	</body>

</html>