Question

我已成功将数据插入到数据库表中，现在我想在前视图中显示它，即在我的html表格中，只要我输入一个条目，我的表格也会立即更新！

这是我正在使用的HTML：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js">        </script>
    <script type="text/javascript" src="js/form.js"></script>

</head>
<body style="font:17px Consolas;" ng-app="myApp">
    <div class="container">
        <div class="row">
            <div class="span4 offset1 main-entry" ng-controller="priceController">
                <fieldset>
                  <legend>Add new entry</legend>

                  <label>Tea Total:</label>
                  <input type="text" ng-model="teaPrice" id="book-name"><br><br>

                  <label>Snacks Total:</label>
                  <input type="text" ng-model="snacksPrice" id="book-price"><br><br>

                  <button class="btn btn-large btn-success" ng-click="insertdata()">Submit</button>
                </fieldset>
            </div>
        </div>
    </div><br><br>

    <div class="table-show">
        <table style="border: 2px solid #111">
            <tr>
                <th>Tea Total</th>
                <th>Snacks Total</th>
            </tr>
            <tr>
                <td>Hii</td>
                <td>hi</td>
            </tr>
            <tr>
                <td>hi</td>
                <td>hi</td>
            </tr>
        </table>
    </div>

</body>
</html>

这是我的main.js文件，其中还包含角度js，因为我有angularjs来获取值：

var app = angular.module('myApp', []);
        app.controller('priceController', function($scope, $http){
            $scope.insertdata = function() {
                $http.post('insert.php',{'teaPrice' : $scope.teaPrice, 'snacksPrice' : $scope.snacksPrice})
                .success(function(data, status, headers, config){
                    console.log(data);
                    console.log("data inserted successfully");
                });
            }
        });

最后是我的insert.php，它在数据库中插入值：

<?php

    $conn = mysqli_connect("localhost", "root", "", "trial");

    $data = json_decode(file_get_contents("php://input"));
    echo $data ->teaPrice;
    echo $data ->snacksPrice;
    $teaPrice = mysqli_real_escape_string($conn, $data ->teaPrice);
    $snacksPrice = mysqli_real_escape_string($conn, $data ->snacksPrice);
    $details = mysqli_query($conn, "INSERT INTO `try` (`teaPrice`, `snacksPrice`) VALUES ('".$teaPrice."', '".$snacksPrice."')");
    $a = 0;
    if($details > 0){
        $a = 1;

    }

?>

Answer 1

是的，您必须循环数据并使用ng-repeat将其绑定在td上。假设您在getData（）方法中得到$scope.priceDetails = data的响应，这将是一个get调用。

然后你可以这样做 -

   <table style="border: 2px solid #111">
        <tr>
            <th>Tea Total</th>
            <th>Snacks Total</th>
        </tr>
        <tr ng-repeat = "item in priceDetails">
            <td>{{item.teaTotal}}</td>
            <td>{{item.snacksTotal}</td>
        </tr>
      </table>

以上命名属性符合我的假设。您可以创建自己的响应，只需使用ng-repeat绑定表格中的详细信息。

如何使用php提交后立即在表中更新数据？

1 个答案: