Question

这是一个天气项目

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

当用户进入正确的城市时，它会返回天气，如果他没有输入任何内容，则会发出警报但是当他输入错误时，这就是问题发生的时候，它没有返回警报，因为它应该是要做。

查看测试链接。

所以如何让它返回一个警告，说明这个城市不存在，我也在使用bootstrap

有3个带有警报类的div，其中#success和#noCity正在运行，但#fail始终为空。

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

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

Answer 1

当我调试你的脚本时，我找到了

$(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);
        }

    });

});

希望这能解决您的问题

Answer 2

更改你的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);
                }

希望它能运作

PHP天气网站

2 个答案: