jquery中的ajax使用

来源：互联网发布：2016年网络大电影数据编辑：程序博客网时间：2024/06/05 09:52

一、让我们先来看个简单的应用——点击加载另一个页面（txt.html）。js文件记得自己去下个

⑴txt.html

<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="">
我是一个文本区域。
</div>
</body>
</html>

⑵<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jq.js">

</script>
<script type="text/javascript">
$(function(){
var jBtn=$('#btn1');
var jCon=$('#content');
var loaded=false;//加载状态
jBtn.click(function(){

if(jCon.is(':visible')){
jCon.slideUp();//向上隐藏
}else{
if(!loaded){/*判断加载状态，即首次加载文件，之后不用再次加载*/
jCon.load('txt.html');/*请求加载txt文件*/
loaded=true;
}

jCon.slideDown();//向下显示
}
/*jCon.toggle();jq自带的易用型开关*/
});
});
</script>
</head>
<body>
<button id="btn1">点击</button>
<div id="content" style="display: none;">

</div>
</body>
</html>

⑶调试在浏览器F12的network，这个不用我再说了吧。最好要对比一下不设置loaded的加载次数情况，这样才能明白loaded的作用。

二、再来一个简单的应用——鼠标移入头像加载个人信息。

⑴个人信息.html(头像图片自己找个，我用的是曹操)

<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#myinfo{border: 1px solid black;
width:400px; height: 250px;}
#myinfo .head{border-bottom: 1px solid black;height: 140px; text-align: center; background: aquamarine;}
#myinfo .head img{width: 90px; height: 90px;}
#myinfo .head .sign{ text-align: center; display: block;}
#myinfo .info{ text-align: center;}
</style>
</head>
<body>
<div id="myinfo">
<div class="head">
<img src="img/cc.jpg"/>
<span class="sign">
签名：宁教我负天下人，休教天下人负我！
</span>
</div>
<div class="info">
<div class="">
<a href="">关注：2k</a>|<a>粉丝：1k</a>|<a>微博:10</a>

</div>
<div class="addr">
江苏南通
</div>
</div>
</div>
</body>
</html>

⑵和一基本类似，有点小变动，自己体会。

<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#myhead{
width: 50px; height: 50px;
border-radius: 20px;
background: red;
margin-left: 30%;
margin-top: 40%;
position: relative;
}
.showhide{
/*border: 1px solid red; width: 100px; height: 100px;*/
position: absolute; top: -250px;left:-250%;display: none;
}
</style>
<script type="text/javascript" src="js/jq.js">
</script>
<script type="text/javascript">
$(function(){
var jHead=$("#myhead");
var jInfo=$(".showhide");
var loaded=false;
//鼠标移入先加载，并改loaded，再显示。
//鼠标移出，隐藏
jHead.on('mouseenter',function(){

if(!loaded){
jInfo.load('myinfo.html');
loaded=true;
}
jInfo.show();

});
jHead.on('mouseleave',function(){
jInfo.hide();
});
});
</script>
</head>
<body>
<div id="myhead">
<div class="showhide"></div>
</div>
</body>
</html>

⑶未完待续有空在更

阅读全文

0 0