Question

如何从此ajax调用中存在的事件更新ajax调用之外的变量？ Thia只是我的完整代码的一部分，默认情况下，我使用值度量设置var单位，但当我的selectbox更改时（在ajax调用内）我想用新选择的值更新var单位!!

我该怎么做？

非常感谢提前

// Define Latitude & longitude
var lat = 37.0971034;
var lon = -8.471261;

// Temperature Metric - metric (Celsius) or imperial(fahrenheit)
var units = 'metric';

// Number of Forecast Days
var n_days = '5';

// Define Urls
var forecast = "http://api.openweathermap.org/data/2.5/forecast/daily?lat="+ lat +"&lon="+ lon +"&units=" + units +"&cnt=5";


// Define Today´s Date
//var date = new Date();
//var currentdate = (date.getDay()+1) + '.' + date.getMonth() + '.' + date.getFullYear();   


// append event onchange
$("select[name=units]").on("change", function(){
    units = $(this).val();    
    updateForecast();
});

function updateForecast() {
   var forecast = "http://api.openweathermap.org/data/2.5/forecast/daily?lat="+ lat +"&lon="+ lon +"&units=" + units +"&cnt=5";
    // Define Ajax Call
    $.ajax({
       url: forecast,
       async: false,
       dataType: 'json',
       success: function(data) {
            // show new forecast (data)
            // alert(data);
            // New part from your code 
            // access the first item
            var firstItem = data.list[0]; 

            var html =  '<div>' + data.city.name + '</div>';
            html += '<div> Max '+ firstItem.temp.max + '</div>';
            html += '<div> Min '+ firstItem.temp.min +'</div>';

            $('#weather_output').empty().append(html);

            for(var i = 1, l = data.list.length; i < l; i++) {

                html = '<div>Temp Max'+ data.list[i].temp.max + '</div>';
                html += '<div>Temp Min'+ data.list[i].temp.min + '</div>';


                $('#weather1_output').empty().append(html);

            }
       },
       error: function( data ) {
         alert( "ERROR:");
       }
    });
}

Answer 1

您无需在Ajax调用的onSuccess事件中设置更改侦听器。如果您想要做的是在onChange事件发生时使用从Ajax调用返回的一些数据，那么您应该将这些数据存储在您的单位变量所在的相同范围内，然后在那里使用它...我希望这是有道理的。

以下是一个例子：

var units = null;

function updateTemperature(){
    //At this point the units variable should have the selected value from the dropdown

    $.ajax({
        url: "http://api.openweathermap.org/data/2.5/forecast/daily?lat="+ lat +"&lon="+ lon +"&units=" + units +"&cnt=5";,
        async: false,
        dataType: 'json',
        success: function(data) {
            //do whatever you wanna do on successful Ajax call
        }
    });
}

$("select[name=units]").on("change", function(){
    //Storing the selected units from the dropdown, so that we can use them in the Ajax call
    units = this.value;
    updateTemperature();
});

Answer 2

你做错了。这在ajax调用中没有意义，insted做到这一点：

// Define Latitude & longitude
var lat = 37.0971034;
var lon = -8.471261;

// Temperature Metric - metric (Celsius) or imperial(fahrenheit)
var units = 'metric';

// Number of Forecast Days
var n_days = '5';

// Define Urls


// Define TodayÂ´s Date
//var date = new Date();
//var currentdate = (date.getDay()+1) + '.' + date.getMonth() + '.' + date.getFullYear();   


// append event onchange
$("select[name=units]").on("change", function(){
    units = $(this).val();    
    updateForecast();
});

function updateForecast() {

    var forecast = "http://api.openweathermap.org/data/2.5/forecast/daily?lat="+ lat +"&lon="+ lon +"&units=" + units +"&cnt=5";

    // Define Ajax Call
    $.ajax({
       url: forecast,
       async: false,
       dataType: 'json',
       success: function(data) {

            var firstItem = data.list[0]; 
            var secondItem = data.list[0].weather[0]; 

            var html =  '<div class="'+ secondItem.icon +'">' + data.city.name + '</div>';
            html += '<div> Max '+ firstItem.temp.max + '</div>';
            html += '<div> Min '+ firstItem.temp.min +'</div>';

            $('#weather_output').empty().append(html); // ADDED .empty()
            $('#weather1_output').empty();

            // skip first i = 1
            for(var i = 1; i < data.list.length; i++) {

                var html2 = '<div>Temp Max'+ data.list[i].temp.max + '</div>';
                html2 += '<div>Temp Min'+ data.list[i].temp.min + '</div>';

                $('#weather1_output').append(html2);
            }
       },
       error: function( data ) {
         alert( "ERROR:");
       }
    });
}

updateForecast(); // for init update!

这个例子的作用是什么？它会对每个单位的变化进行新的预测。

如果您仅在ajax调用中使用units，则可以执行以下操作：

//on event change
updateForecast(unit);
...
function updateForecast(unit) {
// and than pass that unit

有很多地方可以优化我的例子;）

Answer 3

你应该移动

$（“select [name = units]”）。on（“change”，function（）{

在ajax成功之外

当用户与下拉列表进行交互时，您将发生更改，并且您应该只将事件附加一次（在ajax成功之外）。它不是在ajax成功中执行的，它只是附加的。不确定成功与变更事件之间的依赖关系。是否有理由这样做？

从ajax调用更新jquery变量

3 个答案: