jQuery AJAX函数调用多次，但只在第一次调用时提取数据

I have a jQuery function for pulling data from an XML file on a flask server. I start out my ready function with calling this function and all of my variables update with no issues. However, when I call the function a second time from a click action my variables do not update. I know that the AJAX function is being called successfully because I get my alerts. It seems as thought the XML document is not being re-loaded after the first call. How can I get my variables to update on every call to the function.

我有一个jQuery函数，用于从flask服务器上的XML文件中提取数据。我从调用这个函数开始我的准备函数，所有的变量都没有问题。但是，当我从单击操作第二次调用函数时，我的变量不会更新。我知道AJAX函数正在被成功调用，因为我得到了警报。在第一次调用之后，似乎并没有重新加载XML文档。如何让变量更新函数的每次调用。

Global Variables

全局变量

//Variables representing Sensor Data
var bspeed=0;
var set_temp=0;
var f_temp=0;
var fuel_level=0;
var s_temp=0;
var humidity=0;
var bspeed_data=0;
var set_temp=0;
var mode = "mod";
var mod_mode = "blower";

Data-Pull function

数据输入功能

//AJAX XML file parsing
function pull_data(){

//Gather Data from main.xml and store into variables
$.ajax({
    type: "GET",
    url: "static/main.xml",
    async: false,
    success: function(xml){
        $(xml).find('item').each(function(){
            var id = $(this).find('id').text();
            switch(id){
                case "ftemp_data":
                    f_temp = $(this).find('value').text();
                    break;
                case "stemp_data":
                    s_temp = $(this).find('value').text();
                    break;
                case "fuel_level_data":
                    fuel_level = $(this).find('value').text();
                    break;
                case "humidity_data":
                    humidity = $(this).find('value').text();
                    break;
                case "blower_speed":
                    alert("Changing bspeed");
                    bspeed_data = $(this).find('value').text();
            }
        });
        alert("Pull Success "+ bspeed_data);
    },
    error: function(data){
        alert("AJAX failed: "+ data.status + ' ' + data.statusText);
    }
});

//Populate HTML with variables
$("#ftemp_data").text(f_temp+("\u00B0"));
$("#stemp_data").text(s_temp+("\u00B0"));
$("#fuel_level_data").text(fuel_level+"%");
$("#humidity_data").text(humidity+"%");
$("#bspeed_data").text(bspeed_data);
}

Ready Function (Simplified)

准备好函数(简化)

$(document).ready(function(){
    pull_data();
    //Click Refresh Button
    $("#refresh_btn").click(function(){
        pull_data();
    }); 
}

I'm fairly new to web development so feel free to point out structural issues with what I'm doing.

我对web开发相当陌生，所以可以*地指出我正在做的事情的结构性问题。

3 个解决方案

#1

Probably you need to force to refresh the cache, in order to do this, add a property cache: false in the ajax code:

可能您需要强制刷新缓存，为了做到这一点，在ajax代码中添加属性缓存:false:

$.ajax({
    type: "GET",
    url: "static/main.xml",
    async: false,
    cache: false,...

You can check in Jquery Ajax documentation

您可以查看Jquery Ajax文档

#2

I think you are getting the cached response, you need to add timestamp to the url ,

我认为你得到了缓存的响应，你需要向url添加时间戳，

var date = new Date();
var timestamp = date.getTime();
$.ajax({
  type: "GET",
  url: "static/main.xml?="+timestamp
})

#3

It looks like you're updating the values of the variables on a successful request callback, however your code to update the text representation is being called outside the AJAX function. This means that when the function is called, the AJAX request is made and the DOM is being updated before the request has finished. You need to move your DOM update logic into the success handler of $.ajax after updating the variables.

看起来您正在成功的请求回调中更新变量的值，但是更新文本表示的代码在AJAX函数之外被调用。这意味着，当调用该函数时，将生成AJAX请求，在请求完成之前，DOM将被更新。您需要将DOM更新逻辑移动到$的成功处理程序中。更新变量后的ajax。

It appears you're getting a cached response. You should use cache: false in your request options, but I would also recommend removing the async: false option as well since you're using callbacks to update the variables' values anyway. Here's the updated code:

看起来您正在获得一个缓存的响应。您应该在请求选项中使用cache: false，但是我也建议您删除async: false选项，因为您正在使用回调来更新变量的值。这是更新后的代码:

//AJAX XML file parsing
function pull_data(){

//Gather Data from main.xml and store into variables
$.ajax({
    type: "GET",
    url: "static/main.xml",
    async: false,
    success: function(xml){
        $(xml).find('item').each(function(){
            var id = $(this).find('id').text();
            switch(id){
                case "ftemp_data":
                    f_temp = $(this).find('value').text();
                    break;
                case "stemp_data":
                    s_temp = $(this).find('value').text();
                    break;
                case "fuel_level_data":
                    fuel_level = $(this).find('value').text();
                    break;
                case "humidity_data":
                    humidity = $(this).find('value').text();
                    break;
                case "blower_speed":
                    alert("Changing bspeed");
                    bspeed_data = $(this).find('value').text();
            }
        });
        alert("Pull Success "+ bspeed_data);

        //Request was successful, populate HTML with variables
        $("#ftemp_data").text(f_temp+("\u00B0"));
        $("#stemp_data").text(s_temp+("\u00B0"));
        $("#fuel_level_data").text(fuel_level+"%");
        $("#humidity_data").text(humidity+"%");
        $("#bspeed_data").text(bspeed_data);
    },
    error: function(data){
        alert("AJAX failed: "+ data.status + ' ' + data.statusText);
    }
});
}

#1