7、jQuery的Ajax与Java交互带加载图片

1、jQuery的Ajax与Java交互带加载图片

1.1 html代码

<body>
	<div id="main">
		<button id="myBut">Ajax获取数据</button>
		<div id="container">
			<img src="./img/load.jpg" id="myimg">
		</div>
	</div>
</body>

1.2  style代码

<style type="text/css">
#main {
	margin: 0 auto;
	width: 400px;
}

#container {
	width: 400px;
	height: 300px;
	border: 1px dashed #666;
	text-align: center;
	line-height: 300px;
	position: relative;
}

#myimg {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -100px;
	margin-top: -100px;
	display: none;
}
</style>

1.3 Javascript代码

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
	$(function() {
		$('#myBut').click(function() {
			$.ajax({
				type : "get",
				url : "JqueryAjaxServlet",
				data : {
					age : 18,
					name : "zhang"
				},
				beforeSend : function(XMLHttpRequest) {
					//设置图片为可见
					$('#myimg').show();
				},
				success : function(data, textStatus) {
					//设置图片隐藏
					$('#myimg').hide();
					var ajaxResult = jQuery.parseJSON(data);
					var age = ajaxResult.age;
					var name = ajaxResult.name;
					var mydiv = $('#container');
					mydiv.html("name:" + name + "," + "age:" + age);
				},
				complete : function(XMLHttpRequest, textStatus) {
				},
				error : function() {
				}
			});
		});
	});
</script>

1.4 JqueryAjaxServlet.java代码

public class JqueryAjaxServlet extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// 模拟网络延迟
		try {
			Thread.sleep(2000);
		} catch (InterruptedException e) {
			e.printStackTrace();
		}
		String age = request.getParameter("age");
		String name = request.getParameter("name");

		String personJSON = "{\"name" + "\":\"" + name + "\"," + "\"age"
				+ "\":" + age + "}";
		System.out.println(personJSON);
		response.getWriter().write(personJSON);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		doGet(request, response);

	}

}

1.5 web.xml代码

<servlet>
    <servlet-name>JqueryAjaxServlet</servlet-name>
    <servlet-class>com.jquery.ajax.com.JqueryAjaxServlet</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>JqueryAjaxServlet</servlet-name>
    <url-pattern>/JqueryAjaxServlet</url-pattern>
  </servlet-mapping>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
时间: 2024-10-26 03:51:30

7、jQuery的Ajax与Java交互带加载图片的相关文章

JQuery的AJAX调用(一)——加载传递数据

一,load方法异步请求数据 使用load()方法通过Ajax请求加载服务器中的数据,并把返回的数据放置到指定的元素中,它的调用格式为: load(url,[data],[callback]) 参数url为加载服务器地址,可选项data参数为请求时发送的数据,callback参数为数据请求成功后,执行的回调函数. 二,使用getJSON()方法异步加载JSON格式数据 使用getJSON()方法可以通过Ajax异步请求的方式,获取服务器中的数组,并对获取的数据进行解析,显示在页面中,它的调用格式

.NET中使用Jquery和Ajax(三) - load加载

首先创建两个webform页面,一个命名为Default.aspx,用来显示load结果. 一个为Ajax.aspx,用来被load. 比如我们在Ajax.aspx中随便输入一些文字或者其他,Work hard, Enjoy life~ . 然后在Defaut.aspx中 引入Jquery 然后就可以开始我们的AJax load了.. 先在页面中插入一个botton 和两个DIV ,bottom用来触发load事件,DIV分别来载入load页面 和返回load结果. <input type=&quo

jQuery+php+Ajax文章列表点击加载更多功能

jQuery+php+Ajax实现的一个简单实用的文章列表点击加载更多功能,点击加载更多按钮,文章列表加载更多数据,加载中有loading动画效果. js部分: 1 <script type="text/javascript" src="jquery.more.js"></script> 2 <script type="text/javascript"> 3 $(function() { 4 $('#more'

java初学。加载图片

public class GameFrame extends Frame{ private static final int WIDTH=900; private static final int HEIGHT=600; Man man=new Man(); public void paint(Graphics g){ man.draw(g); } public void loadFrame(){ this.setSize(WIDTH, HEIGHT); this.setLocation(50,

5、jQuery的Ajax与Java通过GET方式交互

1.jQuery.get( url, [data], [callback] ):使用GET方式来进行异步请求 1.1 参数:              url (String) :  发送请求的URL地址.              data (Map) : (可选) 要发送给服务器的数据,以 Key/value 的键值对形式表示,会做为jQueryString附加到请求URL中.              callback (Function) : (可选) 载入成功时回调函数(只有当Resp

6、jQuery的Ajax与Java通过POST方式交互

1. jQuery.post( url, [data], [callback], [type] ) :使用POST方式来进行异步请求          1.1  参数               url (String) : 发送请求的URL地址.              data (Map) : (可选) 要发送给服务器的数据,以 Key/value 的键值对形式表示.              callback (Function) : (可选) 载入成功时回调函数(只有当Response

3、在Ajax于Java的交互过程中,加入加载图片

1.在Ajax于Java的交互过程中,加入加载图片 1.1 html代码 <body> <button id="mybtn">点击</button> <div id="myAjax"> <img src="./img/load2.jpg" id="myimg"> </div> <!-- 模拟等待的图片 --> </body> 1.2

jvm系列(一):java类的加载机制

java类的加载机制 原文:http://www.cnblogs.com/ityouknow/p/5603287.html 1.什么是类的加载 类的加载指的是将类的.class文件中的二进制数据读入到内存中,将其放在运行时数据区的方法区内,然后在堆区创建一个java.lang.Class对象,用来封装类在方法区内的数据结构.类的加载的最终产品是位于堆区中的Class对象,Class对象封装了类在方法区内的数据结构,并且向Java程序员提供了访问方法区内的数据结构的接口. 类加载器并不需要等到某个

JQuery实现无刷新下拉加载图片

      最近做的一个项目需要做页面无刷新下拉加载图片,调研了一番,大多都采用检测滚动条达到底部,然后利用ajax加载下一页数据对页面数据进行添加,根据这一逻辑,自己写了一个,具体代码如下: JQuery写下拉触发ajax事件 $(window).scroll(function () { if($(window).scrollTop()==($(document).height()-$(window).height()))//判断右边滑动条是否滑到最下 { $.ajax({ url:"&quo