多個ajax請求的公共方法
阿新 • • 發佈:2018-12-26
有了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':[] }"; } ?>