视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
菜鸟蔡之Ajax复习第二篇(JQuery中的load()方法实现Ajax功能)
2020-11-27 22:52:25 责编:小采
文档

在上一篇博客中写到的是在传统的Javascript中使用XMLHttpRequest对象异步加载数据的,唉,童鞋.......看到那些代码是不是有点头疼啊!呵呵......不仅是你,我都有点反感了,不仅要判断浏览器,还要......反正就是有一大坨代码,看起来毫不爽,现在,让我们忘记拿一大坨吧(记住:这里不是真的忘记哦!好像许多公司面试Ajax这块内容时,都会让你不用拖控件的方式写一个原生态的Ajax程序呢,所以它的重要性,你懂的!)!好了,说了这么多,应该“忘记”了吧你!呵呵......见证奇迹的时刻到了(呜呜......不要说我在吹牛啊!这不是我说的,这刘谦说的,有什么事找他啊!)!在JQuery中,使用load()方法就可以轻松的实现获取异步加载数据的功能了,现在让几行代码代替这一大坨吧!(首先, 还是和以前一样,先新建1.htm和2.htm两个页面吧!)

在1.htm中的代码如下:
代码如下:


<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> //注意:这个可别忘记加啊!
<script type="text/javascript">
$(function () {
$("#btnGet").click(function () {//按钮的点击事件
$("#divMsg").load("2.htm");//调用load()方法 ; load语法格式:load(url,[data],[callback]):其中url为被加载的页面地址;可选参数data为要发送到服 //务器的数据,其格式是一个key/value;callback为加载成功后,返回至加载页面的回调函数
})
}) //这里一定要注意了哦!括号一定要 “ 成对的 同时 ”打好哦,当你写的代码多的时候,在这个点上一不小心就会出错的!
</script>
</head>
<body>
<input type="button" id="btnGet" value="获取数据" />
<div id="divMsg">
</div>
</body>
</html>

在2.htm中的代码如下:

代码如下:


<head>
<title></title>
</head>
<body>
姓名:小菜<br />
性别:男<br />
邮箱:cj1161059871@163.com
</body>
</html>

写完了,在这里希望大侠们不要见笑啊!因为我本来就是菜牛蔡,写出来的东西就有点二了,只当给自己复习一下吧!

下载本文
显示全文
专题