【问题标题】:How to Update/Edit data in database with AngularJS如何使用 AngularJS 更新/编辑数据库中的数据
【发布时间】:2016-05-22 06:55:27
【问题描述】:

在网络应用程序上工作,我刚刚添加了以下更新代码,但它不起作用。 以下所有代码的摘要是:

  • 单击一个名为update 的按钮
  • 它会显示应包含单击/当前产品值的 FORM。
  • 现在,当我以这种形式点击保存时,它应该会更新数据库,但事实并非如此。
  • 我在 PHP 文件 (update.php) 中使用$_GET 获取当前产品ID。然后通过该ID 获取该产品的所有数据。

PS:控制台没有错误。

更新代码:

<?php 
    include "includes/connection.php";
    switch($_GET['action']) {
        case 'update_entry' :
            $data = json_decode(file_get_contents("php://input"));
            $index = $data->id; 
            $productname = $data->pname;
            $company = $data->company;
            $price = $data->price;
            $quantity = $data->quantity;
            if(isset($productname) && !empty($productname) && isset($company) && !empty($company) && isset($price) && !empty($price) && isset($quantity) && !empty($quantity)){
                $query = "UPDATE `product` SET `id`='$index',`name`='$productname',`company`='$company',`price`='$price',`quantity`='$quantity' WHERE id= $index";

                if(mysqli_query($con, $query)) {
                  return true;
                } else {
                  echo "Error: " . $sql . "<br />" . mysqli_error($con);
                }
                break;
            }   
    }
?>

控制器

myApp.controller("updateCtrl",['$scope','$http','$routeParams','$location',function($scope,$http,$routeParams,$location){
    $scope.update = function(){
         var currentId = $routeParams.id;
         $http.post("update.php?action=update_entry",{'id':currentId})
             .then(function(data){
                $location.path('/viewproduct');
         });
    }
}]);

HTML:

<form style="padding:10px" ng-controller="updateCtrl">
    <div class="form-group">
        <label for="ProductName">Product Name</label>
        <input type="text" class="form-control" placeholder="{{product.name}}" ng-model="productname" required>
    </div>
    <div class="form-group">
        <label for="company">Company </label>
        <input type="text" class="form-control" placeholder="{{product.company}}" ng-model="company" required>
    </div>
    <div class="form-group">
        <label for="company">Price </label>
        <input type="text" class="form-control" placeholder="{{product.price}}" ng-model="price" required>
    </div>
    <div class="form-group">
        <label for="company">Quantity </label>
        <input type="text" class="form-control" placeholder="{{product.quantity}}" ng-model="quantity" required>
    </div>
    <button type="submit" class="btn btn-default" ng-click="update()">Save updated data</button>
    <a href="#/viewproduct" class="btn btn-danger">Cancel</a>
    <h1 ng-if="successMessage == 0">Great Data is Updated!</h1>
</form>

更新按钮:

<td ng-controller="updateCtrl"><a class="btn btn-primary" href="#/updateproduct/action={{product.id}}" >Update</a></td>     

【问题讨论】:

  • 你能看到你的php中的数据吗?我不是 PHP 专家,但是您在 Angular 中发布数据并想在 PHP 中获取它,也许可以尝试使用 $_POST。此外,您的控制器没有看起来也很奇怪的模型对象。
  • @FKutsche $_GET 用于从 URL 获取数据,因此我正在获取该特定(当前或点击的)ID,并通过该 ID 获取点击产品的数据。$_POST 用于将数据发布到某物.php .
  • 您的控制器仍在使用$http.post 而不是$http.get
  • @apex-meme-lord 我将数据发布到 update.php 没有收到。
  • 如果您的客户端发送一个 post 请求,PHP 会将其保存在 $_POST 中。您也可以使用$_REQUEST,但如果出现键冲突,它将覆盖获取参数(查询字符串)。

标签: javascript php angularjs


【解决方案1】:

如下所示

你的视图部分

