Ajax传输对象，集合或数组。_H5之家 - 中国HTML5教程资源分享第一站

传输单个对象时：

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>

<title>Insert title here</title>

$(document).ready(function(){

$("#k").click(function(){

$.ajax({

url:"A",

data:{},

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>

<h1>

<ul>

</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>");

//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>

<title>Insert title here</title>

$(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)

}

});