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 EasyUI 中文API Layout(Tabs)
Apr 27 Javascript
深入理解JSON数据源格式
Jan 10 Javascript
js实现楼层效果的简单实例
Jul 15 Javascript
js实现图片淡入淡出切换简易效果
Aug 22 Javascript
JS继承之借用构造函数继承和组合继承
Sep 07 Javascript
JS+H5 Canvas实现时钟效果
Jul 20 Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
Jul 30 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
Apr 30 Javascript
layui table 列宽百分比显示的实现方法
Sep 28 Javascript
如何在JavaScript中创建具有多个空格的字符串?
Feb 23 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
Jun 02 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
Dec 04 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
Classes and Objects in PHP5-面向对象编程 [1]
2006/10/09 PHP
如何获得PHP相关资料
2006/10/09 PHP
删除PHP数组中头部、尾部、任意元素的实现代码
2017/04/10 PHP
PHP实现类似题库抽题效果
2018/08/16 PHP
PHP-FPM 的管理和配置详解
2019/02/17 PHP
php 策略模式原理与应用深入理解
2019/09/25 PHP
YII2框架中日志的配置与使用方法实例分析
2020/03/18 PHP
PHP7 windows支持
2021/03/09 PHP
javascript scrollTop正解使用方法
2013/11/14 Javascript
轻松实现Bootstrap图片轮播
2020/04/20 Javascript
JavaScript中的this机制
2016/01/30 Javascript
Bootstrap3学习笔记(二)之排版
2016/05/20 Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
2016/05/25 Javascript
AngularJS控制器之间的数据共享及通信详解
2016/08/01 Javascript
js实现仿购物车加减效果
2017/03/01 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
2018/04/01 Javascript
layer 关闭指定弹出层的例子
2019/09/25 Javascript
JavaScript函数IIFE使用详解
2019/10/21 Javascript
Python中利用sqrt()方法进行平方根计算的教程
2015/05/15 Python
python使用folium库绘制地图点击框
2018/09/21 Python
详解python爬虫系列之初识爬虫
2019/04/06 Python
python通过TimedRotatingFileHandler按时间切割日志
2019/07/17 Python
用python3读取python2的pickle数据方式
2019/12/25 Python
使用Python串口实时显示数据并绘图的例子
2019/12/26 Python
python 判断txt每行内容中是否包含子串并重新写入保存的实例
2020/03/12 Python
TensorFlow2.1.0安装过程中setuptools、wrapt等相关错误指南
2020/04/08 Python
python virtualenv虚拟环境配置与使用教程详解
2020/07/13 Python
Python logging模块handlers用法详解
2020/08/14 Python
CSS3中Transform动画属性用法详解
2016/07/04 HTML / CSS
ShellScript面试题一则-ShellScript编程
2014/03/05 面试题
材料工程专业毕业生求职信
2014/03/04 职场文书
超市促销活动方案
2014/03/05 职场文书
个人自我鉴定总结
2014/03/25 职场文书
2014年妇幼保健工作总结
2014/12/08 职场文书
2019同学聚会主持词
2019/05/06 职场文书
话题作文之诚信
2019/11/28 职场文书