多个ajax请求的公共方法

有了ajax请求的公共方法，就省去了每次有ajax请求时都要写一遍ajax语法的完整方法了，只需要传递参数即可
//ajax公共方法 - 使用
getAjax( '对应要获取数据的url' , { id : 1 , type : 'xxx' , ... } , function(resultsData){
   //处理返回的JSON数据 resultsData
});
//ajax公共方法
function getAjax( url , dataJson , callback ){
   $.ajax({
       url: url,
       type: "post",
       data: dataJson,
       dataType: "text",
//       dataType: "json",
       beforeSend:function(){
       },
       success: function (data) {
           data = eval('(' + data + ')');

           callback(data);
       },
       error: function (data) {
           //getAjax(url , dataJson);
       }
   });
}

demo案例HTML：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX公共方法demo</title>
<style>
table{ text-align:center; background-color:#ddd; border-spacing:1px;}
th , td{ padding:5px; background-color:#fff;}

span{ display:inline-block; padding:10px 20px; border-radius:10px; border:#ddd solid 1px; cursor:pointer;}
.span_in{ color:#fff; background-color:#03F;}
</style>
</head>

<body>

<div id="changeMenu" style="width:1000px; margin:20px auto;">
	<span data-type="1">显示1</span><!-- class="span_in"-->
	<span data-type="2">显示2</span>
	<span data-type="3">显示3</span>
	<span data-type="4">显示4</span>
</div>

<div style="width:1000px; margin:20px auto;">
    <table id="show" width="100%" border="0" cellspacing="0" cellpadding="0">
    	<thead>
        <tr>
            <th width="33.333%">姓名</th>
            <th width="33.333%">性别</th>
            <th width="33.333%">出生日期</th>
        </tr>
        </thead>
        <tbody>
            <!--<tr>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            </tr>-->
        </tbody>
    </table>
</div>

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
var canChangeData = true;
$('#changeMenu span').on('click',function(){
	var $this = $(this);
	var type = $(this).data('type');
	if(!$this.hasClass('span_in')){
		if(canChangeData){
			canChangeData = false;
		}else{
			return;
		}
		$this.addClass('span_in').siblings().removeClass('span_in');
		$('#show tbody').html('<tr><td colspan="4" style="color:#d00;font-weight:blod;">数据加载中...</td></tr>');
		
		getAjax( 'ajax_test.php' , { type : type } , function(resultsData){
			if(resultsData.status == 1){
				setTimeout(function(){
					
					if(!resultsData.list.length){
						$('#show tbody').html('<tr><td colspan="4">暂无数据</td></tr>');
					}else{
						$('#show tbody').html('');
						for(var i in resultsData.list){
							$('#show tbody').append('<tr>\
														<td>' + resultsData.list[i].name + '</td>\
														<td>' + resultsData.list[i].sex + '</td>\
														<td>' + resultsData.list[i].birth + '</td>\
													  </tr>');
						}
					}
					
					canChangeData = true;
				},500);
			}else{
				setTimeout(function(){
					$('#show tbody').html('<tr><td colspan="4" style="color:#d00;font-weight:blod;">' + resultsData.msg + '</td></tr>');
					canChangeData = true;
				},500);
			}
		});
		
	}
});
$('#changeMenu span').first().trigger('click');

///////////////////////////////////////////////////////////////////////////////////////

//ajax公共方法
function getAjax( url , dataJson , callback ){
	$.ajax({
		url: url,
		type: "post",
		data: dataJson,
		dataType: "text",
//		dataType: "json",
		beforeSend:function(){
		},
		success: function (data) {
			data = eval('(' + data + ')');
			
			callback(data);
		},
		error: function (data) {
			//getAjax(url , dataJson);
		}
	});
}
</script>
</body>
</html>

demo案例PHP：

<?php
	$type = $_POST['type'];
	
	//dataType: "json"
//	$resultsData = array(
//						'status' => 1,
//						'list' => array(
//									0 => array(
//										'id'    => 1,
//										'name'  => $type . ' 姓名1',
//										'sex'   => '男',
//										'birth' => '19990120',
//									),1 => array(
//										'id'    => 2,
//										'name'  => $type . ' 姓名2',
//										'sex'   => '女',
//										'birth' => '19880320'
//									),2 => array(
//										'id'    => 3,
//										'name'  => $type . ' 姓名2',
//										'sex'   => '男',
//										'birth' => '20000520'
//									),3 => array(
//										'id'    => 4,
//										'name'  => $type . ' 姓名4',
//										'sex'   => '女',
//										'birth' => '20120820'
//									),4 => array(
//										'id'    => 5,
//										'name'  => $type . ' 姓名5',
//										'sex'   => '男',
//										'birth' => '19001220'
//									)
//							)
//						);
//	echo json_encode($resultsData);
	
	//dataType: "text" => JS处理：data = eval('(' + data + ')');
	if($type == 1 || $type == 2){
		echo "{
				'status':1,
				'list':[
					{
						'id':1,
						'name':'" . $type . "　姓名1',
						'sex':'男',
						'birth':'19990120',
					},
					{
						'id':2,
						'name':'" . $type . "　姓名2',
						'sex':'女',
						'birth':'19880320',
					},
					{
						'id':3,
						'name':'" . $type . "　姓名2',
						'sex':'男',
						'birth':'20000520',
					},
					{
						'id':4,
						'name':'" . $type . "　姓名4',
						'sex':'女',
						'birth':'20120820',
					},
					{
						'id':5,
						'name':'" . $type . "　姓名5',
						'sex':'男',
						'birth':'19001220',
					},
				]
			}";
	}else if($type == 3){
		echo "{
				'status':0,
				'msg':'参数错误，获取数据失败',
				'list':[]
			}";
	}else if($type == 4){
		echo "{
				'status':1,
				'msg':'',
				'list':[]
			}";
	}
	
?>

多个ajax请求的公共方法

猜你喜欢