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 分页全选或反选标识实现代码
Aug 09 Javascript
js实现上传图片之上传前预览图片
Mar 25 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
Dec 29 Javascript
node.js学习之base64编码解码
Oct 21 Javascript
js 实现一些跨浏览器的事件方法详解及实例
Oct 27 Javascript
js Canvas绘制圆形时钟教程
Feb 06 Javascript
如何给ss bash 写一个 WEB 端查看流量的页面
Mar 23 Javascript
JavaScript闭包的简单应用
Sep 01 Javascript
判断js数据类型的函数实例详解
May 23 Javascript
微信小程序日历插件代码实例
Dec 04 Javascript
Javascript ParentNode和ChildNode接口原理解析
Mar 16 Javascript
es6函数name属性功能与用法实例分析
Apr 18 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(一)
2012/03/21 PHP
Jquery:ajax实现翻页无刷新功能代码
2013/08/05 Javascript
javascript 表格内容排序 简单操作示例代码
2014/01/03 Javascript
jQuery操作元素css样式的三种方法
2014/06/04 Javascript
Javascript字符串浏览器兼容问题分析
2014/12/01 Javascript
Bootstrap进度条组件知识详解
2016/05/01 Javascript
jQuery事件对象总结
2016/10/17 Javascript
JavaScript中校验银行卡号的实现代码
2016/12/19 Javascript
JavaScript实现替换字符串中最后一个字符的方法
2017/03/07 Javascript
vue cli2.0单页面title修改方法
2018/06/07 Javascript
原生JS实现的简单轮播图功能【适合新手】
2018/08/17 Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
2018/09/25 Javascript
解决vue v-for src 图片路径问题 404
2019/11/12 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
2020/07/22 Javascript
Vue.js暴露方法给WebView的使用操作
2020/09/07 Javascript
[01:25:33]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第二场 12.20
2020/12/23 DOTA
Python简单网络编程示例【客户端与服务端】
2017/05/26 Python
python使用itchat实现手机控制电脑
2018/02/22 Python
Python实现常见的回文字符串算法
2018/11/14 Python
Django项目之Elasticsearch搜索引擎的实例
2019/08/21 Python
Python networkx包的实现
2020/02/14 Python
Macbook安装Python最新版本、GUI开发环境、图像处理、视频处理环境详解
2020/02/17 Python
python_matplotlib改变横坐标和纵坐标上的刻度(ticks)方式
2020/05/16 Python
Pymysql实现往表中插入数据过程解析
2020/06/02 Python
Python 添加文件注释和函数注释操作
2020/08/09 Python
Python获取excel内容及相关操作代码实例
2020/08/10 Python
详解Canvas实用库Fabric.js使用手册
2019/01/07 HTML / CSS
墨西哥网上购物:Linio墨西哥
2016/10/20 全球购物
俄罗斯运动鞋商店:Sneakerhead
2018/05/10 全球购物
英国领先品牌手动工具和电动工具供应商:Tooled Up
2018/11/24 全球购物
美国在线面料商店:Fashion Fabrics Club
2020/01/31 全球购物
.NET里面什么时候需要调用垃圾回收
2015/06/01 面试题
2015年学校食堂工作总结
2015/04/22 职场文书
社区党支部公开承诺书
2015/04/29 职场文书
为Centos安装指定版本的Docker
2022/04/01 Servers