Question

我需要从数据库中检索所有数据，并使用angular.js和PHP将它们绑定在文本字段中。我在下面解释我的代码。

的index.php

<?php
include_once 'dbconfig.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CRUD Operations With PHP and MySql - By Cleartuts</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<center>

<div id="body">
 <div id="content">
    <table align="center">
    <tr>
    <th colspan="5"><a href="add_data.html">add data here.</a></th>
    </tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>City Name</th>
    <th colspan="2">Operations</th>
    </tr>
    <?php
 $sql_query="SELECT * FROM users";
 $result_set=mysql_query($sql_query);
 while($row=mysql_fetch_row($result_set))
 {
  ?>
        <tr>
        <td><?php echo $row[1]; ?></td>
        <td><?php echo $row[2]; ?></td>
        <td><?php echo $row[3]; ?></td>
  <td align="center"><a href="edit_data.php?edt_id=<?php echo urlencode($row[0]) ?>"><img src="images/pencil_small.png" align="EDIT" /></a></td>
        <td align="center"><a href="javascript:delete_id('<?php echo $row[0]; ?>')"><img src="images/cross-small-icon.png" align="DELETE" /></a></td>
        </tr>
        <?php
 }
 ?>
    </table>
    </div>
</div>

</center>
</body>
</html>

当用户点击编辑按钮时，它将重定向到下面给出的下一页（i.e-edit_data.php），该页面包含将要编辑的所有数据。

edit_data.php：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="edit_data">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CRUD Operations With PHP and MySql - By Cleartuts</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script src="js/angularjs.js" type="text/javascript"></script>
<script src="js/update.js" type="text/javascript"></script>
</head>

<body>
<center ng-controller="updateController">
<div id="body">
 <div id="content">
    <table align="center">
    <tr>
   <td><input type="text" name="first_name" placeholder="First Name" ng-model="first_name"  required /></td>
    </tr>
    <tr>
    <td><input type="text" name="last_name" placeholder="Last Name" ng-model="last_name"  required /></td>
    </tr>
    <tr>
    <td><input type="text" name="city_name" placeholder="City" ng-model="city"  required /></td>
    </tr>
    <tr>
    <td>
    <button type="submit" name="btn-update" ng-click="update_data();"><strong>UPDATE</strong></button>
    </td>
    </tr>
    </table>
    </div>
</div>

</center>
</body>
</html>

在此页面中，我需要在文本字段中显示所有提取的数据。

update.js：

var app=angular.module("edit_data", []);
app.controller("updateController",function($scope,$http){
    $scope.errors = [];
    $scope.msgs = [];
    $scope.update_data=function(){
        $http.post('js/update.php',{"first_name":$scope.first_name,"last_name":$scope.last_name,"city":$scope.city}
        ).success(function(data, status, headers, config){
            if(data.msg!=''){
            $scope.msgs.push(data.msg);
            }else{
                $scope.errors.push(data.error);
            }
        }).error(function(data, status) { // called asynchronously if an error occurs
               // or server returns response with an error status.
              $scope.errors.push(status);
        });
    }
});

我需要从我的Mysql数据库中检索这三个数据first_name,last_name,user_city。请帮我解决这个问题。

Answer 1

制作连接到db的php文件并从db中检索给定的参数，然后从角度调用它：

var app=angular.module("myApp", []);
app.controller("updateController",function($scope,$http){
$scope.errors = [];
$scope.msgs = [];
$scope.update_data=function(){
    $http.post('update.php',  {"first_name":$scope.first_name,"last_name":$scope.last_name,"city":$scope.ci    ty}
    ).success(function(data, status, headers, config){
        $scope.resultData = data;
  }).error(function(data, status) { // called asynchronously if an error occurs
           // or server returns response with an error status.
          $scope.errors.push(status);
    });
}
});

查看文件：
<div ng-controller="updateController" ng-app="myApp"> <div ng-repeat=item in resultData"> {{item.yourDbdata}} </div> </div>

你的更新php发布数据调用db和echo json_encode（查询结果）

Answer 2

在php文件中写一个函数（比如retrieveData（）），从数据库中检索数据。
在获取所需数据后的retrieveData（）中，执行echo json_encode（$ result）;
在您的HTML中，您可以拥有输入类型按钮，其值为＆＃34;编辑＆＃34;和事件ng-click =＆＃34; editUser（）＆＃34;
在你的js控制器中发送一个请求到retrieveData（），即

$ scope.editUser = function（）{           $ HTTP（{               网址：＆＃39; path_to_function / retrieveData /＆＃39 ;,               方法：＆＃39; POST＆＃39 ;,               数据：＆＃34;搜索=＆＃34; + $ scope.username ，               标题：{＆＃39;内容类型＆＃39;：＆＃39; application / x-www-form-urlencoded＆＃39;}               成功（函数（响应，状态，标题，配置）{                   $ scope.result = response;
              }）;             }

这里$ scope.username可以是任何东西，例如编辑特定用户的记录，$ scope.username将是该用户在数据库中获取的用户名。 5.必需的结果将在变量$ scope.result中的html上提供。

使用angular.js和PHP从数据库中检索数据

2 个答案: