2016-08-01 71 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