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 动态添加按钮实现代码
May 06 Javascript
前台js对象在后台转化java对象的问题探讨
Dec 20 Javascript
详解Javascript 装载和执行
Nov 17 Javascript
Javascript基础教程之函数对象和属性
Jan 18 Javascript
JQuery datepicker 用法详解
Dec 25 Javascript
javascript实现瀑布流动态加载图片原理
Aug 12 Javascript
从零学习node.js之文件操作(三)
Feb 21 Javascript
快速解决处理后台返回json数据格式的问题
Aug 07 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
Sep 16 Javascript
Vue使用预渲染代替SSR的方法
Jul 02 Javascript
vue data对象重新赋值无效(未更改)的解决方式
Jul 24 Javascript
如何基于jQuery实现五角星评分
Sep 02 jQuery
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中使用preg_replace函数匹配图片并加上链接的方法
2013/02/06 PHP
PHP计算日期相差天数实例分析
2016/02/23 PHP
解决PHP 7编译安装错误:cannot stat ‘phar.phar’: No such file or directory
2017/02/25 PHP
php array_reverse 以相反的顺序返回数组实例代码
2017/04/11 PHP
PHP在弹框中获取foreach中遍历的id值并传递给地址栏
2017/06/13 PHP
20款超赞的jQuery插件 Web开发人员必备
2011/02/26 Javascript
基于jquery打造的百分比动态色彩条插件
2012/09/19 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
2013/03/18 Javascript
jquery复选框checkbox实现删除前判断
2014/04/20 Javascript
用原生JS获取CLASS对象(很简单实用)
2014/10/15 Javascript
node.js中的fs.fstat方法使用说明
2014/12/15 Javascript
在JS方法中返回多个值的方法汇总
2015/05/20 Javascript
JQuery validate插件Remote用法大全
2016/05/15 Javascript
JavaScript实现相册弹窗功能(zepto.js)
2016/06/21 Javascript
JS中setTimeout和setInterval的最大延时值详解
2017/02/13 Javascript
Vue.js递归组件构建树形菜单
2017/12/24 Javascript
Webpack的dll功能使用
2018/06/28 Javascript
vscode中vue-cli项目es-lint的配置方法
2018/07/30 Javascript
浅谈webpack4 图片处理汇总
2018/09/12 Javascript
vue项目上传Github预览的实现示例
2018/11/06 Javascript
微信小程序自定义底部导航带跳转功能
2018/11/27 Javascript
基于JavaScript判断两个对象内容是否相等
2020/01/10 Javascript
用Python实现QQ游戏大家来找茬辅助工具
2014/09/14 Python
python笔记:mysql、redis操作方法
2017/06/28 Python
在Pycharm中设置默认自动换行的方法
2019/01/16 Python
tensorflow基于CNN实战mnist手写识别(小白必看)
2020/07/20 Python
简述使用ftp进行文件传输时的两种登录方式?它们的区别是什么?常用的ftp文件传输命令是什么?
2016/11/20 面试题
儿媳婚宴答谢词
2014/01/14 职场文书
行政工作个人的自我评价
2014/02/13 职场文书
工程索赔意向书
2014/08/30 职场文书
社区班子个人对照检查材料思想汇报
2014/10/07 职场文书
2014年房地产销售工作总结
2014/12/01 职场文书
2015年计生工作总结范文
2015/04/24 职场文书
员工考勤管理制度
2015/08/06 职场文书
大学生志愿者心得体会
2016/01/15 职场文书
祝福语集锦:给妹妹结婚的祝福语
2019/12/18 职场文书