AJax技术

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

字号+ 作者:H5之家 来源:H5之家 2017-03-08 14:00 我要评论( )

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",

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>

<span>查看</span>

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

<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>查看</span>

<h1>

<table>

</table>

</h1>

</body>

</html>

效果如下

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • vue的ajax插件resource应用2

    vue的ajax插件resource应用2

    2017-03-09 09:08

  • ajaxUpload.js 25学堂

    ajaxUpload.js 25学堂

    2017-03-08 10:02

  • ASP.NET 3.5核心编程之AJAX Web Service的调用

    ASP.NET 3.5核心编程之AJAX Web Service的调用

    2017-03-07 18:00

  • Ajax+js实现异步交互,ajaxjs异步交互

    Ajax+js实现异步交互,ajaxjs异步交互

    2017-03-07 16:03

网友点评