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 相关文章推荐
javascript 写类方式之十
Jul 05 Javascript
Javascript算符的优先级介绍
Mar 20 Javascript
JS数组的赋值介绍
Mar 10 Javascript
jQuery1.9+中删除了live以后的替代方法
Jun 17 Javascript
AngularJS基础 ng-init 指令简单示例
Aug 02 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
Feb 14 Javascript
JS实现课堂随机点名和顺序点名
Mar 09 Javascript
详解vue的数据binding绑定原理
Apr 12 Javascript
vue 中自定义指令改变data中的值
Jun 02 Javascript
AngularJS service之select下拉菜单效果
Jul 28 Javascript
详解require.js配置路径的用法和css的引入
Sep 06 Javascript
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
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
重料打造自己的“宝马”---第三代
2021/03/02 无线电
php接口和抽象类使用示例详解
2014/03/02 PHP
两种php实现图片上传的方法
2016/01/22 PHP
零基础学JavaScript最新动画教程+iso光盘下载
2008/01/22 Javascript
理解Javascript_09_Function与Object
2010/10/16 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
2013/06/21 Javascript
javascript 按键事件(兼容各浏览器)
2013/12/20 Javascript
jQuery中:has选择器用法实例
2014/12/30 Javascript
angular.element方法汇总
2015/01/07 Javascript
JavaScript实现表格快速变色效果代码
2015/08/19 Javascript
JavaScript类型系统之正则表达式
2016/01/05 Javascript
深入剖析JavaScript:Object类型
2016/05/10 Javascript
input框中的name和id的区别
2016/11/16 Javascript
js模态对话框使用方法详解
2017/02/16 Javascript
JS使用插件cryptojs进行加密解密数据实例
2017/05/11 Javascript
解决vue项目报错webpackJsonp is not defined问题
2018/03/14 Javascript
vue+webpack实现异步加载三种用法示例详解
2018/04/24 Javascript
Vue 组件修改根实例的数据的方法
2019/04/02 Javascript
JavaScript动态检测密码强度原理及实现方法详解
2019/06/11 Javascript
vue+swiper实现左右滑动的测试题功能
2020/10/30 Javascript
[05:26]TI10典藏宝瓶套装外观展示
2020/07/03 DOTA
python base64 decode incorrect padding错误解决方法
2015/01/08 Python
C#返回当前系统所有可用驱动器符号的方法
2015/04/18 Python
Python中文编码知识点
2019/02/18 Python
python中前缀运算符 *和 **的用法示例详解
2020/05/28 Python
python中plt.imshow与cv2.imshow显示颜色问题
2020/07/16 Python
html5教程画矩形代码分享
2013/12/04 HTML / CSS
THE OUTNET英国官网:国际设计师品牌折扣网站
2016/08/14 全球购物
新西兰领先的内衣店:Bendon Lingerie新西兰
2018/07/11 全球购物
欧洲著名的二手奢侈品网站:Vestiaire Collective
2020/03/07 全球购物
业务副厂长岗位职责
2014/01/03 职场文书
会计主管岗位职责
2014/01/03 职场文书
资助贫困学生倡议书
2014/05/16 职场文书
组工干部对照检查材料
2014/08/25 职场文书
导游词怎么写
2015/02/04 职场文书
go goth封装第三方认证库示例详解
2022/08/14 Golang