您的位置：首页 > 其它

基础的几个jq ajax 小测试(本文章没有效果，仅供对比学习）

2015-06-24 12:38 831 查看 
点击加载更多”无刷新加载数据
</pre><pre name="code" class="html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

<!-- 第一种“点击加载更多”无刷新加载数据 -->
<!-- 这个情况是有点特殊的，本来页面做的是分页，现在在它的基础上改为ajax -->

<div class="pagination" id="pages_id" style="display:none"><?php echo $output['show_page']; ?></div> <!--  先把原先的分页隐藏 -->
<a alt="<?php echo  MB_SITE_URL;?>/index.php?act=member_points&op=points_logajax&" id="a_load" href="javascript:void(0);">加载更多</a>

<script>
var pages_id=$("#pages_id li:nth-last-child(3) span").text();//获取最后一个分页以确定分页总数
var curpage=1;//设置当前页为1
var  a_load_html=$("#a_load").html();//获取#a_load本来的html内容
if(curpage==pages_id){ //如果当变量curpage等于分页总数
$("#a_load").html("没有更多了"); /*那么#a_load的html内容就改为“没有更多了”*/
}
$("#a_load").click(function(event) { /*当#a_load被点击的时候*/
if(curpage<pages_id){  /*如果变量curpage小于分页总数*/
var url=$(this).attr("alt"); /*获取请求地址*/
$(this).html('<img src="<?php echo MB_TEMPLATES_URL;?>/images/loading.gif" >'); /*请求之前给出一个加载图片*/
curpage++; /*curpage变量自增1*/
$.post(url+"curpage="+ curpage,function(result){/* 开始发出请求  传递数据是当前分页 因为我们是根据分页来取数据，正常我们点击第几页就返回第几页的数据*/
var more_body =$( result ).find( "#more_body" ); /*把获取到的数据转换为jq对象*/
$(".tab_table").append(more_body);/* 把提取后的数据插入到页面中，注意这里返回的是整个html页面*/
$("#a_load").html(a_load_html);/* 把#a_load的html内容改为原来的html内容*/
});
}else{
$("#a_load").html("没有更多了"); /*如果变量curpage总数=分页总数，#a_load的内容就改为“没有更多了”*/
}
});
</script>

</body>
</html>


无刷新动态加载数据，滚动条加载

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无刷新动态加载数据，滚动条加载</title>
<script>
$(function(){
var winH=$(window).height();
var i=1;
$(window).scroll(function(event) {
var  pageH=$(document.body).height();
var  scollT=$(window).scrollTop();
var cha=(pageH-winH)/winH;
if(cha<0.02){ /*当差值小于0.02的时候开始异步请求*/

//里面换成你要数据即可
$.getJSON('ajax.php', {page: i}, function(json) {
if(json){
var str=" ";
$.each(json,function(index, array) {
var str = "<div class="single_item"><div class="element_head">";
var str=str+"<div class='name'>"+array['name']+"</div></div>";
$("#container").append(str);

});
i++; /*每请求一次， i自增作为请求参数传递给后台程序传回相应的页面数据*/
}else{
$(".nodata").show().html("别滚了，到底部了。。。。");
return false;

}
});
}
});

})

/*
第二种*/

$(function(){

function last(){
var id=$(".mess_box").attr("id");
$("load").html('<img src="small_load.gif">');
$.post("ajax.php?action=get&last_msg_id="+ID,function(data){
if(data!=""){
$(".mess_box").after(data);
}
$("load").empty();
})

}
$(window).scroll(function(event) {
if($(window).scrollTop()==$(document).height()-$(window).height()){last();
}
});

})
</script>
<div id="<?php echo $msgID; ?>"  class="message_box" ></div>

</head>
<body>

</body>
</html>




无刷新删除记录

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无刷新删除记录</title>

<script>
$(function(){
$("#load").hide(); /*先隐藏加载的图片gif*/

})

$(function(){
$(".delete").click(function(event) { /*删除按钮被点击的时候*/
$("#load").fadeIn(); /*显示加载图片*/
var commentcontainer=$(this).parent(); /*获取当前连接所在的容器*/
var id=$(this).attr("id");
var string="id"+id; /*作为请求参数传给，告知后端要删除的数据*/
$.ajax({
type:"post",
url:"ajax.php",
data:string,
cache:false, /*不缓存*/
success:function(){ /*成功删除后，移除记录*/
commentcontainer.remove();
}) ;
$("#load").fadeOut();  /*隐藏加载图片*/
}
});
return false;
});
})

</script>

<!-- 第二种删除信息：删除功能也在后台写好了的 -->
<a rel="index.php?act=member_address&op=address&id=<?php echo $address['address_id'];?>" href="javascropt:void(0)" class="btn-red del_ajax" ><i class="icon-trash"></i><p><?php echo $lang['nc_del_ '];?></p></a>
<script>

$(".del_ajax").click(function(event) { /*删除按钮被点击的时候*/
var ajaxt_focus=$(this) ; /*把当前点击按钮赋值给变量ajaxt_focus*/
var ajax_url=$(this).attr("rel");
$.ajax({
url:ajax_url,
type:"post",
success:function(msg){
ajaxt_focus.parents("tr").remove();

}
})
});
</script>

</head>
<body>

</body>
</html>


简单例子

请在服务器环境测试



例子一：get异步获取内容

php:传回的是json数据

<?php
// get 方法提交
$arr = array(
'name' => 'Jack',
'sex' => 'male',
'age' => 20,
'id' => 100,
);
$action = $_GET['act'];
if($action == 'get'){
echo json_encode($arr);
}
?>


html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>	</title>
</head>
<body>
<p class="content"></p>
<a class="click" href="javascript:void(0);">get异步获取内容</a>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(document).ready(function(){
$('.click').click(function() {
//get方法
$.get('test.php',{act:"get"}, function(data) {
var str = 'The user name is ' + data.name + ',\n';
str += 'sex is ' + data.sex + ',\n';
str += 'age is ' + data.age + ',\n';
str += 'ID is ' + data.id;
$('.content').append(str);
}, 'json');
})
});
</script>
</body>
</html>


点击前后效果：





例子二:Post向服务器传数据

php

<?php
$data = array(
'name' => $_POST['name'],
'sex' => $_POST['sex'],
'id' => $_POST['id'],
'age' => $_POST['age'],
);
echo file_put_contents('abc.txt', $data, FILE_APPEND);
?>
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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Post</title>
<style>

.submit {
width: 80px;height: 26px;background: #ccc;padding: 10px;border: 1px solid #999; color: #333; cursor: pointer;
}
.reset {display: none;}
</style>
</head>
<body>
<div class="form">
<form action="">
<p><span>姓名：</span><input type="text" name="name" /></p>
<p><span>性别：</span><input type="text" name="sex" /></p>
<p><span>ID：</span><input type="text" name="id" /></p>
<p><span>年龄：</span><input type="text" name="age" /></p>
<input class="reset" type="reset" />
</form>
<span class="submit">提交</span>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(document).ready(function(){
$('.submit').click(function() {
var url = 'post.php';
var data = {
name : $('input[name=name]').val(),
sex : $('input[name=sex]').val(),
id : $('input[name=id]').val(),
age : $('input[name=age]').val(),
};
$.post(url, data, function(data) {
if(data) {
alert('写入成功啦！');
$('input[type=reset]').click();
}
}, 'json');
});
});
</script>
</body>
</html>


点击前后效果



内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航