Javascript 在AngularJS中动态更新数据

我有两个终点

（职位）

关键是：-fname、lname和age。我们可以通过向此URL发送POST请求来提交表单

（得到）

它将以JSON格式从数据库返回现有数据

[
    {
        "_id": "5b48a137c3b2a3454b853a3c",
        "fname": "John",
        "lname": "Jose",
        "age": "28",
        "__v": 0
    },
    {
        "_id": "5b506cc7d9105012f59c87e6",
        "fname": "Alex",
        "lname": "Cruz",
        "age": "27",
        "__v": 0
    }
]

我可以成功提交表格。在我的HTML中，我还有一个表。每当我提交条目而不重新加载整个页面时，我希望更新表中的数据

实际上，这个API中的数据是动态的，有时我会直接插入数据库。因此，无论何时发生更改，都应该反映在表中，而不必重新加载整个页面

我使用的是AngularJS 1

index.html：-

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">


<div ng-app="myApp">
  <div class="container">

    <div class="row">
      <div class="col-sm-12">
        <h3>
          Dashboard
        </h3>
      </div>
    </div> 

    <form name="saveTemplateData" action="#" ng-controller="FormCtrl"  ng-submit="submitForm()" >
      <div class="col-sm-12">
        <div class="form-group">
          <label>FirstName</label>
          <input type="text" class="form-control" value="" ng-model="form.fname" />
        </div>
        <div class="form-group">
          <label>LastName</label>
          <input type="text" class="form-control" value="" ng-model="form.lname" />
        </div>
        <div class="form-group"> 
          <label>Age</label>
          <input type="text" class="form-control" value="" ng-model="form.age" />
        </div>
      </div>
      <div class="col-sm-12">
        <input type="submit" class="btn btn-success" ngClick="Submit">
      </div>
    </form> 


    <!-- Table Start -->

    <div class="row">
      <table style="width:100%">
        <tr>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Age</th>
        </tr>
        <tr>
          <!-- item.fname -->
          <td>{{item.fname}}</td>
          <!-- item.lname -->
          <td>{{item.lname}}</td>
          <!-- item.age -->
          <td>{{item.age}}</td>
        </tr>
      </table>
    </div>
    <!-- Table END -->

  </div>
</div>

---

如果我理解你的问题，你需要做很多事情来解决你的问题

首先，您需要对控制器进行一些扩展。主要是从API获取数据：

app.controller('FormCtrl', function ($scope, $http, $interval) {

/*
Add this method to get data from server
*/
$scope.fetchData = function() {

    // It is best practice to handle error responses as well (not 
    // shown here)
    $http.get('http://localhost:3000/entries').then(function(response) {

        // Set the data items in your scope. Doing this should now 
        // cause them to be listed in your view
        $scope.items = response.data;
 });

}

$scope.submitForm = function($event) {

    // Adding this prevents the browser from reloading on form submit
    $event.preventDefault()

    $http({
            url: "http://localhost:3000/entry",
            method: "POST",
            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
            data: $.param($scope.form)
        }).then(function (response) {
            $scope.status = status;
        }), function (error) {
            $scope.status = status;
    });
}

// Fetch data once controller is set up, on a regular 2 second 
// interval
$interval(function() {
   $scope.fetchData()
}, 2000)
});

您还需要更新HTML/视图：

<!-- Add $event as an argument to you ng-submit callback -->
ng-submit="submitForm($event)"

ng submit=“submitForm（$event）”

以及：

{{item.fname}
{{item.lname}
{{item.age}

---

最后，最重要的是使用

FormCtrl

控制器包装表格和表单。可以通过将

ng controller=“FormCtrl”

从

元素移动到视图中的

元素来完成此操作。

使用AJAX调用。这是为了满足您的需要，即在不重新加载的情况下更新网页（或其某些部分），这很好。请检查。首先，确保防止提交按钮的默认行为。它给出错误：-无法读取未定义的属性“preventDefault”。表中的数据也没有显示，所以我不需要通过表单更新数据。我将从数据库本身执行所需的更新。因此，只要JSON中有更改，它就应该反映在表中。请参阅关于默认问题的更新。您的意思是希望应用程序定期从服务器重新获取数据，以反映数据库中存储的数据中的更改吗？preventDefault错误不会出现。但是数据没有显示在表中。好吧，我没有从你最初的问题中领会到这一点。请参见控制器顶部和底部添加的

$interval

，以实现以（2秒）间隔自动提取

<!-- Add $event as an argument to you ng-submit callback -->
ng-submit="submitForm($event)"

<!-- Doing this causes the data in the items array to be iterated
     and displayed in a list-wise fashion in the table -->
<tr ng-repeat="item in items">
    <!-- item.fname -->
    <td>{{item.fname}}</td>
    <!-- item.lname -->
    <td>{{item.lname}}</td>
    <!-- item.age -->
    <td>{{item.age}}
    </td> 
</tr>