ajax的loading方法,ajax请求成功前loading

1.jqu中比需抖接朋功要朋插ery方式

ajax加载loading图标

提交

$('#btn').click(function(){

$.ajax({

url:$('#test-form').attr('action'), //发送后台的url

type:'post',

data:$('#test-form').serialize(), //序列化表单内容

dataType:'text', //后台返回的数据类型

timeout:15000, //超时时间

beforeSend:function(XMLHttpRequest){

$("#loading").html(""); //在后台返回success之前显示loading图标

},

success:function(data){ //data为后台返回的数据

$("#loading").empty(); //ajax返回成功，清除loading图标

$('#res').html('ajax请求成功！');

}

});

});

2.js方式

xmlhttp.onreadystatechange = function(){

var loadingdiv = document.getelementbyid("loading");

loadingdiv.innerhtml = "loading...";

loadingdiv.style.right = "0";

loadingdiv.style.top = "0";

loadingdiv.style.display = "block";

//load completed

if(xmlhttp.readystate == 4) {

loadingdiv.style.display = "none";

loadingdiv.innerhtml = "";

if(xmlhttp.status == 200) {

var str = xmlhttp.responsetext;

/* do something here ! */

}

else

alert("error!" + "nstatus code is: " + xmlhttp.status + "nstatus text is: " + xmlhttp.statustext);

}

}

本文来源于网络：查看 >https://www.cnblogs.com/cina33blogs/p/6737368.html