angular.js - 关于angularjs post的问题

<!DOCTYPE html>
<html lang="en-us" ng-app="myApp">
    <head>
        <title>Document</title>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta charset="UTF-8">

        <!-- load bootstrap and fontawesome via CDN -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <style>
            html, body, input, select, textarea
            {
                font-size: 1.05em;
            }
        </style>
        
        <!-- load angular via CDN -->
       <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
        <script src="app.js"></script>
    </head>
    <body>

        <header>
            <nav class="navbar navbar-default">
            <p class="container">
                <p class="navbar-header">
                    <a class="navbar-brand" href="/">AngularJS</a>
                </p>

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
                </ul>
            </p>
            </nav>
        </header>

        <p class="container">

            <p ng-controller="mainController">
            
                <p>
                    <label>What is your twitter handle?</label>
                    <input type="text" ng-model="handle" />
                </p>
                
                <p class="alert" ng-class="{ 'alert-warning': handle.length < characters, 'alert-danger': handle.length > characters }" ng-if="handle.length !== characters">
                
                    <p ng-show="handle.length < characters">
                        You have less than 5 characters!
                    </p>
                    <p ng-show="handle.length > characters">
                        You have more than 5 characters!
                    </p>
                    
                </p>
                
                <hr />
                
                <h1>twitter.com/{{ lowercasehandle() }}</h1>
                
                <h3>Rules</h3>
                <ul>
                    <li ng-repeat="rule in rules">
                        {{ rule.RuleName }}
                    </li>
                </ul>

                Add rule: <input type="text" ng-model="newRule" /><a href="#" class="btn btn-default" ng-click="addRule()">Add</a>
                
            </p>
            
        </p>

    </body>
</html>

//app.js
var myApp = angular.module('myApp', []);

myApp.controller('mainController', ['$scope', '$filter','$http',function ($scope, $filter,$http) {

    $scope.handle = '';

    $scope.characters = 5;

    $scope.lowercasehandle = function () {
        return $filter('lowercase')($scope.handle);
    }

    $http.get('/angularjs/http/api.json')

         .success(function(result){
            $scope.rules = result;
         })

         .error(function (data,status) {
             
             console.log(data);
         })

    $scope.newRule = '';

       $scope.addRule = function () {
        $http.post('/angularjs/http/api', { newRule: $scope.newRule })
            .success(function (result) {

                console.log(result);
                $scope.rules = result;
                $scope.newRule = '';

            })
            .error(function (data, status) {

                console.log(data);

            });
    };
}]);

//api.json
[
    {
    "ID":1,
    "RuleName":"Must be 5 characters"
     },{
    "ID":2,
    "RuleName":"Must be 5 characters"
     },{
    "ID":3,
    "RuleName":"Must be 5 characters"
     }
]

能get到数据，但是post的时候没有更新json数据，和Accept:application/json, text/plain, */* 这个有关吗？该怎么解决。。

伊谢尔伦2744 天前506

angular.js - 关于angularjs post的问题

全部回复(2)我来回复