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

淩亂°似流年 2022-08-21 15:59 107阅读 0赞

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>

发表评论取消回复

表情：

评论列表（有 0 条评论，107人围观）

还没有评论，来说两句吧...

相关阅读

相关 java servlet ajax_使用jquery 的ajax 与 Java servlet的交互

由于是使用jquery的所以别忘记导入jq 下面是jsp文件 pageEncoding="UTF-8"%> Insert title here function aj

心已赠人/ 2022年11月02日 11:49/ 0 赞/ 124 阅读

相关 html图片按顺序加载,jQuery 实现图片的依次加载图片功能

css代码： ul\portfolio\{margin:0;padding:0;\} ul\portfolio li\{float: left;margin:0 5px 0

今天药忘吃喽~/ 2022年10月06日 07:52/ 0 赞/ 178 阅读

相关 Jquery 实现图片延迟加载

网上的那个Jquery的插件不好用,你试过就知道. 无奈,自己写了一段代码 $(function()\{ var CPos=func

た入场券/ 2022年09月20日 08:31/ 0 赞/ 857 阅读

相关前后端交互图片懒加载

index.js文件代码如下 $(function(){ var num =1; imgList(num) var f

短命女/ 2022年09月16日 11:27/ 0 赞/ 199 阅读

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

1、jQuery的Ajax与Java交互带加载图片 1.1 html代码 <body> <div id="main"> <butto

淩亂°似流年/ 2022年08月21日 15:59/ 0 赞/ 108 阅读

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

1. jQuery.post( url, \[data\], \[callback\], \[type\] ) ：使用POST方式来进行异步请求 1.1

我就是我/ 2022年08月21日 15:59/ 0 赞/ 100 阅读

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

1、jQuery.get( url, \[data\], \[callback\] )：使用GET方式来进行异步请求 1.1 参数：

比眉伴天荒/ 2022年08月21日 15:58/ 0 赞/ 126 阅读

相关 jquery ajax 加载数据的时候异步显示加载动画

http://blog.csdn.net/szstephenzhou/article/details/39318415 ajax加载后台数据就不说的那么细了。看下面

悠悠/ 2022年08月20日 13:23/ 0 赞/ 173 阅读

相关图片预加载与图片懒加载（缓载）的区别与实现

预加载与懒加载，我们经常经常用到，这些技术不仅仅限于图片加载，我们今天讨论的是图片加载：一、什么是图片预加载与懒加载：图片预加载：顾名思义，图片预加载就是

我不是女神ヾ/ 2022年08月18日 14:10/ 0 赞/ 230 阅读

相关（二）jQuery+ajax与servlet的交互

前面了解到[jQuery.ajax][]的概念，里面的知识点讲述的很清楚。然后下一件事就是来完成一个例子来理解jQuery.ajax.：这里实现jQuery+ajax+

清疚/ 2022年06月14日 05:42/ 0 赞/ 222 阅读