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 JavaScript获取Url参数,src属性参数
Mar 09 Javascript
TinyMCE 新增本地图片上传功能
Nov 05 Javascript
原生js 秒表实现代码
Jul 24 Javascript
jQuery获得子元素个数的方法
Apr 14 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
Apr 06 Javascript
jQuery实现的图片轮播效果完整示例
Sep 12 Javascript
Bootstrap基本组件学习笔记之导航(10)
Dec 07 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
Feb 20 Javascript
jquery单击文字或图片内容放大并居中显示
Jun 23 jQuery
详解Vue微信公众号开发踩坑全记录
Aug 21 Javascript
详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
Aug 30 Javascript
使用Vue.observable()进行状态管理的实例代码详解
May 26 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中的超全局变量
2006/10/09 PHP
php 文章采集正则代码
2009/12/28 PHP
浅析PHP中strlen和mb_strlen的区别
2014/08/31 PHP
php实现四舍五入的方法小结
2015/03/03 PHP
PHP程序中使用adodb连接不同数据库的代码实例
2015/12/19 PHP
详解Yii2.0使用AR联表查询实例
2017/06/16 PHP
ThinkPHP 5.1 跨域配置方法
2019/10/11 PHP
YII2框架中actions的作用与使用方法示例
2020/03/13 PHP
如何让动态插入的javascript脚本代码跑起来。
2007/01/09 Javascript
JavaScript中将一个值转换为字符串的方法分析[译]
2012/09/21 Javascript
实现React单页应用的方法详解
2016/08/02 Javascript
AngularJS基础 ng-repeat 指令简单示例
2016/08/03 Javascript
浅谈jQuery双事件多重加载的问题
2016/10/05 Javascript
Jquery表单验证失败后不提交的解决方法
2016/10/18 Javascript
JavaScript创建防篡改对象的方法分析
2018/12/30 Javascript
ES10的13个新特性示例(小结)
2019/09/23 Javascript
vue实现给div绑定keyup的enter事件
2020/07/31 Javascript
elementui实现预览图片组件二次封装
2020/12/29 Javascript
Python的迭代器和生成器使用实例
2015/01/14 Python
Python入门教程之运算符与控制流
2016/08/17 Python
Django 拆分model和view的实现方法
2019/08/16 Python
Django ORM判断查询结果是否为空,判断django中的orm为空实例
2020/07/09 Python
Subside Sports德国:足球球衣和球迷商品
2019/06/08 全球购物
回门宴答谢词
2014/01/13 职场文书
社区健康教育工作方案
2014/06/03 职场文书
市政工程技术专业自荐书
2014/07/06 职场文书
大学同学会活动方案
2014/08/20 职场文书
纪念九一八事变演讲稿:勿忘国耻
2014/09/14 职场文书
2014年村计划生育工作总结
2014/11/14 职场文书
学生上课迟到检讨书
2015/01/01 职场文书
2015年学校综合治理工作总结
2015/07/20 职场文书
培训后的感想
2015/08/07 职场文书
大学军训心得体会800字
2016/01/11 职场文书
利用Python实现Picgo图床工具
2021/11/23 Python
Java数组详细介绍及相关工具类
2022/04/14 Java/Android
SQL中的连接查询详解
2022/06/21 SQL Server