<form style="padding:10px" ng-controller="updateCtrl">
    <div class="form-group">
        <label for="ProductName">Product Name</label>
        <input type="text" class="form-control" placeholder="{{product.name}}" ng-model="productname" required>
    </div>
    <div class="form-group">
        <label for="company">Company </label>
        <input type="text" class="form-control" placeholder="{{product.company}}" ng-model="company" required>
    </div>
    <div class="form-group">
        <label for="company">Price </label>
        <input type="text" class="form-control" placeholder="{{product.price}}" ng-model="price" required>
    </div>
    <div class="form-group">
        <label for="company">Quantity </label>
        <input type="text" class="form-control" placeholder="{{product.quantity}}" ng-model="quantity" required>
    </div>
    <button type="submit" class="btn btn-default" ng-click="update()">Save updated data</button>
    <a href="#/viewproduct" class="btn btn-danger">Cancel</a>
    <h1 ng-if="successMessage == 0">Great Data is Updated!</h1>
</form>
<td><a class="btn btn-primary" ng-click="addProductData();" >Update</a></td> 

在你的控制器内部做如下操作

$scope.addProductData=function(){
   var updatedata=$.param({'action':'update','productname':$scope.productname,'company':$scope.company,'price':$scope.price,'quantity':$scope.quantity,'id':currentId});
    $http({
            method:'POST',
            url:'update.php',
            data:updatedata,
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
        }).then(function successCallback(response){
            alert(response.data['msg']);
        },function errorCallback(response) {
            alert(response.data['msg']);
        });
}

您的update.php 文件应如下所示。

<?php
include "includes/connection.php";
$result=array();
if(isset($_REQUEST["action"]) && $_REQUEST["action"] !=""){
   if($_REQUEST["action"]=="update"){
       $productname = $_POST['productname'];
       $company = $_POST['company'];
      $price = $_POST['price'];
       $quantity = $_POST['quantity'];
     $id=$_POST['id'];

     $query = "UPDATE `product` SET `name`='$productname',`company`='$company',`price`='$price',`quantity`='$quantity' WHERE id= $id";
   if(mysqli_query($con, $query)) {
    $result['msg']="updated successfully";
}else{
   header("HTTP/1.0 401 Unauthorized");
   $result['msg']="unable to updated";
}
echo json_encode($result);

}
}

?>

我认为您可能有基本的想法。现在您可以按照自己的方式实施。

【讨论】:

    【解决方案2】:

    尝试使用ng-model="{{product.name}}}",而不是 HTML 中的占位符。 并在您的控制器中传递该模型:

    $http.post("update.php?action=update_entry",$scope.product)
    

    那么你应该在你的 PHP 中获取一些数据。

    【讨论】:

    • 如果您使用 $http.post 传递数据,那么您应该得到 $scope.product 中的内容。并将产品添加到您的 ng-model 而不是占位符是它应该在的位置。如果你 console.log($scope.product);在http请求之前,您可以查看那里是否有任何数据。
    • 哦,在表单上使用 ng-submit="update()" 而不是在按钮上使用它。
    • 为什么不在占位符中我希望用户查看他想要编辑的数据。请你解释一下 $scope.product 将包含什么?
    • 当您在 html 中将产品对象与 ng-model 连接时,您可以通过从控制器访问 $scope.product 来获取这些值。
    • 该解决方案运行良好。你想让我教你为什么你必须使用 ng-model 和 $scope 还是你想让我做一个例子让你尝试?.. 并且感谢你在有人实际尝试帮助时投反对票。
    【解决方案3】:

    您是否单独检查过您的 php,以确保您可以使用没有 angular 的 php 获取和更新数据?我会使用 post 因为它对检索和更新数据更友好。

    我还将您对 php 端点的调用分离为服务(工厂)。我也会将整个对象传回来,以确保您不会遗漏任何东西,除非您担心带宽。

    我会先对 php 进行单元测试。然后以角度分离逻辑。然后 b 在调试中单步执行以查看从视图传递的内容。

    【讨论】:

      【解决方案4】:

      我认为您应该检查一下:https://github.com/eliarms/CustomerManagerApp
      这是一个使用 Angularjs 和 PHP 的简单客户管理应用程序。该应用程序的目标是突出 AngularJS 提供的许多不同功能,并演示如何将它们一起使用。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2019-03-10
        • 1970-01-01
        • 1970-01-01
        • 2016-12-29
        • 1970-01-01
        • 1970-01-01
        • 2013-12-17
        • 1970-01-01
        相关资源
        最近更新 更多