浏览器在使用带json的ajax函数后继续加载

时间：2015-06-12 19:48:02

标签： javascript html ajax json

我制作了一个简单的脚本，它使用Openweathermap显示天气数据。我目前的问题是装载的打字机一直在旋转，我似乎无法解决它。

<html>
<head>
<title>Weather</title>
    <meta charset="utf-8">

    <script src="http://code.jquery.com/jquery-1.7.min.js" ></script>
    <script src="http://code.jquery.com/ui/1.7.0/jquery-ui.js" ></script>

<script>
function getWeather(callback) {
    var weather = 'http://api.openweathermap.org/data/2.5/weather?q=amsterdam&units=metric';
    $.ajax({
      dataType: "jsonp",
      url: weather,
      success: callback
    });
}

getWeather(function (data) {
    
	// Plaats
    document.write('Current weather in ' + data.name);
	document.write('<br> <br>');
	
	// Icon
    document.write("<img src=\"http://openweathermap.org/img/w/" + data.weather[0].icon + ".png\">");
	document.write('<br>');
	
	//Temp
	var temp = (data.main.temp);
	var fixed = (temp.toFixed(1));
    document.write('Temperature: ' + fixed + '°C');
	document.write('<br>');
	
	// Pressure
    document.write('Pressure: ' + data.main.pressure + ' Pa');
	document.write('<br>');
	
	// Humidity
    document.write('Humidity: ' + data.main.humidity + '%');
	document.write('<br>');
	
	// Wind
    document.write('Wind: ' + data.wind.speed + ' km/h');
	document.write('<br>');
	
			
	// Wind richting 1
	var wind1 = (data.wind.deg)
	var degrees = (wind1.toFixed(0))
	
	
	s=String;
	s.prototype.r = s.prototype.replace;
	function calcPoint(input) {
    var j = input % 8,
        input = (input / 8)|0 % 4,
        cardinal = ['north', 'east', 'south', 'west'],
        pointDesc = ['1', '1 by 2', '1-C', 'C by 1', 'C', 'C by 2', '2-C', '2 by 1'],
        str1, str2, strC;
 
    str1 = cardinal[input];
    str2 = cardinal[(input + 1) % 4];
    strC = (str1 == cardinal[0] | str1 == cardinal[2]) ? str1 + str2 : str2 + str1;
    return pointDesc[j].r(1, str1).r(2, str2).r('C', strC);
	}
	function getShortName(name) {
		return name.r(/north/g, "N").r(/east/g, "E").r(/south/g, "S").r(/west/g, "W").r(/by/g, "b").r(/[\s-]/g, "");
	}

	var input = degrees / 11.25;
	input = input+.5|0;
	var name = calcPoint(input);
	var shortName = getShortName(name);
	name = name[0].toUpperCase() + name.slice(1);
	document.write(name);
	
	// Wind richting degress
	var windfixed = (wind1.toFixed(0))
    document.write('; '+ windfixed + '°');
	document.write('<br>');
	
	// Descriptie
    document.write(data.weather[0].description);
	document.write('<br>');	
	
		
	//tijd
	var utcSeconds = (data.dt)
    var d = new Date(0);
	d.setUTCSeconds(utcSeconds);
	document.write('<br>' + d);
	document.write('<br>');
	
	
});
</script>
</body>
</html>

我认为这与回调有关，但我不确定，而且我的知识不是那么大。

4 个答案:

答案 0 :(得分：1)

正如我在评论中提到的那样，这是因为document.write()来电与您的ajax回调被触发时的比较。一般来说，你永远不应该使用document.write()。您需要更改它以附加以更新现​​有元素或创建并附加DOM元素。

一个例子：我添加了一个div，我将所有内容放在一个变量中，然后更新了div的内容。 

<html>
<head>
<title>Weather</title>
    <meta charset="utf-8">

    <script src="http://code.jquery.com/jquery-1.7.min.js" ></script>
    <script src="http://code.jquery.com/ui/1.7.0/jquery-ui.js" ></script>
