Jquery工作常用实例 使用AJAX使网页进行异步更新


Posted in Javascript onJuly 26, 2011

AJAX = Asynchronous JavaScript and XML.,是一种创建快速动态网页的技术。
AJAX 通过在后台与服务器交换少量数据的方式,允许网页进行异步更新。这意味着有可能在不重载整个页面的情况下,对网页的一部分进行更新。
通过 jQuery AJAX,你可以直接把远程数据载入网页被选HTML元素中。
Jquery Ajax常用的函数有三种,分别是:
$.post(url,data,callback,type):使用 HTTP POST 来加载远程数据;
$.get(url,data,callback,type):使用 HTTP GET 来加载远程数据;
$.ajax(options):把远程数据加载到 XMLHttpRequest 对象中;
如果需要对以上三种ajax函数做深入了解的,可以参考我的博文“jQuery AJAX 函数详解与实例应用”。
实例:
ajax_load.html文件内容:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>ajax_load.html</title> 
</head> 
<body> 
<h2 style="color:#FF0000">我是李云,Jquery很好用!</h2> 
</body> 
</html>

index.html文件内容:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>使用Ajax post、get或Ajax方法来改变HTML内容</title> 
<script type="text/javascript" src="jquery-1.6.1.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$("#button").click(function(){ 
//post方法异步获得ajax_load.html文件内容并显示于当前页: 
/* 
$.post("ajax_load.html",function(data){ 
//alert(data); 
$("#changeCon").html(data); 
}); 
*/ 
//get方法异步获得ajax_load.html文件内容并显示于当前页: 
/* 
$.get("ajax_load.html",function(data){ 
$("#changeCon").html(data); 
}); 
*/ 
//ajax方法异步获得ajax_load.html文件内容并显示于当前页: 
$.ajax({ 
url:"ajax_load.html", 
async:false, 
success:function(data) 
{ 
$("#changeCon").html(data); 
} 
}) 
}); 
}) 
</script> 
</head> 
<body> 
<div id="changeCon"><h2>通过Ajax load改变此处内容</h2></div> 
<input type="button" id="button" value="Click me" /> 
</body> 
</html>

如上,以上三种方法都能达到同样的效果,此实例比较简单,对刚入门学Jquery ajax函数的朋友还是有一定的帮助的,更多的还要自己多动手去尝试。
Javascript 相关文章推荐
基于jQuery的日期选择控件
Oct 27 Javascript
JAVASCRIPT车架号识别/验证函数代码 汽车车架号验证程序
Jan 08 Javascript
基于javascript html5实现3D翻书特效
Mar 14 Javascript
Node.js中的require.resolve方法使用简介
Apr 23 Javascript
vue.js之vue-cli脚手架的搭建详解
May 05 Javascript
JS验证码实现代码
Sep 14 Javascript
Angular 项目实现国际化的方法
Jan 08 Javascript
Vue引入sass并配置全局变量的方法
Jun 27 Javascript
Vue中使用clipboard实现复制功能
Sep 05 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
May 07 Javascript
jQuery实现移动端图片上传预览组件的方法分析
May 01 jQuery
详解Vue中Axios封装API接口的思路及方法
Oct 10 Javascript
jQuery选择器的工作原理和优化分析
Jul 25 #Javascript
Jquery 点击按钮显示和隐藏层的代码
Jul 25 #Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
Jul 22 #Javascript
JavaScript实现页面滚动图片加载(仿lazyload效果)
Jul 22 #Javascript
JS 自定义带默认值的函数
Jul 21 #Javascript
表单切换,用回车键替换Tab健(不支持IE)
Jul 20 #Javascript
在浏览器中获取当前执行的脚本文件名的代码
Jul 19 #Javascript
You might like
提问的智慧
2006/10/09 PHP
PHP+SQL 注入攻击的技术实现以及预防办法
2010/12/29 PHP
php中mysql模块部分功能的简单封装
2011/09/30 PHP
详解PHP内置访问资源的超时时间 time_out file_get_contents read_file
2013/06/03 PHP
discuz加密解密函数使用方法和中文注释
2014/01/21 PHP
PH P5.2至5.5、5.6的新增功能详解
2014/07/14 PHP
PHP parse_ini_file函数的应用与扩展操作示例
2019/01/07 PHP
经典的带阴影的可拖动的浮动层
2006/06/26 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
2013/07/01 Javascript
jQuery实现的自定义滚动条实例详解
2016/09/20 Javascript
使用JavaScript为一张图片设置备选路径的方法
2017/01/04 Javascript
javascript基础知识之html5轮播图实例讲解(44)
2017/02/17 Javascript
js获取一组日期中最近连续的天数
2017/05/25 Javascript
jQuery正则验证注册页面经典实例
2017/06/10 jQuery
JavaScrpt判断一个数是否是质数的实例代码
2017/06/11 Javascript
react实现换肤功能的示例代码
2018/08/14 Javascript
小程序清理本地缓存的方法
2018/08/17 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
2018/12/12 Javascript
详解async/await 异步应用的常用场景
2019/05/13 Javascript
解决vue-router 切换tab标签关闭时缓存问题
2020/07/22 Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
2020/09/09 Javascript
wxPython学习之主框架实例
2014/09/28 Python
pandas dataframe添加表格框线输出的方法
2019/02/08 Python
python的等深分箱实例
2019/11/22 Python
利用Tensorflow构建和训练自己的CNN来做简单的验证码识别方式
2020/01/20 Python
python获取栅格点和面值的实现
2020/03/10 Python
在keras中实现查看其训练loss值
2020/06/16 Python
苹果香港官方商城:Apple香港
2016/09/14 全球购物
英国最大的奢侈品零售网络商城:Flannels
2016/09/16 全球购物
美国女性运动零售品牌:Lady Foot Locker
2017/05/12 全球购物
岗位职责风险防控
2014/02/18 职场文书
中学生评语大全
2014/04/18 职场文书
党的群众路线教育实践活动个人对照检查剖析材料
2014/09/23 职场文书
领导班子作风建设年个人整改措施
2014/09/29 职场文书
2014年学校体育工作总结
2014/12/08 职场文书
2014年车间主任工作总结
2014/12/10 职场文书