学习笔记

  > 关于ajax等待用户提交的解决方案

关于ajax等待用户提交的解决方案

前台页面
<html>
<head>
	<meta charset="utf-8">
	<title>测试ajax</title>
</head>

<style type="text/css">
.bg {
	margin: 0 auto;
	z-index: 999;
	/*display: none;*/
	width: 50%;
	height: 40px;
	line-height: 40px;
}
</style>

<body>
	<button>ajax 测试</button>
	<div class="bg"></div>
</body>

<script type="text/javascript" src="http://www.caisangzi.com/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("button").click(function(){
		$.ajax({    
		    type:"GET",//通常会用到两种：GET,POST。默认是：GET    
		    url:"/ajax/ajax.php/",//(默认: 当前页地址) 发送请求的地址    
		    data: {name:'tanglei'},//预期服务器返回的数据类型。    
		    beforeSend:beforeSend, //发送请求    
		    success:callback, //请求成功    
		    error:error,//请求出错     
		    complete:complete//请求完成    
		});  
	})



	function error(XMLHttpRequest, textStatus, errorThrown){    
	  // 通常情况下textStatus和errorThown只有其中一个有值     
	  $(".bg").append("<p>请求出错啦！</p>");    
	}    
	function beforeSend(XMLHttpRequest){    
	  $(".bg").append("<p>请求处理中...</p>");    
	}    
	function complete(XMLHttpRequest, textStatus){    
	  $(".bg p").remove();    
	}    
	function callback(msg){   
		console.log(msg); 
	  	$(".bg").html('').append("请求成功，回传数:"+msg+"");  
	  // alert('success');  
	}    

});
</script>

</html>


ajax.php php页面
<?php 
echo $_GET['name']."caisangzi";
?>
发布时间：2017-09-25,16:54:34

ajax的使用

作者：澎蠡

让学习成为一种习惯，让知识交流变成一种生活方式。