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

最新推荐文章于 2023-06-15 10:20:03 发布

吴杼恩

最新推荐文章于 2023-06-15 10:20:03 发布

阅读量787

点赞数 1

分类专栏： jquery JavaScript 相关知识文章标签： ajax

本文链接：https://blog.csdn.net/qianqianyixiao1/article/details/46620569

版权

JavaScript 相关知识同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

jquery

16 篇文章 0 订阅

订阅专栏

点击加载更多”无刷新加载数据

</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>

点击前后效果

吴杼恩

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基础的几个jq ajax 小测试(本文章没有效果，仅供对比学习）

Document /index.php?act=member_points&op=points_logajax&" id="a_load" href="javascript:void(0);">加载更多var pages_id=$("#pages_id li:nth-last-child(3) span").text();//获取最后一个分页以确定分页总数 var c
复制链接

扫一扫