2016-08-01 73 views
-3

这是一个天气项目PHP天气网站

http://mohammadhalawi.6te.net/Weather/index.php

当用户输入正确的城市它返回的天气,如果他没有输入任何内容有警告,但是当他进入一个假的,这是问题发生的时候,它不会按照它应该做的那样返回警报。

检查链接来测试它。

让我怎么让它返回一个警告,这个城市并不存在,还我使用的引导

有3周的div警报类ID #SUCCESS和#noCity正在努力,但#fail它总是空的。

所以重点是我从天气网站检索信息,如果这个城市存在的数据将在ID为#success的div中,否则,如果没有这样的城市div与ID #fail与显示但它不起作用。

Error Image

的index.php

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 
    <title>Weather App</title> 

    <link rel="stylesheet" href="css/Normalize.css"> 
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="css/style.css"> 



    <!--[if IE]> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script> 
    <![endif]--> 
</head> 

<body> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-6 col-md-offset-3 text-center"> 
       <h1 class="text-center grey">Weather Prediction</h1> 
       <p class="lead text-center grey">Enter your city below to get the forecast weather.</p> 

       <form> 
       <div class="form-group"> 
       <input type="text" class="form-control" name="city" id="city" placeholder="Eg. London, Paris, Beirut...">  
       </div> 
        <button class="btn btn-success btn-lg" id="FindMyWeather" name="Weather">Find my weather</button> 
       </form> 
     <div class="alert alert-success" id="success"></div> 
     <div class="alert alert-danger" id="fail">This city does not exist, please try again.</div> 
     <div class="alert alert-danger" id="noCity">Please Enter a City.</div> 

      </div> 


     </div> 
    </div> 


    <script src="js/JQuery.min.js"></script> 
    <script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script> 
    <script src="js/script.js" type="text/javascript"></script> 
</body> 

</html> 

的script.js

$(function() { 

    $('#FindMyWeather').click(function(event) { 
     event.preventDefault(); 
     $('.alert').hide(); 
     if ($('#city').val() != "") { 
      $.get("scraper.php?city=" + $('#city').val(), function(data) { 


       if (data=="") { 

        $('#fail').fadeIn(500); 

       } else { 
        $('#success').html(data).fadeIn(500); 
       } 

      }); 

     } else { 
      $('#noCity').fadeIn(500); 
     } 

    }); 

}); 

scraper.php

<?php 

$city=$_GET['city']; 
$city=str_replace(" ","",$city); 



$contents=file_get_contents("http://www.weather-forecast.com/locations/".$city."/forecasts/latest"); 

preg_match('/3 Day Weather Forecast Summary:<\/b><span class="read-more-small"><span class="read-more-content"> <span class="phrase">(.*?)</s',$contents,$matches); 


echo $matches[1]; 
?> 

的style.css

html 
{ 
    height: 100%; 
} 
body 
{ 
    background: url('../img/nature.jpg') center center no-repeat; 
    background-size: cover; 
} 

.grey 
{ 
    color: dimgrey; 
} 

p 
{ 
    padding: 3% 0% 0%; 
} 
button 
{ 
    margin-top: 5%; 
} 
.container 
{ 
    padding-top: 15%; 
} 

.alert 
{ 
    margin-top: 5%; 
    display: none; 
    text-align: center; 
    font-size: 1.23em; 
} 
+3

而且你能指望我们去做?你没有问题 – Li357

+0

有一个错误的价值返回一个问题只是去网站,并把一些随机词它将返回空,而它应该返回城市不存在 –

+0

如果城市确实存在它返回正确的天气但如果不是,它返回空检查script.js和scraper.php文件 –

回答

0

当我调试脚本,我发现

$(function() { 


    $('#FindMyWeather').click(function(event) { 
     event.preventDefault(); 
     $('.alert').hide(); 
     if ($('#city').val() != "") { 
      $.get("scraper.php?city=" + $('#city').val(), function(data) { 


       if (data=="") { 

        $('#fail').fadeIn(500); 

       } else { 
        $('#success').html(data).fadeIn(500); 
       } 

      }); 

     } else { 
      $('#noCity').fadeIn(500); 
     } 

    }); 

}); 

您的数据响应获得两个输入空格它不是空的(它容器中的两个进入)说为什么它用调试器显示空白空间检查

试用

$(function() { 

    $('#FindMyWeather').click(function(event) { 
     event.preventDefault(); 
     $('.alert').hide(); 
     if ($('#city').val() != "") { 
      $.get("scraper.php?city=" + $('#city').val(), function(data) { 
       data.replace(/\r?\n|\r/g, ""); 
       if (data=="") { 

        $('#fail').fadeIn(500); 

       } else { 
        $('#success').html(data).fadeIn(500); 
       } 

      }); 

     } else { 
      $('#noCity').fadeIn(500); 
     } 

    }); 

}); 

希望这将解决您的问题

+0

我做你说的,我编辑我的文章看看上面的错误图像,即时通讯在我的电脑上使用wamp这个网站 –

+0

所以现在显示的是 – hemanjosko

+0

Warning:file_get_contents(http://www.weather-forecast.com/locations/fghjkl/forecasts/latest):failed to开放式流:HTTP请求失败! HTTP/1.1 404 Not Found in –

0

改变你scraper.php

<?php 
$city=$_GET['city']; 
$city=str_replace(" ","",$city); 

$site="http://www.weather-forecast.com/locations/".$city."/forecasts/latest"; 

$old_error_reporting = error_reporting(E_ALL^E_WARNING); 
$content = file_get_contents($site); 
error_reporting($old_error_reporting); 
if ($content === FALSE) { 
    $error = true; 
} else { 
    $tweets = $content; 
    preg_match('/3 Day Weather Forecast Summary:<\/b><span class="read-more-small"><span class="read-more-content"> <span class="phrase">(.*?)</s',$tweets,$matches); 
    $error = false; 
} 

if(!$error){ 
    echo $matches[0]; 
}else{ 
    echo "error"; 
} 

?> 

的script.js

if (data=="") { 

        $('#fail').fadeIn(500); 

       } 
       else if(data == "error"){ 
        $('#fail').html('City Not Exist').fadeIn(500); 
       } 

       else { 
        $('#success').html(data).fadeIn(500); 
       } 

希望它会工作

+1

你是什么改变?为什么它应该有所作为?请以答案的形式表达你的答案而不是以现货差异游戏的形式。 – Quentin