如何在javascript中调用ajax

我正在构建一个仪表板，上面有按钮，用于每月、每周和实时数据

<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>

我的问题是，当用户只对实时感兴趣并单击并将其留在那里时，我需要cpu\u current（）通过ajax调用自行更新。如果用户单击月度数据并将其保留在那里，则cpu\u current（）需要停止

---

如果有上面的代码，该怎么做？

我会添加一个Javascript计时器（）或setTimeout（），它会重新发送ajax调用并更新页面

您还可以为用户提供执行此操作的选项，并将其放入函数中

---

如果您给计时器一个ID，您也可以停止和启动它。

如果您使用的是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.');
        }
    });
}

函数hmms_cpu_current（）{
$.ajax({
键入：“GET”，
async:false，
url:“yourcontroller/youraction”，
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
成功：功能（数据）{
var obj=$.parseJSON（数据）；
$。每个（数据、功能（i、项）{
alert（item.text）//使用返回的值执行任务
});
},
错误：函数（）{
text（'加载数据时出错'）；
}
});
}

---

修改所有函数以返回

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();
        });

---

如果我在real_time选项卡上，您的代码是否会通过ajax调用帮助自己更新图表，而无需用户刷新浏览器？因此，如果用户更改选项卡，其他选项卡会发生什么情况？不更新数据。如果是，那么您可以使用clearInterval方法，该方法允许停止setInterval调用。@SebastianBochan，您的建议有一个例子吗？这是javascript问题，所以我建议熟悉javascript文档。我已经更新了代码，但仍然不起作用。有什么想法吗？

function cpu_current() {
                //$.getJSON return jqXHR, you could use it to abort ajax.
       return $.getJSON('current_cpu_data.php', function(data) {
              //All your code
}

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();
        });