zoukankan      html  css  js  c++  java
  • AJAX通过XML获取对象和数组的属性

    model层

    public class Dog {
        private String name;
        private int age;
        private String owner;
        
        public String getName() {
            return name;
        }
        public void setName(String name) {
            this.name = name;
        }
        public int getAge() {
            return age;
        }
        public void setAge(int age) {
            this.age = age;
        }
        public String getOwner() {
            return owner;
        }
        public void setOwner(String owner) {
            this.owner = owner;
        }
    }

    实例1:获取对象的属性

    controller层

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            request.setCharacterEncoding("utf-8");
            response.setCharacterEncoding("utf-8");
            //模拟从数据库查询
            Dog d = new Dog();
            d.setName("erha");
            d.setAge(1);
            d.setOwner("zhang");
            //打成XML往回传
            response.getWriter().append("<?xml version='1.0'?>");
            response.getWriter().append("<dog>");
            response.getWriter().append("<name>"+d.getName()+"</name>");
            response.getWriter().append("<age>"+d.getAge()+"</age>");
            response.getWriter().append("<owner>"+d.getOwner()+"</owner>");
            response.getWriter().append("</dog>");
            
        }

    view层

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#ss").click(function(){
            $.ajax({
                url:"testobject",
                data:{},
                type:"post",
                dataType:"xml",
                success:function(httpdata){
                    //解析返回来的httpdata
                    var n = $(httpdata).find("name").text();
                    var a = $(httpdata).find("age").text();
                    var o = $(httpdata).find("owner").text();
                    //把数据显示在页面的元素上#hh
                    $("#hh").append("<li>"+n+"</li>");
                    $("#hh").append("<li>"+a+"</li>");
                    $("#hh").append("<li>"+o+"</li>");
                }
            });
        });
    });
    </script>
    </head>
    <body>
    <span id="ss">获取对象</span>
    <ul id="hh">
    </ul>
    </body>
    </html>

    实例2:获取数组元素的属性

    controller

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            request.setCharacterEncoding("utf-8");
            response.setCharacterEncoding("utf-8");
            //模拟从数据库查询
            Dog d1 = new Dog();
            d1.setName("ha");
            d1.setAge(1);
            d1.setOwner("ha");
            Dog d2 = new Dog();
            d2.setName("jin");
            d2.setAge(2);
            d2.setOwner("jin");
            Dog d3 = new Dog();
            d3.setName("luo");
            d3.setAge(3);
            d3.setOwner("luo");
            
            ArrayList<Dog> list = new ArrayList<Dog>();
            list.add(d1);
            list.add(d2);
            list.add(d3);
            
            response.getWriter().append("<?xml version='1.0'?>");
            response.getWriter().append("<pet>");
            for(Dog d:list){
                response.getWriter().append("<dog>");
                response.getWriter().append("<name>"+d.getName()+"</name>");
                response.getWriter().append("<age>"+d.getAge()+"</age>");
                response.getWriter().append("<owner>"+d.getOwner()+"</owner>");
                response.getWriter().append("</dog>");
            }
            response.getWriter().append("</pet>");
        }

    view

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#ss").click(function(){
            $.ajax({
                url:"testlist",
                data:{},
                type:"post",
                dataType:"xml",
                success:function(httpdata){
                    var dogs = $(httpdata).find("dog");//数组
                    var tb = $("#tb");
                    for(var i=0;i<dogs.length;i++) {
                        var n = $(dogs).eq(i).find("name").text();
                        var a = $(dogs).eq(i).find("age").text();
                        var o = $(dogs).eq(i).find("owner").text();
                        
                        var tr = "<tr>";
                        tr += "<td>"+n+"</td>";
                        tr += "<td>"+a+"</td>";
                        tr += "<td>"+o+"</td>";
                        tr += "</tr>";
                        
                        $(tb).append(tr);
                    }
                }
            });
        });
    });
    </script>
    </head>
    <body>
    <span id="ss">获取列表</span>
    <table id="tb" width=100% cellpadding="5" cellspacing='1' >
    </table>
    </body>
    </html>

    实例3:获取数组元素的属性(xml标签内包含属性标签)

    controller

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            //模拟从数据库查询
                    Dog d1 = new Dog();
                    d1.setName("ha");
                    d1.setAge(1);
                    d1.setOwner("ha");
                    Dog d2 = new Dog();
                    d2.setName("jin");
                    d2.setAge(2);
                    d2.setOwner("jin");
                    Dog d3 = new Dog();
                    d3.setName("luo");
                    d3.setAge(3);
                    d3.setOwner("luo");
                    
                    ArrayList<Dog> list = new ArrayList<Dog>();
                    list.add(d1);
                    list.add(d2);
                    list.add(d3);
                    
                    response.getWriter().append("<?xml version='1.0'?>");
                    response.getWriter().append("<pet>");
                    for(Dog d:list){
                        response.getWriter().append("<dog name='"+d.getName()+"'>");//<dog name=?>                    
                        response.getWriter().append("<age>"+d.getAge()+"</age>");
                        response.getWriter().append("<owner>"+d.getOwner()+"</owner>");
                        response.getWriter().append("</dog>");
                    }
                    response.getWriter().append("</pet>");
        }

    view

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#ss").click(function(){
            $.ajax({
                url:"testlist2",
                data:{},
                type:"post",
                dataType:"xml",
                success:function(httpdata){
                    var dogs = $(httpdata).find("dog");//数组
                    var tb = $("#tb");
                    for(var i=0;i<dogs.length;i++){
                        var n = $(dogs).eq(i).attr("name");//从同一级标签查找用attr
                        var a = $(dogs).eq(i).find("age").text();
                        var o = $(dogs).eq(i).find("owner").text();
                        
                        var tr = "<tr>";
                        tr += "<td>"+n+"</td>";
                        tr += "<td>"+a+"</td>";
                        tr += "<td>"+o+"</td>";
                        tr += "</tr>";
                        
                        $(tb).append(tr);
                    }
                }
                
            });
        });
    });
    </script>
    
    </head>
    <body>
    <span id="ss">获取列表</span>
    <table id="tb" width=100% cellpadding="5" cellspacing="1">
    </table>
    </body>
    </html>
  • 相关阅读:
    python3.x:No matching distribution found for PIL
    类似No module named 'bs4'等错误的解决方法
    微信小程序(一)
    Eclipse (eclipse-jee-luna-SR2-win32)4.4.2 , jdk1.7, pydev 4.5.5版本的 完成的python环境集成
    C#学习笔记(12)——三种方法操作XML
    WPF学习笔记(3)——style
    ASP.NET学习笔记(2)——用户增删改查
    jquery加载页面的方法(页面加载完成就执行)
    ASP.NET学习笔记(1)——VS自动引入命名空间快捷键
    临时2017-6-19 00:02:03
  • 原文地址:https://www.cnblogs.com/jonsnow/p/6485361.html
Copyright © 2011-2022 走看看