jQuery 我应该使用多个 ajaxStart/ajaxStop 处理
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1061922/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery should I use multiple ajaxStart/ajaxStop handling
提问by davidsleeps
Maybe there is no difference, but is either way better than the other (or perhaps a mysterious 'third' way better than both!)...
也许没有区别，但要么比另一种更好（或者可能比两者都更好的神秘“第三种”方式！）......
first:
第一的：
var startTime;
$(document).ready(function() {
$("#lbl_ajaxInProgress").ajaxStart(function() {
// store the current date/time...
startTime = new Date();
// update labels
$(this).text('Yes');
$("#lbl_ajaxCallTime").text("-");
});
$("#lbl_ajaxInProgress").ajaxStop(function() {
// update labels
$(this).text('No');
$("#lbl_ajaxCallTime").text(myFunctionThatCalculatesTime(startTime));
});
});
second:
第二：
var startTime;
$(document).ready(function() {
$("#lbl_ajaxInProgress").ajaxStart(function() {
// update labels
$(this).text('Yes');
});
$("#lbl_ajaxInProgress").ajaxStop(function() {
// update labels
$(this).text('No');
});
$("#lbl_ajaxCallTime").ajaxStart(function() {
// store the current date/time...
startTime = new Date();
// update labels
$(this).text("-");
});
$("#lbl_ajaxCallTime").ajaxStop(function() {
// update labels
$(this).text(myFunctionThatCalculatesTime(startTime));
});
});
回答by Yehuda Katz
An interesting fact is that ajaxStart, etc. are actually just jQuery events. For instance:
一个有趣的事实是，ajaxStart 等实际上只是 jQuery 事件。例如：
$("#lbl_ajaxInProgress").ajaxStart(function() {
// update labels
$(this).text('Yes');
});
is equivalent to:
相当于：
$("#lbl_ajaxInProgress").bind("ajaxStart", function() {
// update labels
$(this).text('Yes');
});
This means that you can also attach namespaces to ajaxStart/ajaxStop, etc. Which also means that you can do:
这意味着您还可以将命名空间附加到 ajaxStart/ajaxStop 等。这也意味着您可以执行以下操作：
$("#lbl_ajaxInProgress").unbind("ajaxStart ajaxStop");
You could also do:
你也可以这样做：
$("#lbl_ajaxInProgress").bind("ajaxStart.label", function() {
// update labels
$(this).text('Yes');
});
$("#lbl_ajaxInProgress").bind("ajaxStop.label", function() {
// update labels
$(this).text('No');
});
And then:
进而：
$("#lbl_ajaxInProgress").unbind(".label");
Cool, huh?
很酷吧？
回答by Zigri2612
Use Ajax Call This Way ....
以这种方式使用 Ajax 调用....
<!DOCTYPE html>
<html lang="en">
<head>
<title>Shouting Code</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
</script>
</head>
<body>
<button type="submit" class="btn btn-default"
onclick="ajaxRequest(this);">
<i class="fa fa-refresh"></i> Ajax Call
</button>
<script>
function ajaxRequest(id)
{
// ajax request
$.ajax({
type: 'post',
url: '/echo/html/',
data: {
html: '<p>This is echoed the response in HTML format</p>',
delay: 600
},
dataType: 'html',
beforeSend: function() {
// alert("start");
$(id).find('i').addClass('fa-spin');
},
success: function(data) {
alert('Fired when the request is successfull');
},
complete:function(){
// alert("stop");
$(id).find('i').removeClass('fa-spin');
}
});
}</script>
</body>
</html>