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

jQuery AJAX function called multiple times but data is only pulled on first call

本文关键字：调用 提取 数据 第一次 函数 jQueryAJAX      更新时间：2023-09-26

我有一个jQuery函数，用于从flask服务器上的XML文件中提取数据。我从调用这个函数开始我的ready函数，我的所有变量都会毫无问题地更新。然而，当我通过点击操作第二次调用该函数时，我的变量不会更新。我知道AJAX函数被成功调用是因为我收到了警报。在第一次调用之后，XML文档似乎没有被重新加载。如何在每次调用函数时更新变量。

全局变量

//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";

数据拉取功能

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

就绪功能（简化）

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

我对网络开发还很陌生，所以可以随意指出我正在做的事情的结构问题。

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

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

您可以查看Jquery Ajax文档

我认为你正在获得缓存的响应，你需要在url中添加时间戳，

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

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

您似乎得到了缓存的响应。您应该在请求选项中使用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);
    }
});
}
相关文章：