簡單的使用AngularJS的解析JSON

本文轉載自查看原文 2015-01-18 13:31 1993

　　　　使用AngularJS+Struts2進行前后台的數據交互與顯示。

　　struts.xml

　　　　配置文件需要將設置extends="json-default" type="json"

 <package name="default" namespace="/" extends="json-default">
        <action name="ajax" class="com.Yiran583.action.ajacAction">
            <result type="json"/>
        </action>
 </package>

　　后台代碼：

　　　　將需要作為JSON數據傳遞給前台的屬性設置相應的getter/setter方法

    private List<Person> list = new ArrayList<Person>();
    private Person person;

    @Override
    public String execute() throws Exception {
        // TODO Auto-generated method stub

        Person person = new Person("Yiran", 20);
        Person person1 = new Person("Jiao", 22);
        Person person2 = new Person("Zhangsan", 18);

        list.add(person1);
        list.add(person2);

        list = JSONArray.fromObject(list);

        return SUCCESS;
    }

    public List<Person> getList() {
        return list;
    }

    public void setList(List<Person> list) {
        this.list = list;
    }

　　前台：

　　　　ng-repeat 循環顯示

　　　　x.name,x.age 分別是JSON對象中的屬性

　　　　$scope.name = a.list; 將list對象返回的結果綁定到name上

<body ng-app>
    <span id="btn" style="cursor: pointer; font-size: 20px">action</span>
    <div id="rdiv" ng-controller="myCC">
        要顯示數據的區域
        <li ng-repeat="x in names">
            {{x.name+" "+x.age}}
        </li>
    </div>

    <script type="text/javascript">
        function myCC($scope, $http) {
            var url = "ajax.action";
            $http.get(url).success(function(a) {
                $scope.names = a.list;
            });
        }
    </script>
</body>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Java中JSON的簡單使用與前端解析 JSON解析工具——Jackson的簡單使用 JSON的簡單使用_解析前台傳來的JSON數據 angularjs ngRoute的使用簡單例子使用Gson 解析json 使用XMLHttpRequest解析json 使用cJSON解析JSON 使用golang解析json 使用Gson解析json JSON 解析（二）—— Jackson的使用