</head>
<body>
<div id='weather'></div>
<script>
function getWeather(callback) {
    var weather = 'http://api.openweathermap.org/data/2.5/weather?q=amsterdam&units=metric';
    $.ajax({
      dataType: "jsonp",
      url: weather,
      success: callback
    });
}

getWeather(function (data) {
  var weatherContent='';    
    // Plaats
  weatherContent+='Current weather in ' + data.name;
    weatherContent+='<br> <br>';

    // Icon
  weatherContent+="<img src=\"http://openweathermap.org/img/w/" + data.weather[0].icon + ".png\">";
    weatherContent+='<br>';

    //Temp
    var temp = (data.main.temp);
    var fixed = (temp.toFixed(1));
  weatherContent+='Temperature: ' + fixed + '°C';
    weatherContent+='<br>';

    // Pressure
  weatherContent+='Pressure: ' + data.main.pressure + ' Pa';
    weatherContent+='<br>';

    // Humidity
  weatherContent+='Humidity: ' + data.main.humidity + '%';
    weatherContent+='<br>';

    // Wind
  weatherContent+='Wind: ' + data.wind.speed + ' km/h';
    weatherContent+='<br>';


    // Wind richting 1
    var wind1 = (data.wind.deg)
    var degrees = (wind1.toFixed(0))


    s=String;
    s.prototype.r = s.prototype.replace;
    function calcPoint(input) {
    var j = input % 8,
        input = (input / 8)|0 % 4,
        cardinal = ['north', 'east', 'south', 'west'],
        pointDesc = ['1', '1 by 2', '1-C', 'C by 1', 'C', 'C by 2', '2-C', '2 by 1'],
        str1, str2, strC;

    str1 = cardinal[input];
    str2 = cardinal[(input + 1) % 4];
    strC = (str1 == cardinal[0] | str1 == cardinal[2]) ? str1 + str2 : str2 + str1;
    return pointDesc[j].r(1, str1).r(2, str2).r('C', strC);
    }
    function getShortName(name) {
        return name.r(/north/g, "N").r(/east/g, "E").r(/south/g, "S").r(/west/g, "W").r(/by/g, "b").r(/[\s-]/g, "");
    }

    var input = degrees / 11.25;
    input = input+.5|0;
    var name = calcPoint(input);
    var shortName = getShortName(name);
    name = name[0].toUpperCase() + name.slice(1);
    weatherContent+=name;

    // Wind richting degress
    var windfixed = (wind1.toFixed(0))
  weatherContent+='; '+ windfixed + '°';
    weatherContent+='<br>';

    // Descriptie
  weatherContent+=data.weather[0].description;
    weatherContent+='<br>'; 


    //tijd
    var utcSeconds = (data.dt)
    var d = new Date(0);
    d.setUTCSeconds(utcSeconds);
    weatherContent+='<br>' + d;
    weatherContent+='<br>';

    document.getElementById('weather').innerHTML=weatherContent;
});
</script>
</body>
</html>

答案 1 :(得分：0)

使用此代码。这对你有帮助。

    function getWeather(callback) {
    var weather = 'http://api.openweathermap.org/data/2.5/weather?q=amsterdam&units=metric';
    $.ajax({
      dataType: "jsonp",
      url: weather,
      success: callback
    });
}

