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

I need to retrieve all my data from database and bind them in text-field using angular.js and PHP. I am explaining my code below.

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>

When user will click on edit button it will redirect to the next page(i.e-edit_data.php) which is given below and this page contains all the data which are going to be edited.

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>

In this page i need to display all fetched data inside text-field.

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);
        });
    }
});

I need to retrieve these three data first_name,last_name,user_city from my Mysql database.Please help me to resolve this issue.

douzhe1264
douzhe1264 index.php页面。
大约 5 年之前 回复
duandongji2231
duandongji2231 你的不是一个单页面的应用程序。首先,您在页面上显示所有用户,然后进行编辑,您将打开一个新页面。对?
大约 5 年之前 回复

2个回答




制作连接到db的php文件并从db,
中检索你的给定参数,之后调用它 angular:</ p>
</ blockquote>

  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){//如果发生错误则异步调用
//或服务器返回错误状态的响应。
$ scope.errors.push(status) ;
});
}
});
</ code> </ pre>

查看文件:


&lt; div ng-controller =“updateController”ng-app =“myApp”&gt;
&lt; div ng-repeat = itemData中的项目“&gt;
{{item.yourDbdata}}
&lt; / div&gt;
&lt; / div&gt;
</ code> </ p>

您的更新php获取发布数据调用db和echo json_encode(查询结果)</ b > </ p>
</ div>

展开原文

原文

make php file that connect to db and retrieve your given parameter from db, and after that call it from angular :

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);
    });
}
});

view file:
<div ng-controller="updateController" ng-app="myApp"> <div ng-repeat=item in resultData"> {{item.yourDbdata}} </div> </div>

your update php get posted data call db and echo json_encode(query result)




  1. 在php文件中写一个函数(比如retrieveData()),从数据库中检索数据。</ li>

  2. 在获取所需数据后的retrieveData()中,执行echo json_encode($ result); </ li>
  3. 在您的html中,您可以使用值为“编辑”的
    input类型按钮 和事件ng-click =“editUser()”</ p> </ li>

  4. 在你的js控制器中发送一个请求到retrieveData(),即</ p> </ li>
    </ ol>


    $ scope.editUser = function(){
    $ http({
    url:'path_to_function / retrieveData /',
    method:'POST',

    数据:“搜索=”+ $ scope.username </ strong>,
    标题:{'内容类型':'application / x-www-form-urlencoded'}
    })。成功 (函数(响应,状态,标题,配置){
    $ scope.result = response;

    });
    } </ p>
    </ blockquote>

    此处 $ scope.username可以是任何东西,例如编辑特定用户的记录,$ scope。 username将是该用户在数据库中获取的用户名。 \ N5。 必需的结果将在变量$ scope.result中的html上提供。</ p>
    </ div>

展开原文

原文

  1. Write a function (say retrieveData()) in php file, to retrieve data from database.
  2. In retrieveData() after getting required data, do echo json_encode($result);
  3. In your html you can have input type button with value="Edit" and event ng-click="editUser()"

  4. In your js controller send a request to retrieveData(), i.e

$scope.editUser = function() { $http({ url:'path_to_function/retrieveData/', method:'POST', data: "Search=" + $scope.username , headers:{'Content-Type': 'application/x-www-form-urlencoded'} }).success(function(response, status, headers, config){ $scope.result = response ;
}); }

Here $scope.username can be any thing, for example to edit record of particular user, $scope.username will be the username of that user to fetch in database. 5. Required result will be available on html in variable $scope.result.

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