`

jQuery之load

阅读更多
参考资料
1 jQuery ajax - load() 方法
http://www.w3school.com.cn/jquery/ajax_load.asp
load() 方法通过 AJAX 请求从服务器加载数据,并把返回的数据放置到指定的元素中.
url 规定要将请求发送到哪个 URL。
data 可选。规定连同请求发送到服务器的数据。
function(response,status,xhr)
额外的参数:
response - 包含来自请求的结果数据
status - 包含请求的状态("success", "notmodified", "error", "timeout" 或 "parsererror")
xhr - 包含 XMLHttpRequest 对象

以下所用路径请参见:
JSP:引用文件(绝对路径)http://liuzidong.iteye.com/blog/1198188
用法一 GET请求
示例代码如下:
<%@ include file="/common/meta.jsp" %>  	
<link rel="stylesheet" href="style/mystyle.css" type="text/css">
 <script src="scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript" >			
 $(function() {
   $("#btnAjaxGet").click(function(event)  {
   //发送Get请求:可指定加载文件中的哪些项目,请使用jQuery选择器,常见的有: ID,CLASS,元 素选择器,参见以下调用
    var username = encodeURI(encodeURI($("#username").val()));
    // $("#divResult").load("jqueryLoad?username=" + username + "&un="+$("#username").val()+"&timestamp=" + (new Date()).getTime());
 // $("#divResult").load("${ctx}/data/sample.dom.html .myList");
 // $("#divResult").load("${ctx}/data/sample.dom.html img");
  // $("#divResult").load("data/sample.dom.html div[title='myTitle1']");
  $("#divResult").load("data/sample.dom.html #languages");
  //$("#divResult").load("data/sample.dom.txt");
 // $("#divResult").load("index.jsp");
   });
})
</script>

JqueryLoadServlet .java
public class JqueryLoadServlet extends HttpServlet {

	private static final long serialVersionUID = 1L;

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

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");
		response.setContentType("text/html;charset=UTF-8");
		response.setCharacterEncoding("UTF-8");

		PrintWriter out = response.getWriter();
		String v = request.getParameter("username");
		String username = java.net.URLDecoder.decode((String) request.getParameter("username"), "UTF-8");		
		System.out.println("v: " + v + ",username: " + username );

		StringBuilder tables = new StringBuilder();
		tables.append("<table id='languages' border='0' cellspacing='1'>");
		tables.append("<thead>");
		tables.append("<tr>");
		tables.append("<th>Languagetables</th>");
		tables.append("<th>Typetables</th>");
		tables.append("<th>Inventedtables</th>");
		tables.append("</tr>");
		tables.append("</thead>");
		tables.append("<tbody>");
		tables.append("<tr>");
		tables.append("<td>Javatables</td>");
		tables.append("<td>Statictables</td>");
		tables.append("<td>1995tables</td>");
		tables.append("</tr>");
		tables.append("<tr>");
		tables.append("<td>Rubytables</td>");
		tables.append("<td>Dynamictables</td>");
		tables.append("<td>1993tables</td>");
		tables.append("</tr>");
		tables.append("<tr>");
		tables.append("<td>Smalltalktables</td>");
		tables.append("<td>Dynamictables</td>");
		tables.append("<td>1972tables</td>");
		tables.append("</tr>");
		tables.append("<tr>");
		tables.append("<td>C++tables</td>");
		tables.append("<td>Statictables</td>");
		tables.append("<td>1983tables</td>");
		tables.append("</tr>");
		tables.append("</tbody>");
		tables.append("</table>");
		// out.println(username+" " + new java.util.Random().nextInt(100));
		out.print(tables.toString());
		out.flush();
		out.close();
	}
}

注意事项:使用
$("#divResult").load("jqueryLoad?username=" + username + "&un="+$("#username").val()+"&timestamp=" + (new Date()).getTime());
发送参数时,必须对参数进行二次编码操作:
var username = encodeURI(encodeURI($("#username").val()));
在后台也相应的进行解码操作:
String v = request.getParameter("username");
		String username = java.net.URLDecoder.decode((String) request.getParameter("username"), "UTF-8");

用法二 POST请求
 $("#btnAjaxPost").click(function(event)
 {
	 var username = $("#username").val();	
	  //发送Post请求
	  $("#divResult").load("${ctx}/jqueryLoad", { "username": username});
  });

以上调用就不会产生乱码!
用法三 使用回调函数
 $("#btnAjaxCallBack").click(function(event) {
   var username = $("#username").val();	
  //发送Post请求, 返回后执行回调函数.
  $("#divResult").load("${ctx}/jqueryLoad", { "username": username}, function(responseText, textStatus, XMLHttpRequest)
 {
  responseText = " Add in the CallBack Function! <br/>" + responseText +"<br/>" + textStatus + "," + XMLHttpRequest.status + "<br/>" + XMLHttpRequest.statusText ;
 $("#divResult").html(responseText); //或者: $(this).html(responseText);
   });
 });

总结如下:jQuery的load方法可指定加载静态文件,也可发送ajax请求,它常用于直接获取数据显示在页面中       
分享到:
评论
1 楼 Jonefy 2012-03-10  
谢谢  刚遇到此问题!

相关推荐

    JQuery Lazyload加载图片实例

    **jQuery Lazyload 图片加载技术详解** 在网页设计中,图片是重要的元素之一,但大量图片的预加载可能会拖慢页面的加载速度,影响用户体验。为了解决这一问题,jQuery 提供了一个插件——jQuery Lazyload,它允许...

    JQuery LazyLoad 图片懒加载实例

    **jQuery LazyLoad 图片懒加载实例** 在网页设计中,图片加载是影响页面性能的关键因素。当页面包含大量图片时,一次性加载所有图片可能会导致页面加载速度变慢,用户体验下降。为了解决这一问题,我们可以使用`...

    jquery.lazyload图片预加载效果 jquery预加载

    《jQuery LazyLoad 图片预加载技术详解》 在网页设计中,图片的加载速度往往直接影响着用户体验。当页面中包含大量图片时,...熟练掌握并运用jQuery LazyLoad,能够使我们的网页更加流畅,用户满意度也会随之提高。

    前端项目-jquery.loadtemplate.zip

    `jquery.loadtemplate` 是一个基于 jQuery 的插件,专门用于加载和使用模板,使得在Web应用中动态渲染内容变得更加便捷。这个压缩包文件“frontend-project-jquery.loadtemplate.zip”包含了一个名为“jquery-...

    jquery lazyload延时加载

    **jQuery LazyLoad 知识详解** 在网页设计与开发中,优化用户体验和页面加载速度是一项至关重要的任务。jQuery 的 LazyLoad 插件提供了一种高效的方法来处理这个问题,特别是对于那些图片众多、流量消耗大的网站而...

    jquery-load-demo

    在Web开发中,jQuery库以其简洁易用的API和强大的功能,成为了JavaScript开发者的首选工具之一。"jquery-load-demo"这个项目,显然着重展示了jQuery的load()方法在动态加载网页内容方面的应用。下面,我们将深入探讨...

    jquery.lazyload.js

    《jQuery.Lazyload.js:优化网页加载速度与用户体验的艺术》 在现代网页设计中,页面加载速度和用户体验是至关重要的因素。jQuery.Lazyload.js是一个高效实用的JavaScript插件,它能够显著提升网页加载速度,同时...

    jQuery_lazyload

    jQuery_lazyload是一个非常实用的JavaScript库,用于优化网页性能,特别是在处理大量图片或者内容时。这个插件的主要目的是延迟加载,即在用户滚动到页面的特定部分时才加载那些可视区域以外的内容,从而减少初次...

    jquery.load 是无法替代 iframe的

    然而,有时候开发者会误解jQuery的一些方法,比如`load()`,认为它可以完全替代iframe的使用场景。实际上,`jquery.load()` 和 iframe 有着不同的功能和应用场景,它们之间并不能互相完全替代。 `jquery.load()` 是...

    jquery.lazyload 实现图片延迟加载

    **jQuery LazyLoad 插件详解:实现图片延迟加载** 在网页设计中,为了提升用户体验,减少页面初次加载的时间,一种常见的优化策略是采用图片延迟加载(Image Lazy Load)技术。`jQuery LazyLoad` 是一个非常实用的 ...

    jquery.lazyload.min.js

    jquery.lazyload.min.js插件 直接下载引入即可~~~~~~~

    前端项目-jquery-lazyload-any.zip

    《前端项目中的jQuery LazyLoad Any技术详解》 在前端开发中,优化网页加载速度和用户体验是至关重要的。jQuery LazyLoad Any是一个高效的插件,专为延迟加载图像、iframe或者其他任何元素而设计,它大大提升了页面...

    jquery lazyload图片延迟加载技术

    **jQuery LazyLoad 图片延迟加载技术** 在网页设计中,图片是重要的元素之一,但大量图片的加载往往会导致页面加载速度变慢,用户体验下降。为了解决这个问题,开发者们引入了图片延迟加载(Lazy Load)技术。...

    jQuery.lazyload.js

    **jQuery.lazyload.js** 是一个基于 **jQuery** 的图片延迟加载插件,它设计用于优化网页性能,提高页面加载速度,提升用户体验,并减轻服务器负担。延迟加载,也称为懒加载,是一种网页优化策略,它允许网页只加载...

    jQuery lazyload

    **jQuery Lazyload 插件详解** 在Web开发中,优化页面加载速度是至关重要的,尤其在内容丰富的网站或应用中,大量的图片会显著增加页面的加载时间。为了解决这个问题,开发者们通常采用延迟加载(Lazy Load)技术,...

    jQuery中load()方法语法格式

    ### jQuery中load()方法语法格式详解 在前端开发领域,jQuery因其简洁的API和强大的功能,长期以来备受开发者青睐。其中一个非常实用的方法就是`load()`,它允许开发者以异步方式加载远程HTML文档或文档片段,并将...

    jquery.lazyload.js 图片懒加载 --demo

    **jQuery LazyLoad.js 图片懒加载技术详解及Demo演示** 在网页设计中,图片加载是一项重要的性能优化策略。尤其对于内容丰富的网站,一次性加载所有图片可能会导致页面加载速度变慢,影响用户体验。为了解决这个...

    ajax与jquery无刷新验证用户之load()之post方法二

    在本例中,我们使用jQuery的load()方法来实现Ajax请求。load()函数通常用于动态加载HTML内容到指定的DOM元素中。在这个场景下,我们通过点击“登陆”按钮触发Ajax请求: ```javascript $("#denglu").click(function...

    懒加载jquery.lazyload.js

    **jQuery LazyLoad.js 插件详解** 在网页开发中,图片和大体积的媒体资源往往会导致页面加载速度变慢,用户体验下降。为了解决这个问题,开发者们提出了“懒加载”(Lazy Loading)技术,它是一种优化策略,允许...

Global site tag (gtag.js) - Google Analytics