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中最常看到切最容易迷惑的语法(转)
Oct 29 Javascript
解析jquery获取父窗口的元素
Jun 26 Javascript
javascript页面渲染速度测试脚本分享
Apr 15 Javascript
原生js和jQuery随意改变div属性style的名称和值
Oct 22 Javascript
javascript数组去重方法汇总
Apr 23 Javascript
JS实现选择TextArea内文本的方法
Aug 03 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
Aug 24 Javascript
Vue实现滑动拼图验证码功能
Sep 15 Javascript
vue cli3适配所有端方案的实现
Apr 13 Javascript
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
js实现3D粒子酷炫动态旋转特效
Sep 13 Javascript
原生JavaScript实现弹幕组件的示例代码
Oct 12 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
超外差式晶体管收音机的组装与统调
2021/03/01 无线电
php中使用base HTTP验证的方法
2015/04/20 PHP
Symfony2创建页面实例详解
2016/03/18 PHP
关于php unset对json_encode的影响详解
2018/11/14 PHP
点击弹出层效果&amp;弹出窗口后网页背景变暗效果的实现代码
2014/02/10 Javascript
js图片预加载示例
2014/04/30 Javascript
jquery浏览器滚动加载技术实现方案
2014/06/03 Javascript
PHP结合jQuery实现的评论顶、踩功能
2015/07/22 Javascript
微信支付如何实现内置浏览器的H5页面支付
2015/09/25 Javascript
Jquery zTree 树控件异步加载操作
2016/02/25 Javascript
第七章之菜单按钮图标组件
2016/04/25 Javascript
相册展示PhotoSwipe.js插件实现
2016/08/25 Javascript
BootStrap中Table分页插件使用详解
2016/10/09 Javascript
详解vuex 渐进式教程实例代码
2018/11/27 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
2018/12/13 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
2019/05/15 Javascript
layui实现鼠标移动到单元格上显示数据的方法
2019/09/11 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
2019/10/26 Javascript
基于python(urlparse)模板的使用方法总结
2017/10/13 Python
Python操作MySQL数据库的三种方法总结
2018/01/30 Python
python PyTorch参数初始化和Finetune
2018/02/11 Python
搞清楚 Python traceback的具体使用方法
2019/05/13 Python
使用 tf.nn.dynamic_rnn 展开时间维度方式
2020/01/21 Python
Python实现栈的方法详解【基于数组和单链表两种方法】
2020/02/22 Python
前端面试必备之CSS3的新特性
2017/09/05 HTML / CSS
美国珠宝店:Helzberg Diamonds
2018/10/24 全球购物
NHL官方在线商店:Shop.NHL.com
2020/05/01 全球购物
九州传奇上机题
2014/07/10 面试题
实习报告评语
2014/04/26 职场文书
浪漫婚礼主题活动策划方案
2014/09/15 职场文书
《月球之谜》教学反思
2016/02/20 职场文书
2016年青少年禁毒宣传教育活动总结(学校)
2016/04/05 职场文书
Python基于Tkinter开发一个爬取B站直播弹幕的工具
2021/05/06 Python
聊一聊Redis与MySQL双写一致性如何保证
2021/06/26 Redis
什么是Python装饰器?如何定义和使用?
2022/04/11 Python
SQL Server #{}可以防止SQL注入
2022/05/11 SQL Server