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 相关文章推荐
js null undefined 空区别说明
Jun 13 Javascript
Prototype源码浅析 Enumerable部分(二)
Jan 18 Javascript
js禁止document element对象选中文本实现代码
Mar 21 Javascript
jQuery的load()方法及其回调函数用法实例
Mar 25 Javascript
Bootstrap模块dropdown实现下拉框响应
May 22 Javascript
AngularJS应用开发思维之依赖注入3
Aug 19 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
Jan 21 Javascript
jQuery html表格排序插件tablesorter使用方法详解
Feb 10 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
Vue2.0实现将页面中表格数据导出excel的实例
Aug 09 Javascript
Vue-Router进阶之滚动行为详解
Sep 13 Javascript
实例学习JavaScript读取和写入cookie
Jan 29 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
php cookie用户登录的详解及实例代码
2017/01/03 PHP
PHP实现字符串大小写转函数的功能实例
2019/02/06 PHP
JavaScript delete 属性的使用
2009/10/08 Javascript
js 鼠标拖动对象 可让任何div实现拖动效果
2009/11/09 Javascript
js获取或设置当前窗口url参数的小例子
2013/10/14 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
2015/05/07 Javascript
jQuery实现类似老虎机滚动抽奖效果
2015/08/06 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
2016/06/16 Javascript
对js eval()函数的一些见解
2016/08/15 Javascript
原生JS实现图片轮播与淡入效果的简单实例
2016/08/21 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
2016/10/10 Javascript
javascript读取文本节点方法小结
2016/12/15 Javascript
Vue2学习笔记之请求数据交互vue-resource
2017/02/23 Javascript
JS获取字符对应的ASCII码实例
2017/09/10 Javascript
使用 node.js 模仿 Apache 小部分功能
2019/07/07 Javascript
[01:55]2014DOTA2国际邀请赛快报:国土生病 紧急去医院治疗
2014/07/10 DOTA
[36:17]DOTA2上海特级锦标赛 - VGL音乐会全集
2016/03/06 DOTA
python中列表元素连接方法join用法实例
2015/04/07 Python
Python中的列表知识点汇总
2015/04/14 Python
python处理大数字的方法
2015/05/27 Python
Python中的上下文管理器和with语句的使用
2018/04/17 Python
详解python中index()、find()方法
2019/08/29 Python
Python之数据序列化(json、pickle、shelve)详解
2019/08/30 Python
将tensorflow.Variable中的某些元素取出组成一个新的矩阵示例
2020/01/04 Python
在Anaconda3下使用清华镜像源安装TensorFlow(CPU版)
2020/04/19 Python
Python爬虫HTPP请求方法有哪些
2020/06/03 Python
研究生自荐信
2013/10/09 职场文书
仓库管理专业个人的自我评价
2013/12/30 职场文书
大学生职业规划范文:象牙塔生活的四年计划
2014/01/14 职场文书
维修工先进事迹
2014/05/29 职场文书
物业品质提升方案
2014/06/08 职场文书
小学语文教研活动总结
2014/07/01 职场文书
2014年售后服务工作总结
2014/11/18 职场文书
2014年网管工作总结
2014/12/11 职场文书
学前教育见习总结
2015/06/23 职场文书
MySQL创建索引需要了解的
2021/04/08 MySQL