anlinmb提供了更方便的ajax函数:anlin.ajax({参数对象}),它可以防止重复请求以及设置超时时间,并且可以更方便的支持表单提交,文件上传以及指定文件类型

普通的GET请求数据

<div id="anlin-ajax">请求成功后此区域会显示数据</div>
<button type="button">点我发送GET请求</button>
<script>
  $("button").click(function(){
 anlin.ajax({
url:'/xxx.php?w=111',
dataType:'html',
time:30000,
f:function(aa){
$('#anlin-ajax').text(aa);//成功获取数据
},
error:function(){alert('加载出错请重试');}
});
  });
</script>

post表单与文件上传

我们提供了一个文件选择器函数:anlin.show(参数1,参数2,{参数3对象})
使用它时您必须确保form内拥有id=file的文件选择器

完整示例:

<style>
button{margin-left:10px;margin-top:5px;width:100px;height:35px;line-height:35px;text-align:center;}
</style>
<form method="post" enctype="multipart/form-data" id="form-id">
<!--表单数据-->
<input name="name" value="wodeid">
<!--设置一个隐藏的文件选择框并添加id=file 此id必须为file-->
<input id="file" type="file" name="file[]" style="display:none;">
<!--选择文件,如果您不需要上传文件只需将以下代码删除即可-->
<div class="fimg">
<div id="imgid"></div>
<!--设置anlin.show参数3为限制上传2个文件-->
<li onclick="anlin.show('form-id','#imgid',{filen:2,h:this});"><a style="font-size:300%;">＋</a></li>
</div>
<!--提交上传-->
<button style="" type="button" onclick="anlin.ajax({
url:'/xxx.php',
h:this,
formId:'form-id',
dataType:'html',
time:50000,
f:function(aa){alert(aa);},
error:function(){alert('加载出错请重试');}
});">提交</button>
</form>
<br>
<p>下面将实现一个更棒的文件上传效果,提交后显示loading和文件上传进度</p>
<br>
<form method="post" enctype="multipart/form-data" id="form-id2">
<!--表单数据-->
<input name="name" value="维森莫">
<!--设置一个隐藏的文件选择框并添加id=file 此id必须为file-->
<input id="file" type="file" name="file[]" style="display:none;">
<!--选择文件,如果您不需要上传文件只需将以下代码删除即可-->
<div class="fimg">
<div id="imgid2"></div>
<li onclick="anlin.show('form-id2','#imgid2');"><a style="font-size:300%;">＋</a></li>
</div>
<!--提交上传-->
<button id="bttt" type="button">提交</button>
</form>

<script>
  $("#bttt").click(function(){
anlin.fs('<center><img src="https://loading.io/mod/spinner/dual-ball/index.svg"><div id="lofile">加载中...</div></center>');
anlin.ajax({
url:'/xxx.php',
h:this,
formId:'form-id2',
dataType:'html',
time:50000,
file_load:function (e) {
var progressRate = (e.loaded / e.total) * 100 + '%';
              
$('#lofile').html('文件上传中('+progressRate+')');
            },
f:function(aa){anlin.fs(false);alert(aa);},
error:function(){
anlin.fs(false);
alert('加载出错请重试');}
});

});
</script>

文件类型与文件预览样式设置,下面例子中限制了只允许选择zip和rar后缀的文件,并通过CSS设置预览图标或文本

CSS样式设置自定义后缀文件预览图标方法:
.anlin-file-文件后缀名::before {
content:' ';
display:block;
    width: 80px;
    height: 80px;
    background:url(/xxx.png);//图标地址
    background-size:cover;
}

<style>
button{margin-left:10px;margin-top:5px;width:100px;height:35px;text-align:center;}
/**CSS设置非图片文件预览图标或文本**/
.anlin-file-zip::before {
/**设置zip图标**/
content:' ';
display:block;
    width: 70px;
    height: 70px;
    background:url(https://cdn0.iconfinder.com/data/icons/leto-file-formats/64/zip_compressed_file_format-128.png);
    background-size:cover;
font-size:110%;
}
.anlin-file-rar::before {
content:"rar压缩包";
font-size:110%;
}
</style>
<p>我们现在设置了zip文件的图标,选择zip文件看看效果</p>
<form method="post" enctype="multipart/form-data" id="form-id">
<input id="file" type="file" name="file[]" style="display:none;">
<div class="fimg">
<div id="imgid"></div>
<li onclick="anlin.show('form-id','#imgid',{type:['zip','rar']});"><a style="font-size:300%;">＋</a></li>
</div>
<!--提交上传-->
<button style="" type="button" onclick="anlin.ajax({
url:'/xxx.php',
h:this,
formId:'form-id',
dataType:'html',
time:50000,
f:function(aa){alert(aa);},
error:function(){alert('加载出错请重试');}
});">提交</button>
</form>

php后台接收上传文件示例:

$file=@$_FILES['file'];
$co=@count($file['name']);
for($i=0;$i<=$co-1;$i++){
if($file['name'][$i]!=''&&$file['error'][$i]==0){
echo $file['name'][$i];
echo "\n";
move_uploaded_file($file["tmp_name"][$i], "upload/" . $file["name"][$i]);
echo "文件存储在: " . "upload/" . $file["name"][$i];
}
}

终止请求

anlin.ajax每次请求都会返回一串唯一标识,可以通过anlin.xajax();来终止请求,但最终结果可能只是跳过成功后的函数运行

<div id="anlin-ajax">请求成功后此区域会显示数据</div>
<button type="button">点我请求数据,立即终止请求并运行错误</button>
<script>
  $("button").click(function(){
var aq=anlin.ajax({
url:'/xxx.php?w=111',
dataType:'html',
time:30000,
f:function(aa){
$('#anlin-ajax').text(aa);//成功获取数据
},
error:function(){$('#anlin-ajax').text('请求出错');}
});
anlin.xajax(aq);//终止请求
  });
</script>