多个ajax请求的公共方法

最新推荐文章于 2022-02-14 15:34:37 发布

羽筠

最新推荐文章于 2022-02-14 15:34:37 发布

阅读量2.3k

点赞数

分类专栏： JS AJAX

本文链接：https://blog.csdn.net/qq_16494241/article/details/81947977

版权

JS 同时被 2 个专栏收录

72 篇文章 0 订阅

订阅专栏

AJAX

2 篇文章 0 订阅

订阅专栏

有了ajax请求的公共方法，就省去了每次有ajax请求时都要写一遍ajax语法的完整方法了，只需要传递参数即可

ajax.js：

//test
//var token = 'd697c140c9e5d34af49238aee6f245dd';

var baseURL = "./"; // 必填: api地址

//ajax公共方法
function getAjax( url , type , datajosn , dataType , success , fail ){
	//datajosn.token = datajosn.token ? datajosn.token : token;
	
	$.ajax({
		url: baseURL + url,
		type: type,
		data: datajosn,
		//dataType: "json",
		//dataType: "text",
		dataType: dataType,
		beforeSend:function(){
		},
		success: function (response) {
			if(dataType == 'text'){
				response = eval('(' + response + ')');
			}
			
			//console.log(response);
			
			if (response.code === -1) {
				// 登录状态失效, 重新授权
				
				return false;
			}else if (response.code === -2) {
				//身份不符合，相应操作等
				
				return false;
			} else if (response.code === 0) {
				alert('友情提醒：\n response.code === 0 时的提示信息：\n' + response.msg);
				fail && fail(response.msg);
				return false;
			}
			
			success && success(response);
		},
		error: function (error) { // 请求失败处理
			console.log(error);
			//fail && fail(error);
			alert('本次请求失败');
		}
	});
}
//使用
//getAjax(
//	'url' ,
//	'get 或 post' ,
//	dataJson ,
//	'json 或 text',
//	function(res){
//		//成功
//	} ,
//	function(res){
//		//失败
//		console.log(res);
//	}
//);

ajax_test.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:1100px; margin:20px auto; text-align: center;">
	<div>
		<span data-type="1" data-datatype="json">dataType: "json" =》 显示 - 1</span><!-- class="span_in"-->
		<span data-type="2" data-datatype="json">dataType: "json" =》 显示 - 2</span>
		<span data-type="3" data-datatype="json">dataType: "json" =》 显示 - 3</span>
		<span data-type="4" data-datatype="json">dataType: "json" =》 显示 - 4</span>
	</div>
	<hr  style="margin: 15px 0;">
	<div>
		<span data-type="1" data-datatype="text">dataType: "text" =》 显示 - 1</span><!-- class="span_in"-->
		<span data-type="2" data-datatype="text">dataType: "text" =》 显示 - 2</span>
		<span data-type="3" data-datatype="text">dataType: "text" =》 显示 - 3</span>
		<span data-type="4" data-datatype="text">dataType: "text" =》 显示 - 4</span>
	</div>
</div>
<hr  style="margin: 15px 0;">
<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 src="https://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script src="ajax.js"></script>

