• Ajax传输对象,集合或数组。


    传输单个对象时:

    servlet页面

    package com.itnba.maya.a;
    
    import java.io.IOException;
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    /**
     * Servlet implementation class A
     */
    @WebServlet("/A")
    public class A extends HttpServlet {
        private static final long serialVersionUID = 1L;
           
        /**
         * @see HttpServlet#HttpServlet()
         */
        public A() {
            super();
            // TODO Auto-generated constructor stub
        }
    
        /**
         * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
         */
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            request.setCharacterEncoding("utf-8");
            response.setCharacterEncoding("utf-8");
            //模拟从数据库查出
            Dog a=new Dog();
            a.setName("小黄");
            a.setAge(5);
            a.setZl("哈士奇");
            
            //放到XML文件中
            response.getWriter().append("<?xml version="1.0" encoding="UTF-8"?>");
            response.getWriter().append("<gen>");
            response.getWriter().append("<name>"+ a.getName()+"</name>");
            response.getWriter().append("<age>"+ a.getAge()+"</age>");
            response.getWriter().append("<zl>"+ a.getZl()+"</zl>");
            response.getWriter().append("</gen>");
        }
    
        /**
         * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
         */
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            // TODO Auto-generated method stub
            doGet(request, response);
        }
    
    }

    jsp页面中

    <%@ 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-1.11.1.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#k").click(function(){
            $.ajax({
                url:"A",//跳转的servlet
                data:{},//key:要传输的数据
                type:"POST",
                dataType:"xml",
                success:function(httpdata){
                    /* 解析XML中的数据 */
                    var n=$(httpdata).find("name").text()
                    var a=$(httpdata).find("age").text()
                    var z=$(httpdata).find("zl").text()
                    
                    $("#x").append("<li>"+n+"</li>");
                    $("#x").append("<li>"+a+"</li>");
                    $("#x").append("<li>"+z+"</li>");
                }
            })
        });
    });
    </script>
    </head>
    <body>
    <span id="k">查看</span>
    <h1>
    <ul id="x">
    </ul>
    </h1>
    </body>
    </html>

    效果如下

    传输集合或者数组时

    servlet页面

    package com.itnba.maya.a;
    
    import java.io.IOException;
    import java.util.ArrayList;
    
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    /**
     * Servlet implementation class B
     */
    @WebServlet("/B")
    public class B extends HttpServlet {
        private static final long serialVersionUID = 1L;
           
        /**
         * @see HttpServlet#HttpServlet()
         */
        public B() {
            super();
            // TODO Auto-generated constructor stub
        }
    
        /**
         * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
         */
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            request.setCharacterEncoding("utf-8");
            response.setCharacterEncoding("utf-8");
            //模拟从数据库中查出
            Dog a1=new Dog();
            a1.setName("小黄");
            a1.setAge(5);
            a1.setZl("哈士奇");
            
            Dog a2=new Dog();
            a2.setName("中黄");
            a2.setAge(6);
            a2.setZl("泰迪");
            
            Dog a3=new Dog();
            a3.setName("大黄");
            a3.setAge(7);
            a3.setZl("京巴");
            
            ArrayList<Dog> list=new ArrayList<Dog>();
            list.add(a1);
            list.add(a2);
            list.add(a3);
            //放到XML文件中
            response.getWriter().append("<?xml version='1.0'?>");
            response.getWriter().append("<gen>");
            for(Dog d :list){
                response.getWriter().append("<dog name='"+d.getName()+"'>");
                //response.getWriter().append("<name>"+d.getName()+"</name>");
                response.getWriter().append("<age>"+d.getAge()+"</age>");
                response.getWriter().append("<zl>"+d.getZl()+"</zl>");
                response.getWriter().append("</dog>");
            }
            response.getWriter().append("</gen>");
        }
    
        /**
         * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
         */
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            // TODO Auto-generated method stub
            doGet(request, response);
        }
    
    }

    jsp页面

    <%@ 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-1.11.1.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#k").click(function(){
            $.ajax({
                url:"B",
                data:{},
                type:"POST",
                dataType:"xml",
                success:function(httpdata){
                    var d=$(httpdata).find("dog");/* 返回的是个数组 */
                    for(var i=0;i<d.length;i++){
                        var n=$(d).eq(i).attr("name");
                        var a=$(d).eq(i).find("age").text();
                        var z=$(d).eq(i).find("zl").text();
                        var tr="<tr>"
                        tr+="<td>"+n+"</td>"
                        tr+="<td>"+a+"</td>"
                        tr+="<td>"+z+"</td>"
                        tr +="</tr>"
                        $("#x").append(tr)
                    }
                }
            });
        });
    });
    </script>
    </head>
    <body>
    <span id="k">查看</span>
    <h1>
    <table width="100%" id="x">
    </table>
    </h1>
    </body>
    </html>

    效果如下

  • 相关阅读:
    测试计划设计
    测试方案
    使用gulp构建自动化工作流
    ESLint--定制你的代码规则
    Node.js学习笔记(一):快速开始
    React-Native性能优化点
    ES6笔记(一):ES6所改良的javascript“缺陷”
    windows下React-native 环境搭建
    使用ssh连接gitHub
    javascript中的prototype和constructor
  • 原文地址:https://www.cnblogs.com/hq233/p/6486634.html
Copyright © 2020-2023  润新知