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-$.extend扩展方法使方法参数更灵活
Jan 15 Javascript
JavaScript实现网页图片等比例缩放实现代码及调用方式
Feb 25 Javascript
JavaScript实现继承的4种方法总结
Oct 16 Javascript
jQuery实现图片左右滚动特效
Apr 20 Javascript
第一次接触神奇的Bootstrap表单
Jul 27 Javascript
vue自定义指令实现v-tap插件
Nov 03 Javascript
jQuery生成假加载动画效果
Dec 01 Javascript
JS调用Android、Ios原生控件
Jan 06 Javascript
DOM事件探秘篇
Feb 15 Javascript
浅谈react-native热更新react-native-pushy集成遇到的问题
Sep 30 Javascript
vue2.0+vue-dplayer实现hls播放的示例
Mar 02 Javascript
解决vue-cli3 使用子目录部署问题
Jul 19 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使用curl模拟登录后采集页面的例子
2013/11/04 PHP
详解PHP版本兼容之openssl调用参数
2018/07/25 PHP
Laravel框架数据库迁移操作实例详解
2020/04/06 PHP
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
2006/12/27 Javascript
jQuery find和children方法使用
2011/01/31 Javascript
Jquery为a标签的href赋值实现代码
2013/05/03 Javascript
jQuery函数的等价原生函数代码示例
2013/05/27 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
2013/12/27 Javascript
jQuery判断多个input file 都不能为空的例子
2015/06/23 Javascript
jQuery中prepend()方法使用详解
2015/08/11 Javascript
jquery获取url参数及url加参数的方法
2015/10/26 Javascript
jQuery给指定的table动态添加删除行的操作方法
2016/10/12 Javascript
关于Node.js的events.EventEmitter用法介绍
2017/04/01 Javascript
微信小程序实现自定义picker选择器弹窗内容
2020/05/26 Javascript
Openlayers实现测量功能
2020/09/25 Javascript
python3.5 tkinter实现页面跳转
2018/01/30 Python
Python基于dom操作xml数据的方法示例
2018/05/12 Python
Python 类的私有属性和私有方法实例分析
2019/09/29 Python
python实现字典嵌套列表取值
2019/12/16 Python
python清空命令行方式
2020/01/13 Python
基于python实现FTP文件上传与下载操作(ftp&amp;sftp协议)
2020/04/01 Python
Python基于time模块表示时间常用方法
2020/06/18 Python
python进度条显示之tqmd模块
2020/08/22 Python
解决pycharm导入numpy包的和使用时报错:RuntimeError: The current Numpy installation (‘D:\\python3.6\\lib\\site-packa的问题
2020/12/08 Python
详解用 python-docx 创建浮动图片
2021/01/24 Python
使用 CSS3 中@media 实现网页自适应的示例代码
2020/03/24 HTML / CSS
Speedo速比涛中国官方网站:全球领先泳装运动品牌
2018/04/24 全球购物
作为网站管理者应当如何防范XSS
2014/08/16 面试题
工作疏忽检讨书
2014/01/25 职场文书
学校四群教育实施方案
2014/06/12 职场文书
起诉状范本
2015/05/20 职场文书
行政复议决定书
2015/06/24 职场文书
《红领巾真好》教学反思
2016/02/16 职场文书
《窃读记》教学反思
2016/02/18 职场文书
python单元测试之pytest的使用
2021/06/07 Python
vue项目打包后路由错误的解决方法
2022/04/13 Vue.js