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 常用函数
Dec 30 Javascript
Package.js  现代化的JavaScript项目make工具
May 23 Javascript
点弹代码 点击页面任何位置都可以弹出页面效果代码
Sep 17 Javascript
jQuery原理系列-css选择器的简单实现
Jun 07 Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
Aug 02 Javascript
简单分析javascript中的函数
Sep 10 Javascript
基于jQuery实现选项卡效果
Jan 04 Javascript
React Native 搭建开发环境的方法步骤
Oct 30 Javascript
vue中使用cropperjs的方法
Mar 01 Javascript
详解如何在微信小程序中愉快地使用sass
Jul 30 Javascript
Angularjs 根据一个select的值去设置另一个select的值方法
Aug 13 Javascript
在vue项目中使用md5加密的方法
Sep 14 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
【动漫杂谈】关于《请在T台上微笑》
2020/03/03 日漫
PHP中substr()与explode()函数用法分析
2014/11/24 PHP
jquery zTree异步加载简单实例分享
2013/02/05 Javascript
对比分析json及XML
2014/11/28 Javascript
原生JavaScript+LESS实现瀑布流
2014/12/12 Javascript
java必学必会之static关键字
2015/12/03 Javascript
JavaScript时间操作之年月日星期级联操作
2016/01/15 Javascript
详解javascript实现自定义事件
2016/01/19 Javascript
Bootstrap表单布局样式代码
2016/05/31 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
2016/06/02 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
2016/06/22 Javascript
Angularjs 设置全局变量的方法总结
2016/10/20 Javascript
前端js弹出框组件使用方法
2020/08/24 Javascript
Vue.js基础知识小结
2017/01/13 Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
2017/10/14 jQuery
JavaScript事件委托原理与用法实例分析
2018/06/07 Javascript
分享一个vue项目“脚手架”项目的实现步骤
2019/05/26 Javascript
node实现爬虫的几种简易方式
2019/08/22 Javascript
vue中监听路由参数的变化及方法
2019/12/06 Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
2020/05/28 Javascript
Vue使用Element实现增删改查+打包的步骤
2020/11/25 Vue.js
[53:20]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 VG vs OG
2018/04/03 DOTA
[01:20:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第四场 8.26
2018/08/30 DOTA
Python安装Imaging报错:The _imaging C module is not installed问题解决方法
2014/08/22 Python
用python做一个搜索引擎(Pylucene)的实例代码
2017/07/05 Python
python检测主机的连通性并记录到文件的实例
2018/06/21 Python
windows10下安装TensorFlow Object Detection API的步骤
2019/06/13 Python
pyqt 实现为长内容添加滑轮 scrollArea
2019/06/19 Python
jupyternotebook 撤销删除的操作方式
2020/04/17 Python
django 解决自定义序列化返回处理数据为null的问题
2020/05/20 Python
J2EE面试题大全
2016/08/06 面试题
销售员自我评价怎么写
2013/09/19 职场文书
2014年国庆节演讲稿
2014/09/02 职场文书
2016新春团拜会致辞
2015/08/01 职场文书
实习报告范文
2019/07/30 职场文书
八年级作文之我的母亲
2019/12/10 职场文书