- 浏览: 2288000 次
- 性别:
- 来自: 成都
文章分类
- 全部博客 (357)
- J2EE (49)
- JavaScript (40)
- Spring (19)
- Struts (5)
- CSS (8)
- Hibernate (16)
- Java (67)
- DWR (4)
- JSON (3)
- XFIRE (1)
- Tomcat (1)
- Ant (2)
- 设计模式 (2)
- 经典收藏 (2)
- JSP (10)
- Linux (0)
- WebLogic (11)
- myeclipse (13)
- Buffalo (4)
- 文件上传相关 (1)
- oracle (33)
- html (6)
- JSTL (3)
- SVN (2)
- GIT (1)
- 孙卫琴(Java网络编程精解) (1)
- DOM4J (2)
- Swing (1)
- AJAX (1)
- Eclipse (5)
- 日志组件 (3)
- PowerDesigner (1)
- Jquery (22)
- IT技术开发相关网址 (1)
- Nutz (1)
- 其它 (1)
- Velocity (3)
- WebService (1)
- MySql (2)
- Android (1)
- Maven (2)
- Quartz (11)
- Lucene (1)
- springsource (1)
- Junit (1)
- Activiti (0)
最新评论
-
yzlseu:
拼凑,没有营养
Activiti进阶—分配组任务 -
zhangsenhao:
非常赞!代码很清楚
SpringMVC3.0+MyIbatis3.0(分页示例) -
xiamw2000:
分页写得不对,应该是 : order by ${orderNa ...
SpringMVC3.0+MyIbatis3.0(分页示例) -
sheertewtw:
...
SpringMVC:上传与下载 -
kingtoon:
...
XSS之xssprotect
参考资料
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请求
示例代码如下:
JqueryLoadServlet .java
注意事项:使用
用法二 POST请求
以上调用就不会产生乱码!
用法三 使用回调函数
总结如下:jQuery的load方法可指定加载静态文件,也可发送ajax请求,它常用于直接获取数据显示在页面中
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()+"×tamp=" + (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()+"×tamp=" + (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请求,它常用于直接获取数据显示在页面中
发表评论
-
jQuery图表(jqPlot,Highcharts)
2012-05-18 00:48 23555jQuery图表在http://www.oschina.net ... -
jQuery之Ztree
2011-10-19 17:14 17580参考资料 1 spring+struts2+hibernate ... -
jQuery之弹出层(用于提示)
2011-10-19 10:26 2292参考了权威指南的部分代码 实现效果:单击按钮显示层,在单击就 ... -
jQuery之get(txt,xml,json二点注意事项)
2011-10-18 14:42 5708参考资料 1 jQuery ajax - get() 方法 h ... -
jQuery之ID选择器
2011-08-23 15:25 9900参考资料 强烈推荐:张子秋 从零开始学习jQuery (二) ... -
jQuery之effect(效果)
2011-08-23 14:59 2606参考资料 从零开始学习jQuery (7) jQuery动画- ... -
jQuery之css
2011-08-23 13:54 1627jQuery W3C文档 http://www.w3schoo ... -
jQuery之select
2011-08-22 16:39 2354话不多说,详见代码吧 网页代码 <div style ... -
jQuery之实战(checkbox,table)
2011-08-19 16:22 3823实现功能如下:参考图片 1 页面加载时效果 2 全选效果 ... -
jQuery之table(隔行变色)
2011-08-19 15:52 2776页面代码如下: <table style=&quo ... -
jQuery之checkbox(复选框)
2011-08-18 17:06 2104业务需求:经常在用户登记中有这样的东西,只选择其中一项或者多项 ... -
jQuery之radio(单选)
2011-08-18 15:41 2460页面代码如下: <inpu ... -
jQuery之get(val,text,html)
2011-08-18 14:53 6051参考资料 1 jquery中,html、val与text三者属 ... -
jQuery之ID选择器
2011-08-18 13:58 16参考资料 强烈推荐:张子秋 从零开始学习jQuery (二) ... -
jQuery之jqzoom(图片放大镜插件)
2011-08-18 11:07 19732参考资料 1 基于jQuery开发的图片放大镜插件 - 淘宝网 ... -
jQuery之DOM
2011-08-17 14:45 1480参考资料 1 跳蚤的小窝:)jQuery对象和DOM对象【jQ ... -
jQuery之入门(ready)
2011-08-17 11:46 2119参考资料 1 jquery $(document).ready ... -
jQuery与Java实现图片的剪切
2011-08-05 15:10 30507一 参考资料 1 jquery Jcrop 头像,logo截图 ... -
jQueryAPI 中文版及相关参考资料
2010-12-24 12:52 2043转载: http://www.css88.com/catego ... -
jQuery对象和DOM对象【jQuery开发注意点(一)】
2010-12-23 16:45 2661转载:jQuery对象和DOM对象【jQuery开发注意点(一 ...
相关推荐
**jQuery Lazyload 图片加载技术详解** 在网页设计中,图片是重要的元素之一,但大量图片的预加载可能会拖慢页面的加载速度,影响用户体验。为了解决这一问题,jQuery 提供了一个插件——jQuery Lazyload,它允许...
**jQuery LazyLoad 图片懒加载实例** 在网页设计中,图片加载是影响页面性能的关键因素。当页面包含大量图片时,一次性加载所有图片可能会导致页面加载速度变慢,用户体验下降。为了解决这一问题,我们可以使用`...
《jQuery LazyLoad 图片预加载技术详解》 在网页设计中,图片的加载速度往往直接影响着用户体验。当页面中包含大量图片时,...熟练掌握并运用jQuery LazyLoad,能够使我们的网页更加流畅,用户满意度也会随之提高。
`jquery.loadtemplate` 是一个基于 jQuery 的插件,专门用于加载和使用模板,使得在Web应用中动态渲染内容变得更加便捷。这个压缩包文件“frontend-project-jquery.loadtemplate.zip”包含了一个名为“jquery-...
**jQuery LazyLoad 知识详解** 在网页设计与开发中,优化用户体验和页面加载速度是一项至关重要的任务。jQuery 的 LazyLoad 插件提供了一种高效的方法来处理这个问题,特别是对于那些图片众多、流量消耗大的网站而...
在Web开发中,jQuery库以其简洁易用的API和强大的功能,成为了JavaScript开发者的首选工具之一。"jquery-load-demo"这个项目,显然着重展示了jQuery的load()方法在动态加载网页内容方面的应用。下面,我们将深入探讨...
《jQuery.Lazyload.js:优化网页加载速度与用户体验的艺术》 在现代网页设计中,页面加载速度和用户体验是至关重要的因素。jQuery.Lazyload.js是一个高效实用的JavaScript插件,它能够显著提升网页加载速度,同时...
jQuery_lazyload是一个非常实用的JavaScript库,用于优化网页性能,特别是在处理大量图片或者内容时。这个插件的主要目的是延迟加载,即在用户滚动到页面的特定部分时才加载那些可视区域以外的内容,从而减少初次...
然而,有时候开发者会误解jQuery的一些方法,比如`load()`,认为它可以完全替代iframe的使用场景。实际上,`jquery.load()` 和 iframe 有着不同的功能和应用场景,它们之间并不能互相完全替代。 `jquery.load()` 是...
**jQuery LazyLoad 插件详解:实现图片延迟加载** 在网页设计中,为了提升用户体验,减少页面初次加载的时间,一种常见的优化策略是采用图片延迟加载(Image Lazy Load)技术。`jQuery LazyLoad` 是一个非常实用的 ...
jquery.lazyload.min.js插件 直接下载引入即可~~~~~~~
《前端项目中的jQuery LazyLoad Any技术详解》 在前端开发中,优化网页加载速度和用户体验是至关重要的。jQuery LazyLoad Any是一个高效的插件,专为延迟加载图像、iframe或者其他任何元素而设计,它大大提升了页面...
**jQuery LazyLoad 图片延迟加载技术** 在网页设计中,图片是重要的元素之一,但大量图片的加载往往会导致页面加载速度变慢,用户体验下降。为了解决这个问题,开发者们引入了图片延迟加载(Lazy Load)技术。...
**jQuery.lazyload.js** 是一个基于 **jQuery** 的图片延迟加载插件,它设计用于优化网页性能,提高页面加载速度,提升用户体验,并减轻服务器负担。延迟加载,也称为懒加载,是一种网页优化策略,它允许网页只加载...
**jQuery Lazyload 插件详解** 在Web开发中,优化页面加载速度是至关重要的,尤其在内容丰富的网站或应用中,大量的图片会显著增加页面的加载时间。为了解决这个问题,开发者们通常采用延迟加载(Lazy Load)技术,...
### jQuery中load()方法语法格式详解 在前端开发领域,jQuery因其简洁的API和强大的功能,长期以来备受开发者青睐。其中一个非常实用的方法就是`load()`,它允许开发者以异步方式加载远程HTML文档或文档片段,并将...
**jQuery LazyLoad.js 图片懒加载技术详解及Demo演示** 在网页设计中,图片加载是一项重要的性能优化策略。尤其对于内容丰富的网站,一次性加载所有图片可能会导致页面加载速度变慢,影响用户体验。为了解决这个...
在本例中,我们使用jQuery的load()方法来实现Ajax请求。load()函数通常用于动态加载HTML内容到指定的DOM元素中。在这个场景下,我们通过点击“登陆”按钮触发Ajax请求: ```javascript $("#denglu").click(function...
**jQuery LazyLoad.js 插件详解** 在网页开发中,图片和大体积的媒体资源往往会导致页面加载速度变慢,用户体验下降。为了解决这个问题,开发者们提出了“懒加载”(Lazy Loading)技术,它是一种优化策略,允许...