利用ajax实现数据传输
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
传递对象时，可以分为传输单个对象或者值，还有传递数组或集合。
首先新建一个数据层：
package com.bean;
public class Dog {
private String name;
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 getCategory() {
return category;
}
public void setCategory(String category) {
this.category = category;
}
private int age;
private String category;
}
新建一个servlet进行页面功能实现：
package com.servlet; 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; import com.bean.Dog; /**
* Servlet implementation class Testajax1
*/
@WebServlet("/testajax1")
public class Testajax1 extends HttpServlet {
private static final long serialVersionUID = 1L; /**
* @see HttpServlet#HttpServlet()
*/
public Testajax1() {
super();
// TODO Auto-generated constructor stub
} /**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
//response.getWriter().append("Served at: ").append(request.getContextPath());
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
Dog d = new Dog();
d.setName("小白");
d.setAge(3);
d.setCategory("土狗"); response.getWriter().append("<?xml version='1.0'?>");
response.getWriter().append("<pet>");
response.getWriter().append("<name>"+d.getName()+"</name>");
response.getWriter().append("<name>"+d.getAge()+"</name>");
response.getWriter().append("<name>"+d.getCategory()+"</name>");
response.getWriter().append("</pet>"); } /**
* @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页面实现ajax：
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!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=ISO-8859-1">
<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(){
$("#d1").click(function(){
$.ajax({
url:"testajax1",
data:{},
type:"POST",
dataType:"XML",
success:function(httpdata){
var n = $(httpdata).find("name").text();
var a = $(httpdata).find("age").text();
var c = $(httpdata).find("category").text(); $("#d2").append("<p>"+n+"</p>");
$("#d2").append("<p>"+a+"</p>");
$("#d2").append("<p>"+c+"</p>");
}
});
}); }); </script>
</head>
<body>
<div id="d1">aaaa</div>
<div id="d2"></div>
</body>
</html>
效果如下：
取数组或集合时：
package com.servlet; 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; import com.bean.Dog; /**
* Servlet implementation class Testajax2
*/
@WebServlet("/testajax2")
public class Testajax2 extends HttpServlet {
private static final long serialVersionUID = 1L; /**
* @see HttpServlet#HttpServlet()
*/
public Testajax2() {
super();
// TODO Auto-generated constructor stub
} /**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
//response.getWriter().append("Served at: ").append(request.getContextPath());
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
Dog d1 = new Dog();
d1.setName("狗1");
d1.setAge(1);
d1.setCategory("品种1");
Dog d2 = new Dog();
d2.setName("狗2");
d2.setAge(2);
d2.setCategory("品种2");
Dog d3 = new Dog();
d3.setName("狗3");
d3.setAge(3);
d3.setCategory("品种3"); 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()+"'>"); response.getWriter().append("<age>"+d.getAge()+"</age>");
response.getWriter().append("<category>"+d.getCategory()+"</category>");
response.getWriter().append("</dog>");
} response.getWriter().append("</pet>"); } /**
* @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);
} }
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!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=ISO-8859-1">
<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(){
$("#d1").click(function(){ $.ajax({
url:"testajax2",
data:{},
type:"POST",
dataType:"XML",
success:function(httpdata){
var dogs = $(httpdata).find("dog");
for(var i=0;i<dogs.length;i++){
var n =$(dogs).eq(i).attr("name");
var a =$(dogs).eq(i).find("age").text();
var c =$(dogs).eq(i).find("category").text(); var tr ="<tr>";
tr+="<td>"+n+"</td>";
tr+="<td>"+a+"</td>";
tr+="<td>"+c+"</td>";
tr+="</tr>";
$("#tb").append(tr);
} }
});
});
});
</script>
</head>
<body>
<div id="d1">11111</div>
<table id="tb" width="100%" cellpadding="5" cellspacing='1' border="0">
</table>
</body>
</html>
效果如下：
利用ajax实现数据传输的更多相关文章
- nodejs利用ajax实现网页无刷新上传图片
nodejs利用ajax实现网页无刷新上传图片 标签(空格分隔): nodejs 通常情况下上传图片是要通过提交form表单来实现的,但是这又不可避免的产生了网页转. 利用ajax技术和FormDat ...
- asp.net mvc3 利用Ajax实现局部刷新
1.利用Ajax.ActionLink()方法 首先在_Layout.cshtml文件中加载 运行AJAX必要的Jquery <script src="@Url.Content(&qu ...
- [前端引用] 利用ajax实现类似php include require 等命令的功能
利用ajax实现类似php中的include.require等命令的功能 最新文件下载: https://github.com/myfancy/ajaxInclude 建议去这里阅读readme-2. ...
- 利用Ajax把前端的数据封装成JSON格式发送到服务器端并写成XML格式在服务器的硬盘上
1.首先要在前端把要发送的东西(这里是一个实例化的car对象)都准备好,利用Ajax发送到服务器端,代码如下: <html xmlns="http://www.w3.org/1999/ ...
- Jquery利用ajax调用asp.net webservice的各种数据类型(总结篇)
原文:Jquery利用ajax调用asp.net webservice的各种数据类型(总结篇) 老话说的好:好记心不如烂笔头! 本着这原则,我把最近工作中遇到的jquery利用ajax调用web服务的 ...
- C# 利用ajax实现局部刷新
C#所有runat="server"的控件都会造成整个界面的刷新,如果想实现局部刷新,可以利用ajax. 需要加入的控件有ScriptManager和UpdatePanel,可以实 ...
- Struts2.5 利用Ajax将json数据传值到JSP
AJAX +JSON=>JSP AJAX AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着 ...
- js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面
js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面 , 做手机端开发时,发现一个问题,有些浏览器,在网速比较慢的情况下,js文件没有加载完,后续的调用已经开始调用了, ...
- 利用Ajax和JSON实现关于查找省市名称的二级联动功能
功能实现的思路:我们经常碰见网上购物时候填写收件地址会用到这个查找省市县的三级联动查找功能,我们可以利用Ajax和JSON技术模拟这个功能,说白了同样是使用Ajax的局部数据更新功能这个特性.因为省市 ...
随机推荐
- ZOJ 3471 Most Powerful （状压DP，经典）
题意: 有n个原子,每当两个原子碰撞时就会产生能量,并且消耗其中一个原子.已知每两个原子碰撞时消耗其中指定一个原子所产生的能量,问最多能产生多少能量? 思路: 一开始以为是找一个有序序列,使得能量最大 ...
- 使 windows 无需输入开机密码自动进入系统
步骤 运行netplwiz: 勾去图中所示复选框,确定后输入密码.
- Codeforces Round #320 (Div. 1) [Bayan Thanks-Round] A A Problem about Polyline（数学）
题目中给出的函数具有周期性,总可以移动到第一个周期内,当然,a<b则无解. 假设移动后在上升的那段,则有a-2*x*n=b,注意限制条件x≥b,n是整数,则n≤(a-b)/(2*b).满足条件的 ...
- FTPClient：enterLocalPassiveMode()方法简单说明
问题:在Java程序中,使用FTPClient下载FTP文件的时候,可以下载到FTP服务器上的文件夹,但是里面的文件没有下载到本地. 分析:这个涉及到FTP在使用的过程中,客户端和服务端连接过程中,端 ...
- 01_2Java开发环境的下载 安装 配置
01_2Java开发环境的下载 安装 配置 l 配置Java开发环境步骤(WindowsXP) l 下载并按照最新版本的J2SDK l 设置Windows环境变量 l 选择合适的文本编辑器或使用集成开 ...
- 沙盒（SandBox）
iOS 应用沙盒机制就是指 iOS 应用程序只能在为该程序创建的文件系统中读取文件,不可以去其它地方访问,此区域被成为沙盒,所以所有的非代码文件都要保存在此,例如图像,图标,声音,映像,属性列表,文本 ...
- Bzoj 3450: Tyvj1952 Easy (期望)
Bzoj 3450: Tyvj1952 Easy 这里放上题面,毕竟是个权限题(洛谷貌似有题,忘记叫什么了) Time Limit: 10 Sec Memory Limit: 128 MB Submi ...
- 【Git版本控制】GitLab Fork项目的工作流程
转载自简书: GitLab Fork项目工作流程
- 将php数组转js数组，js如何接收PHP数组，json的用法
首先下载下面这个文件(这是一段是别人写出来专门解析json的代码),然后引入这个文件! http://pan.baidu.com/s/1dD8qVr7 现在当我们需要用ajax与后台进行交互时,怎样将 ...
- python计算机基础(三）
简述Python垃圾回收机制: 当x=10,赋值x=11,的代码,也就是10没有对应的变量名, 10在python眼中相当于垃圾,就会被清理掉,释放内存. 对于下述代码: x = 10 y = 10 ...