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 相关文章推荐
一页面多XMLHttpRequest对象
Jan 22 Javascript
js 返回时间戳所对应的具体时间
Jul 20 Javascript
JS判定是否原生方法
Jul 22 Javascript
js图片轮播手动切换特效
Jan 12 Javascript
Mongoose经常返回e11000 error的原因分析
Mar 29 Javascript
js和jquery中获取非行间样式
May 05 jQuery
ionic2屏幕适配实现适配手机、平板等设备的示例代码
Aug 11 Javascript
express如何使用session与cookie的方法
Jan 30 Javascript
axios取消请求的实践记录分享
Sep 26 Javascript
手把手教您实现react异步加载高阶组件
Apr 07 Javascript
vue+element UI实现树形表格
Dec 29 Vue.js
vue 中 get / delete 传递数组参数方法
Mar 23 Vue.js
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
十大“创意”战术!
2020/03/04 星际争霸
在线短消息收发的程序,不用数据库
2006/10/09 PHP
php实现多张图片上传加水印技巧
2013/04/18 PHP
ThinkPHP基于PHPExcel导入Excel文件的方法
2014/10/15 PHP
Ubuntu12下编译安装PHP5.3开发环境
2015/03/27 PHP
10个对初学者非常有用的PHP技巧
2016/04/06 PHP
php 修改上传文件大小限制实例详解
2016/10/23 PHP
PHP对象、模式与实践之高级特性分析
2016/12/08 PHP
PHP jpgraph库的配置及生成统计图表:折线图、柱状图、饼状图
2017/05/15 PHP
JQuery实现自定义对话框的代码
2008/06/15 Javascript
javascript获取元素离文档各边距离的方法
2015/02/13 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
2015/03/09 Javascript
javascript实现继承的简单实例
2015/07/26 Javascript
IE下JS保存图片的简单实例
2016/07/15 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
2016/09/21 Javascript
纯原生js实现table表格的增删
2017/01/05 Javascript
jQuery插件form-validation-engine正则表达式操作示例
2017/02/09 Javascript
JavaScript中三种常见的排序方法
2017/02/24 Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
2017/05/20 jQuery
js实现敏感词过滤算法及实现逻辑
2018/07/24 Javascript
Vue配合iView实现省市二级联动的示例代码
2018/07/27 Javascript
jQuery选择器之层次选择器用法实例分析
2019/02/19 jQuery
vue 在服务器端直接修改请求的接口地址
2020/12/19 Vue.js
[06:07]刀塔密之二:攻之吾命受之吾幸
2014/07/03 DOTA
CentOS中升级Python版本的方法详解
2017/07/10 Python
python中实现精确的浮点数运算详解
2017/11/02 Python
浅谈python脚本设置运行参数的方法
2018/12/03 Python
Python如何筛选序列中的元素的方法实现
2019/07/15 Python
解决Jupyter NoteBook输出的图表太小看不清问题
2020/04/16 Python
来自全球大都市的高级街头服饰:Pegador
2018/01/03 全球购物
2014年小学国庆节活动方案
2014/09/16 职场文书
小学四年级学生评语
2014/12/26 职场文书
iPhone13再次曝光
2021/04/15 数码科技
python字符串常规操作大全
2021/05/02 Python
MySQL中的隐藏列的具体查看
2021/09/04 MySQL
python lambda 表达式形式分析
2022/04/03 Python