Question

我编写了一个代码，可以让我发布一个输入值（使用AngularJS 1.3.5 $ http.post）并将其保存到数据库中，然后将其显示在我的html页面中。要在单击保存后获取新输入值，我必须刷新页面以显示它。我必须找到一个不使用php和jQuery的解决方案。我看到了答案Here：从$ http.post更改为$ xhr.post不可能是由我使用的angularJs版本引起的。我该怎么办？

<form ng-submit="save()">
  <input ng-model="stack"></input>
  <button type="submit">Save</button>
<p>{{stack}}</p> 
</form>
$scope.save = function(url, data1) {
            /* post to server */
            $http({
                url : url,
                data : {
                    "stack" : data1
                },
                method : "POST",
                headers : {
                    'Content-Type' : 'application/json'
                }
            }).success(function(data, status, headers, config) {
                $scope.stack = data.stack;
            }).error(function(data, status, headers, config) {
                $scope.status = status + ' ' + headers;
            });

        };

请注意，我在后端显示html页面中的输入值。

Answer 1

将get调用绑定到函数内并在同一个控制器内调用该函数，这将更新数据而不刷新。

  $scope.getData = function() {
        $http({
            method : 'GET',
            url : '/getData'         //any url
        }).then(function(response) {
            //success code

        })
    }
    $scope.getData();

Answer 2

第1步：让您的请求返回新数据

第2步：使用该数据替换旧数据

由于您没有提供有关结构如何的大量信息，因此我会尝试尽可能通用。假设您正在更新产品并获取新价格：

$scope.product = {
    name: 'Pop Rocks',
    price: 1.99 // can be changed from an input with `ngModel` or something
};

$scope.save = function() {
    // post new price
    $http.post('/api/products', $scope.product).then(function(response) {
        // response.data contains the JSON object for he product,
        // with new price/name/etc
        product = JSON.parse(response.data) // parse it into an object
        $scope.product = product // replace old $scope.product with new product
    });
}

$scope.doublePrice = function() {
    // using this will update the new price immediately -in the view-,
    // just to show you how binding works. It will not update DB
    $scope.product.price *= 2;
}

假设您的观点与此类似：

<strong>Price:</strong> {{ product.price | currency:"$" }}

您的更改应该反映出双向绑定！

如何在不刷新网页的情况下显示db中保存的输入值？

2 个答案: