- 浏览: 2275531 次
- 性别:
- 来自: 成都
文章分类
- 全部博客 (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 23520jQuery图表在http://www.oschina.net ... -
jQuery之Ztree
2011-10-19 17:14 17549参考资料 1 spring+struts2+hibernate ... -
jQuery之弹出层(用于提示)
2011-10-19 10:26 2267参考了权威指南的部分代码 实现效果:单击按钮显示层,在单击就 ... -
jQuery之get(txt,xml,json二点注意事项)
2011-10-18 14:42 5668参考资料 1 jQuery ajax - get() 方法 h ... -
jQuery之ID选择器
2011-08-23 15:25 9866参考资料 强烈推荐:张子秋 从零开始学习jQuery (二) ... -
jQuery之effect(效果)
2011-08-23 14:59 2569参考资料 从零开始学习jQuery (7) jQuery动画- ... -
jQuery之css
2011-08-23 13:54 1586jQuery W3C文档 http://www.w3schoo ... -
jQuery之select
2011-08-22 16:39 2310话不多说,详见代码吧 网页代码 <div style ... -
jQuery之实战(checkbox,table)
2011-08-19 16:22 3783实现功能如下:参考图片 1 页面加载时效果 2 全选效果 ... -
jQuery之table(隔行变色)
2011-08-19 15:52 2752页面代码如下: <table style=&quo ... -
jQuery之checkbox(复选框)
2011-08-18 17:06 2070业务需求:经常在用户登记中有这样的东西,只选择其中一项或者多项 ... -
jQuery之radio(单选)
2011-08-18 15:41 2432页面代码如下: <inpu ... -
jQuery之get(val,text,html)
2011-08-18 14:53 5994参考资料 1 jquery中,html、val与text三者属 ... -
jQuery之ID选择器
2011-08-18 13:58 16参考资料 强烈推荐:张子秋 从零开始学习jQuery (二) ... -
jQuery之jqzoom(图片放大镜插件)
2011-08-18 11:07 19700参考资料 1 基于jQuery开发的图片放大镜插件 - 淘宝网 ... -
jQuery之DOM
2011-08-17 14:45 1449参考资料 1 跳蚤的小窝:)jQuery对象和DOM对象【jQ ... -
jQuery之入门(ready)
2011-08-17 11:46 2084参考资料 1 jquery $(document).ready ... -
jQuery与Java实现图片的剪切
2011-08-05 15:10 30443一 参考资料 1 jquery Jcrop 头像,logo截图 ... -
jQueryAPI 中文版及相关参考资料
2010-12-24 12:52 1990转载: http://www.css88.com/catego ... -
jQuery对象和DOM对象【jQuery开发注意点(一)】
2010-12-23 16:45 2622转载:jQuery对象和DOM对象【jQuery开发注意点(一 ...
相关推荐
JQuery Lazyload加载图片实例
JQuery LazyLoad 图片懒加载实例,相关描述可查看我的博文“JQuery.LazyLoad 实现图片懒加载”
前端项目-jquery.loadtemplate,用于加载和使用模板的jquery插件。该插件设计简单但功能强大,支持从页面内加载模板,或使用Ajax加载HTML文件。
jquery.lazyload图片预加载 调用简单 内有实例
jquery-load-demo
jQuery_lazyload插件示例Demo
jquery.lazyload.min.js插件 直接下载引入即可~~~~~~~
jQuery中load()方法语法格式
使用jQuery.Lazyload的优点 提高页面加载速度。 网页图片挨个渐显,非常美观。
jquery图片加载延时,针对网站图片节省流量使用
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 在包含很多...
你必须修改 HTML 代码. 在 src 属性中设置展位符图片, demo 页面使用 1x1 像素灰色 GIF 图片. 并且需要将真实图片的 URL 设置到 data-original 属性. 这里可以定义特定的 class 以获得需要延迟加载的图片对象....
jquery Lazyload插件,用于页面的图片延迟加载等
Jquery.lazyload.min 轻量级懒加载Jquery框架。
NULL 博文链接:https://java378656992.iteye.com/blog/1264755
从网上下载来的版本多多少少都...没解决方案,就得发挥咱DIY的精神,自己想法解决,分析了BUG,理了理思路,结合前段时间我做弹出窗口特效的方法,解决了Jquery.LazyLoad.js的兼容问题,现将思路和方法与大家分享一下。