首页 > 技术文章 > Ajax传输对象,集合或数组。

hq233 2017-03-01 22:16 原文

传输单个对象时:

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>

效果如下

 

推荐阅读