getWeather(callback1);
function callback1(data)
 {

    // Plaats
    document.write('Current weather in ' + data.name);
    document.write('<br> <br>');

    // Icon
    document.write("<img src=\"http://openweathermap.org/img/w/" + data.weather[0].icon + ".png\">");
    document.write('<br>');

    //Temp
    var temp = (data.main.temp);
    var fixed = (temp.toFixed(1));
    document.write('Temperature: ' + fixed + '°C');
    document.write('<br>');

    // Pressure
    document.write('Pressure: ' + data.main.pressure + ' Pa');
    document.write('<br>');

    // Humidity
    document.write('Humidity: ' + data.main.humidity + '%');
    document.write('<br>');

    // Wind
    document.write('Wind: ' + data.wind.speed + ' km/h');
    document.write('<br>');


    // Wind richting 1
    var wind1 = (data.wind.deg)
    var degrees = (wind1.toFixed(0))


    s=String;
    s.prototype.r = s.prototype.replace;


    var input = degrees / 11.25;
    input = input+.5|0;
    var name = calcPoint(input);
    var shortName = getShortName(name);
    name = name[0].toUpperCase() + name.slice(1);
    document.write(name);

    // Wind richting degress
    var windfixed = (wind1.toFixed(0))
    document.write('; '+ windfixed + '°');
    document.write('<br>');

    // Descriptie
    document.write(data.weather[0].description);
    document.write('<br>');


    //tijd
    var utcSeconds = (data.dt)
    var d = new Date(0);
    d.setUTCSeconds(utcSeconds);
    document.write('<br>' + d);
    document.write('<br>');
return;

}
function calcPoint(input) {
  var j = input % 8,
      input = (input / 8)|0 % 4,
      cardinal = ['north', 'east', 'south', 'west'],
      pointDesc = ['1', '1 by 2', '1-C', 'C by 1', 'C', 'C by 2', '2-C', '2 by 1'],
      str1, str2, strC;

  str1 = cardinal[input];
  str2 = cardinal[(input + 1) % 4];
  strC = (str1 == cardinal[0] | str1 == cardinal[2]) ? str1 + str2 : str2 + str1;
  return pointDesc[j].r(1, str1).r(2, str2).r('C', strC);
}
function getShortName(name) {
  return name.r(/north/g, "N").r(/east/g, "E").r(/south/g, "S").r(/west/g, "W").r(/by/g, "b").r(/[\s-]/g, "");
}`

答案 2 :(得分：0)

首先，避免使用document.write。它有时会引起烦人的问题。 而是使用document.write将每个代码附加到输出var并在最后，将它的内容放在div内的页面上 我已经更改了你的代码并将函数调用放在$（function（）{}）中，如果不使用它，代码将在目标div（）存在之前执行，并且会抛出错误 另外，你忘了打开

                <html>
            <head>
            <title>Weather</title>
                <meta charset="utf-8">

                <script src="http://code.jquery.com/jquery-1.7.min.js" ></script>
                <script src="http://code.jquery.com/ui/1.7.0/jquery-ui.js" ></script>

            <script>

            function getWeather(callback) {
                var weather = 'http://api.openweathermap.org/data/2.5/weather?q=amsterdam&units=metric';
                $.ajax({
                  dataType: "jsonp",
                  url: weather,
                  success: callback
                });
            }

            $(function(){

                getWeather(function (data) {

                    var output = '';

                    // Plaats
                    output += 'Current weather in ' + data.name;
                    output += '<br> <br>';

                    // Icon
                    output += "<img src=\"http://openweathermap.org/img/w/" + data.weather[0].icon + ".png\">";
                    output += '<br>';

                    //Temp
                    var temp = (data.main.temp);
                    var fixed = (temp.toFixed(1));
                    output += 'Temperature: ' + fixed + '°C';
                    output += '<br>';

                    // Pressure
                    output += 'Pressure: ' + data.main.pressure + ' Pa';
                    output += '<br>';

                    // Humidity
                    output += 'Humidity: ' + data.main.humidity + '%';
                    output += '<br>';

                    // Wind
                    output += 'Wind: ' + data.wind.speed + ' km/h';
                    output += '<br>';


                    // Wind richting 1
                    var wind1 = (data.wind.deg)
                    var degrees = (wind1.toFixed(0))


                    s=String;
                    s.prototype.r = s.prototype.replace;
                    function calcPoint(input) {
                    var j = input % 8,
                        input = (input / 8)|0 % 4,
                        cardinal = ['north', 'east', 'south', 'west'],
                        pointDesc = ['1', '1 by 2', '1-C', 'C by 1', 'C', 'C by 2', '2-C', '2 by 1'],
                        str1, str2, strC;

                    str1 = cardinal[input];
                    str2 = cardinal[(input + 1) % 4];
                    strC = (str1 == cardinal[0] | str1 == cardinal[2]) ? str1 + str2 : str2 + str1;
                    return pointDesc[j].r(1, str1).r(2, str2).r('C', strC);
                    }
                    function getShortName(name) {
                        return name.r(/north/g, "N").r(/east/g, "E").r(/south/g, "S").r(/west/g, "W").r(/by/g, "b").r(/[\s-]/g, "");
                    }

                    var input = degrees / 11.25;
                    input = input+.5|0;
                    var name = calcPoint(input);
                    var shortName = getShortName(name);
                    name = name[0].toUpperCase() + name.slice(1);
                    output += name;

                    // Wind richting degress
                    var windfixed = (wind1.toFixed(0))
                    output += '; '+ windfixed + '°';
                    output += '<br>';

                    // Descriptie
                    output += data.weather[0].description;
                    output += '<br>';


                    //tijd
                    var utcSeconds = (data.dt)
                    var d = new Date(0);
                    d.setUTCSeconds(utcSeconds);
                    output += '<br>' + d;
                    output += '<br>';

                    document.getElementById('output-div').innerHTML = output ;
                });

            })
            </script>
            <body>
                <div id="output-div"></div>
            </body>
            </html>

答案 3 :(得分：0)

    <html>
<head>
    <title>Weather</title>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div class="container">
    <div id="weather-location"></div>
    <div id="weather-icon"></div>
    <div id="weather-temp"></div>
    <div id="weather-pressure"></div>
    <div id="weather-humidity"></div>
    <div id="weather-wind"></div>
    <div id="weather-wind-direction"></div>
    <div id="weather-description"></div>
    <div id="weather-time"></div>
</div>

<script>
$(document).ready(function(){
    $.ajax({
        dataType: "jsonp",
        url: "http://api.openweathermap.org/data/2.5/weather?q=amsterdam&units=metric",
        success: function(data){
            $("#weather-location").text('Current weather in ' + data.name);

            // Icon
            //$("#weather-icon").html("<img src='http://openweathermap.org/img/w/" + data.weather[0].icon + ".png'>");

            //Temp
            var temp = (data.main.temp);
            var fixed = (temp.toFixed(1));
            $("#weather-temp").text('Temperature: ' + fixed + '°C');


            // Pressure
            $("#weather-pressure").text('Pressure: ' + data.main.pressure + ' Pa');


            // Humidity
            $("#weather-humidity").text('Humidity: ' + data.main.humidity + '%');


            // Wind
            $("#weather-wind").text('Wind: ' + data.wind.speed + ' km/h');



            // Wind richting 1
            var wind1 = (data.wind.deg)
            var degrees = (wind1.toFixed(0))


            s=String;
            s.prototype.r = s.prototype.replace;

            function calcPoint(input) {
            var j = input % 8,
                input = (input / 8)|0 % 4,
                cardinal = ['north', 'east', 'south', 'west'],
                pointDesc = ['1', '1 by 2', '1-C', 'C by 1', 'C', 'C by 2', '2-C', '2 by 1'],
                str1, str2, strC;

            str1 = cardinal[input];
            str2 = cardinal[(input + 1) % 4];
            strC = (str1 == cardinal[0] | str1 == cardinal[2]) ? str1 + str2 : str2 + str1;
            return pointDesc[j].r(1, str1).r(2, str2).r('C', strC);
            }
            function getShortName(name) {
                return name.r(/north/g, "N").r(/east/g, "E").r(/south/g, "S").r(/west/g, "W").r(/by/g, "b").r(/[\s-]/g, "");
            }

            var input = degrees / 11.25;
            input = input+.5|0;
            var name = calcPoint(input);
            var shortName = getShortName(name);
            name = name[0].toUpperCase() + name.slice(1);

            // Wind richting degress
            var windfixed = (wind1.toFixed(0))
            $("#weather-wind-direction").text(name + "; "+ windfixed + "°");

            // Descriptie
            $("#weather-description").text(data.weather[0].description);



            //tijd
            var utcSeconds = (data.dt)
            var d = new Date(0);
            d.setUTCSeconds(utcSeconds);
            $("#weather-time").text(d);
        },
        fail: function(){
            $(".container").html('<h1>FAIL!</h1>');
        }
    });
});
</script>
</body>
</html>
相关问题
最新问题