- 浏览: 425706 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
springaop_springmvc:
apache lucene开源框架demo使用实例教程源代码下 ...
Java搜索工具——Lucene实例总结(一) -
chengang292214:
总结的不错
Web开发中的路径问题 -
liuyuanhui0301:
aka~
Java 归并排序(基于数组) -
IT人_:
不错
远程连接MySQL,防火墙阻止访问,解决办法 -
zhuchao_ko:
借鉴。
JNDI访问LDAP
1. 加载异步数据
- load()方法
load(url,[data],[callback]),url是页面地址,[data]是要发送到服务器的数据,格式为key/value,callback表示数据加载成功后的回调函数
$("#divTip").load("b.html"); //load()方法加载数据
load()方法中,参数url还可以用于过滤页面中的某类别的元素,如$("#divTip").load("b.html.divContent");表示获取b.html中类别名为divContent的全部元素
- getJSON()全局函数
获取json文件
$.getJSON(url, [data],[callback])
$(function() { $("#Button1").click(function() { //按钮单击事件 //打开文件,并通过回调函数处理获取的数据 $.getJSON("UserInfo.json", function(data) { $("#divTip").empty(); //先清空标记中的内容 var strHTML = ""; //初始化保存内容变量 $.each(data, function(InfoIndex, Info) { //遍历获取的数据 strHTML += "姓名:" + Info["name"] + "<br>"; strHTML += "性别:" + Info["sex"] + "<br>"; strHTML += "邮箱:" + Info["email"] + "<hr>"; }) $("#divTip").html(strHTML); //显示处理后的数据 }) }) })
getScript()全局函数获取.js文件
$.getScript(url,[callback])
页面获取js文件内容的方法有:
<script type=”text/javascript” src=”js/xx.js”></script> $(“<script type=’text/javascript’ src=’js/xx.js’ />”).appendTo(“head”); $.getScript("UserInfo.js");
- 异步加载XML文档
$.get(url,[data],[callback],[type]),url表示等待加载的数据地址,[data]表示发送到服务器的参数,其格式是key/value,[type]表示返回数据的格式:html,xml,js,json,text等。
$(function() { $("#Button1").click(function() { //按钮单击事件 //打开文件,并通过回调函数处理获取的数据 $.get("UserInfo.xml", function(data) { $("#divTip").empty(); //先清空标记中的内容 var strHTML = ""; //初始化保存内容变量 $(data).find("User").each(function() { //遍历获取的数据 var $strUser = $(this); strHTML += "姓名:" + $strUser.find("name").text() + "<br>"; strHTML += "性别:" + $strUser.find("sex").text() + "<br>"; strHTML += "邮箱:" + $strUser.find("email").text() + "<hr>"; }) $("#divTip").html(strHTML); //显示处理后的数据 }) }) })
通过each()方法便利文档中的User节点,然后再遍历的过程中使用find方法,查询该节点中的name,sex,email选项,并通过text()方法获取各选项的值。
2. 请求服务器数据
- $.get()方法
例子:
$.get("user.do", { name: encodeURI($("#txtName").val()) }, function(data) { $("#divTip") .empty() //先清空标记中的内容 .html(data); //显示服务器返回的数据 })
参数中有中文,需要使用encodeURI()进行转码,服务端接收时,需要用decodeURI进行解码。
- $.post()请求数据
$.post(url,[data],[callback],[type])和$.get()方法请求方式一样,只是get方式不是后传递数据量较大的数据,同时,请求的历史信息会保存在浏览器的缓存中,有一定的风险。而post方式没有这种缺点。
- serialize()序列化表单
向服务器传递表单的数据时,逐个输入字段的方式进行传输比较麻烦,serialize方法可以简化参数船只的方式。
$(function() { $("#Button1").click(function() { //按钮单击事件 //打开文件,并通过回调函数返回服务器响应后的数据 $.post("user.do", $("#userForm").serialize(), //序列化表单数据 function(data) { $("#divTip") .empty() //先清空标记中的内容 .html(data); //显示服务器返回的数据 }) }) })
Serialize()方法很完美地模拟浏览器提交表单的操作,同时解决了中文编码问题,但它也有很多不足,比如表单中有多项被选中时,该方法只能传递一项的值。
3. $.ajax方法
$.ajax()是jQuery最底层的方法,因为,凡使用$.getScript(),$.get(),$.post(),$.getJSON()的调用,都可以用$.ajax()代替。
$.ajaxSetup()设置全局Ajax
在使用$.ajax()方法时,有时需要调用多个$.ajax(),如果每个方法都设置其中的请求细节,显得繁琐。使用$.ajaxSetup()方法设置全局性的Ajax默认选项,一次设置,全局有效。
例子:
$(function() { $.ajaxSetup({ //设置全局性的Ajax选项 type: "GET", url: "UserInfo.xml", dataType: "xml" }) $("#Button1").click(function() { //"姓名”按钮的单击事件 $.ajax({ success: function(data) { //传回请求响应的数据 ShowData(data, "姓名", "name"); //显示"姓名"部分 } }) }) $("#Button2").click(function() { //"性别”按钮的单击事件 $.ajax({ success: function(data) { //传回请求响应的数据 ShowData(data, "性别", "sex"); //显示"性别"部分 } }) }) $("#Button3").click(function() { //"邮箱”按钮的单击事件 $.ajax({ success: function(data) { //传回请求响应的数据 ShowData(data, "邮箱", "email"); //显示"邮箱"部分 } }) }) /* *根据名称与值,获取请求响应数据中的某部分 *@Param d为请求响应后的数据 *@Param n为数据中文说明字符 *@Param d为数据在响应数据中的元素名称 */ function ShowData(d, n, v) { $("#divTip").empty(); //先清空标记中的内容 var strHTML = ""; //初始化保存内容变量 $(d).find("User").each(function() { //遍历获取的数据 var $strUser = $(this); strHTML += n + ":" + $strUser.find(v).text() + "<hr>"; }) $("#divTip").html(strHTML); //显示处理后的数据 } })
4. ajax全局事件
$.ajaxSetup()是全局函数
jQuery中有6个全局性Ajax事件
ajaxComplete(callback) ajax请求执行完成时执行函数
ajaxError(callback) ajax请求发生错误时执行函数,其中捕捉到的错位可以作为最后一个参数进行传递
ajaxSend(callback) ajax请求发送前执行函数
ajaxStart(callback) ajax请求开始时执行函数
ajax请求开始是触发,常用语编写一些准备工作,如提示“正在获取数据…”
ajaxStop(callback) ajax请求结束时执行函数
ajax请求结束时触发,常与ajaxStart()结合,说明请求的最后进展状态,如将提示“正在获取数据。。。”修改为“已成功获取数据”,然后渐渐消失掉。
//元素绑定全局ajaxStart事件 $("#divMsg").ajaxStart(function() { $(this).show(); //显示元素 }) //元素绑定全局ajaxStop事件 $("#divMsg").ajaxStop(function() { $(this).html("已成功获取数据。").hide(); }) <div id="divMsg" class="clsTip">正在发送数据请求…</div>
ajaxSuccess(callback)ajax请求成功时执行函数
在js文件中引用js文件:<reference path="jquery-1.4.2.js"/>
记忆碎片
未知死亡
地球上的星星
发表评论
-
How tomcat works
2011-10-30 10:01 10501. Tomcat 模型:connector--------- ... -
jQuery Cookie插件
2011-10-06 10:49 0back>> cookie插件可以很 ... -
jQuery form表单插件
2011-10-06 10:45 979back>> http://www.cnbl ... -
jQuery验证插件
2011-10-06 10:40 1394back>> 使用示例: <!DOCTY ... -
jQuery性能优化
2011-10-06 10:28 1656back>> 1. 优化选择器的执行速度 ... -
jQuery中工具函数
2011-10-06 10:06 5212back>> 工具函数的一般格式如下:$.函数名 ... -
jQuery动画与特效
2011-10-05 15:26 2190back>> 1. 显示与隐 ... -
jQuery事件
2011-10-05 15:08 2594back>> 1. 事件机制 ... -
Jquery Dom操作
2011-10-05 14:44 1543back>> 1. 元素属性操作 ... -
jQuery选择器
2011-10-05 09:04 2668back>> 1. 表格各 ... -
jQuery权威指南
2011-10-05 08:58 793jQuery权威指南 1. jQuery入门 2. ... -
Jquery入门
2011-09-28 14:41 11651. Jquery基本功能 * 访问和操作D ... -
comet pushlet
2011-08-12 17:49 21401.http://www.ibm.com/developerw ... -
Ajax开发
2011-07-25 21:50 15171. netbeans 中文版改成英文版 在NetBea ... -
CSS+DIV
2011-06-28 16:02 1070精通CSS+DIV网页样式与布局 曾顺 人民邮电出 ... -
jquery
2011-06-09 08:08 968http://www.css888.com/ jQuer ... -
jsp乱码解决大全(转自csdn一高手)
2011-03-04 17:01 2162好文章, ... -
Unicode 控制字符
2011-03-03 11:44 3131<li> : &am ... -
URL中汉字乱码问题
2011-02-26 12:01 1567返回 Oak>> 服务器 ... -
分 页
2011-02-23 18:27 815返回Oak>> 1. 几种不同的分 ...
相关推荐
工作之余写的一些Ajax应用,有6个Demo,数据库为mysql,使用之前看readme.txt。javascript与jquery混用。无刷新购物车、输入提示、表格局部刷新、xml实时数据更新、划词解释。
ajax的jquery代码,jquery代码,简单运用,适合初学者,经典!!!!!!!
AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。
卫生监督移动办公系统中Ajax和Jquery的运用.pdf
jQuery的ajax在CI框架中的应用
包含了大量的ajax,jquery的特效实例,能够使初学者更好的学会使用ajax和Jquery的使用,做出效果绚丽的网页,为你打下坚实基础!
资源名称:jQuery Ajax应用解析 中文WORD版内容简介:本文档主要讲述的是jQuery Ajax应用解析;jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写Javascript...
JQueryAjax在asp.net中的应用实例
J2EE中JSON+Jquery_AJAX应用分享给大家
初学ajax的可以看看,Jquery实现AJAX 应用
jQuery 的Ajax应用 jQuery操作表格 jQuery插件
资源名称:J2EE中JSON Jquery_AJAX应用 中文PDF版内容简介:本文档主要讲述的是J2EE中JSON Jquery_AJAX应用;主要是描述使用JSON JQuery_AJAX实现页面动态加载与页面表单数据的异步保存。首先页面通过调用JQuery_...
基于jQuery中的Ajax应用初步基于jQuery中的Ajax应用初步
运用SSH2+json+ajax+jquery做的项目,有各种jar包,直接导入到eclipse中就可运行
有需要的朋友可以下载参考一下,vue本身没有ajax功能要配合axios才行, 在不用这个的话就可以用jquery配合实现
例子 jquery 的AJAX运用C#..........
1.无刷新分页控件,以Northwind数据库为示例, 2.支持多种分页样式选择,也可以自己修改源代码自定义 ...4.MsSql数据库封装访问类,可以修改代码应用于其他数据库 5.继承自IHttpHandler接口,实现http请求代理
javascript写的使用ajax通讯,发送返回数据,以及jquery里json,get等发放的使用,以及自动省成表格,删除添加表格等实例应用
Ajax-jquery-spa.zip,轻松地将任何standart网站转换为单页应用程序,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新...