<script type="text/javascript">
var canChangeData = true;
$('#changeMenu span').on('click',function(){
	var $this = $(this);
	
	var type = $(this).data('type');
	var dataType = $(this).data('datatype');
	
	if(!$this.hasClass('span_in')){
		if(canChangeData){
			canChangeData = false;
		}else{
			return;
		}
		
		$('#changeMenu span').removeClass('span_in');
		$this.addClass('span_in');
		
		$('#show tbody').html('<tr><td colspan="4" style="color:#d00;font-weight:blod;">数据加载中...</td></tr>');
		
		var dataJson = {
			type : type,
			dataType : dataType,
		};
		
		console.log(dataJson);
		
		getAjax(
			dataType == 'text' ? 'ajax_test_text.php' : 'ajax_test_json.php' ,
			'post' ,
			dataJson ,
			dataType , // json 或 text
			function(res){
				console.log(res);
				
				setTimeout(function(){
					if(!res.list.length){
						$('#show tbody').html('<tr><td colspan="4">暂无数据</td></tr>');
					}else{
						$('#show tbody').html('');
						for(var i in res.list){
							$('#show tbody').append('<tr>\
								<td>' + res.list[i].name + '</td>\
								<td>' + res.list[i].sex + '</td>\
								<td>' + res.list[i].birth + '</td>\
								</tr>');
						}
					}
					
					canChangeData = true;
				},200);
			} ,
			function(res){
				//失败
				console.log(res);
				canChangeData = true;
			}
		);
	}
});
$('#changeMenu span').first().trigger('click');
</script>
</body>
</html>

ajax_test_json.php：

<?php
	$type = $_POST['type'];
	
	//dataType: "json"
	if($type == 1 || $type == 2){
		$resultsData = array(
			'code' => 1,
			'list' => array(
				0 => array(
					'id'    => 1,
					'name'  => $type . ' dataType: "json" 姓名1',
					'sex'   => '男',
					'birth' => '19990120',
				),1 => array(
					'id'    => 2,
					'name'  => $type . ' dataType: "json" 姓名2',
					'sex'   => '女',
					'birth' => '19880320'
				),2 => array(
					'id'    => 3,
					'name'  => $type . ' dataType: "json" 姓名2',
					'sex'   => '男',
					'birth' => '20000520'
				),3 => array(
					'id'    => 4,
					'name'  => $type . ' dataType: "json" 姓名4',
					'sex'   => '女',
					'birth' => '20120820'
				),4 => array(
					'id'    => 5,
					'name'  => $type . ' dataType: "json" 姓名5',
					'sex'   => '男',
					'birth' => '19001220'
				)
			)
		);
	}else if($type == 3){
		$resultsData = array(
			'code' => 0,
			'msg' => '后台返回的错误提示内容',
			'list' => array()
		);
	}else if($type == 4){
		$resultsData = array(
			'code' => 1,
			'msg' => '',
			'list' => array()
		);
	}
	
	echo json_encode($resultsData);
?>

ajax_test_text.php

<?php
	$type = $_POST['type'];
	
	//dataType: "text" => JS处理：data = eval('(' + data + ')');
	if($type == 1 || $type == 2){
		echo "{
			'code':1,
			'list':[
				{
					'id':1,
					'name':'" . $type . "　dataType: \"text\"　姓名1',
					'sex':'男',
					'birth':'19990120',
				},
				{
					'id':2,
					'name':'" . $type . "　dataType: \"text\"　姓名2',
					'sex':'女',
					'birth':'19880320',
				},
				{
					'id':3,
					'name':'" . $type . "　dataType: \"text\"　姓名2',
					'sex':'男',
					'birth':'20000520',
				},
				{
					'id':4,
					'name':'" . $type . "　dataType: \"text\"　姓名4',
					'sex':'女',
					'birth':'20120820',
				},
				{
					'id':5,
					'name':'" . $type . "　dataType: \"text\"　姓名5',
					'sex':'男',
					'birth':'19001220',
				},
			]
		}";
	}else if($type == 3){
		echo "{
				'code':0,
				'msg':'后台返回的错误提示内容',
				'list':[]
			}";
	}else if($type == 4){
		echo "{
				'code':1,
				'msg':'',
				'list':[]
			}";
	}
?>

羽筠

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
多个ajax请求的公共方法

有了ajax请求的公共方法，就省去了每次有ajax请求时都要写一遍ajax语法的完整方法了，只需要传递参数即可ajax.js：//test//var token = 'd697c140c9e5d34af49238aee6f245dd';var baseURL = "./"; // 必填: api地址//ajax公共方法function getAjax( url , type ...
复制链接

扫一扫