[英]how do you do ajax call in javascript
我正在構建一個儀表板,該儀表板的頂部將顯示每月,每周和實時數據的按鈕。
<div class="zoom_controls">
<a class="profile" id="monthly_data" href="#" data-chart="line" data-range="6m">Monthly</a>
<a class="profile" id="weekly_data"href="#" data-chart="line" data-range="3m">Weekly</a>
<a class="profile" id="real_time" href="#" data-chart="line" data-range="1m">Real Time</a>
</div>
<div class="main" id="chart" style="width:700px; height:300px;"></div>
這是調用php文件以獲取數據並將其插入到highcharts中的javascript:
function cpu_current() {
//current_cpu_data.php retrieves the data from a flat file
$.getJSON('current_cpu_data.php', function(data) {
var chart = new Highcharts.StockChart({
chart: {
borderColor: '#98AFC7',
borderRadius: 20,
borderWidth: 1,
renderTo: 'chart',
type: 'line',
marginRight: 10,
zoomType: 'x'
},
exporting: {
enabled: true
},
legend: {
enabled: true,
backgroundColor: '#FCFFC5',
borderColor: 'black',
borderWidth: 2,
width: 500,
shadow: true
},
plotOptions: {
series: {
lineWidth:1
}
},
rangeSelector: {
enabled:false
},
scrollbar: {
enabled: false
},
navigator : {
enabled : false
},
xAxis: {
gridLineColor: '#EEEEEE',
gridLineWidth: 1
},
yAxis: { // Primary yAxis
labels: {
style: {
color: 'blue'
}
},
gridLineColor: '#EEEEEE',
gridLineWidth: 0,
tickInterval: 20,
min:0,
max:100,
plotLines : [{
value : 70,
color : '#FF3300',
dashStyle : 'line',
width : 1,
label : {
text : 'Threshold=70%',
align: 'right',
style: {
fontWeight: 'bold'
}
}
}],
title: {
text: '% CPU Utilization',
style: {
color: 'blue'
}
}
},
credits: {
enabled: false
},
title: {
text: 'CPU',
style: {
color: '#333000',
fontSize: '14px'
}
},
subtitle: {
text: '10 minute peaks in last 24 hours'
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y} </b><br>',
valueDecimals: 2
},
series:data
});
});
}
在這里,我可以使用jquery click事件在不同的標簽之間進行切換:
$("#monthly_data").click(function() {
hmms_cpu_current();
});
$("#weekly_data").click(function() {
hmms_cpu_weekly();
});
$("#real_time").click(function() {
cpu_current();
});
我的問題是,當用戶僅對real_time感興趣並單擊並將其保留在那里時,我需要cpu_current()通過ajax調用自行更新。 如果用戶單擊monthly_data並將其留在那里,則需要停止cpu_current()。
給定上面的代碼怎么辦?
如果您使用的是MVC模型,則可以通過特定javascript函數的onclick方法使用這樣的Ajax,
<script type="text/javascript">
function hmms_cpu_current() {
$.ajax({
type: 'GET',
async: false,
url: 'yourcontroller/youraction',
contentType: "application/json; charset=utf-8",
dataType: 'json',
success: function (data) {
var obj = $.parseJSON(data);
$.each(data, function (i, item) {
alert(item.text) // do your stuff with returned value
});
},
error: function () {
output.text('There was an error loading the data.');
}
});
}
我將添加一個Javascript Timer()或setTimeout()來重新發送ajax調用並更新頁面。
您還可以為用戶提供執行此操作的選項,並將其放入功能中。
如果您給計時器一個ID,您也可以停止並啟動它。
修改所有函數以返回jqXHR
如下所示:
function cpu_current() {
//$.getJSON return jqXHR, you could use it to abort ajax.
return $.getJSON('current_cpu_data.php', function(data) {
//All your code
}
您的事件處理程序中的使用abort
:
var currentjqXHR;
$("#monthly_data").click(function() {
if (currentjqXHR){
currentjqXHR.abort();//abort current ajax
}
currentjqXHR = hmms_cpu_current();
});
$("#weekly_data").click(function() {
if (currentjqXHR){
currentjqXHR.abort();//abort current ajax
}
currentjqXHR = hmms_cpu_weekly();
});
$("#real_time").click(function() {
if (currentjqXHR){
currentjqXHR.abort();//abort current ajax
}
currentjqXHR = cpu_current();
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.