Hallo zusammen, bin bald zu ende mit meiner Arbeit doch das Javscript wird entweder in meinem HTML nicht eingelesen oder nciht ausgeführt ...
Das HTML Dokument
Das PHP sollte die Eingabe nehmen die im HTML Formular eingegeben und abgesendet wurde.
Die dann in die Variable $city einsetzten und die dann im $json verwenden.
Das JS ist dazu verpflichtet die Daten aus dem PHP zu lesen und die schön Strukurieren und die dann im HTML anzeigen (PHP liest eine JSON datei aus).
Das HTML Dokument
Code:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Weather</title>
<link href="styling.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
<script src="main.js" type="text/javascript"></script>
</head>
<body class="background">
<div class="header">
<h1>
Weather
</h1>
</div>
<div id="content" class="content">
<form onClick="phpToHTML();" method="post">
City: <input type="text" name="city" />
<input type="submit" id="driver" value="Load Data" />
</form>
</div>
</body>
</html>Das PHP sollte die Eingabe nehmen die im HTML Formular eingegeben und abgesendet wurde.
Die dann in die Variable $city einsetzten und die dann im $json verwenden.
Code:
<?php
function getJson () {
$city = $_POST['city'];
$json = file_get_contents("http://api.openweathermap.org/data/2.5/find?q=".$city."&units=metric");
echo $json;
}
getJson();
?>Das JS ist dazu verpflichtet die Daten aus dem PHP zu lesen und die schön Strukurieren und die dann im HTML anzeigen (PHP liest eine JSON datei aus).
Code:
function phpToHTML() {
$(document).ready(function() {
$("#driver").onsubmit(function(event){
$.getJSON('weather.php', function(jd) {
$('#content').html('<p> Message: ' + jd.message + '</p>');
$('#content').append('<p>Cod : ' + jd.cod+ '</p>');
$('#content').append('<p> Count: ' + jd.count+ '</p>');
var jdlist = jd.list;
for (var i = 0; i < jdlist.length; i++) {
$('#content').append('<p> ID: ' + jd.list[i].id+ '</p>');
$('#content').append('<p> Name: ' + jd.list[i].name+ '</p>');
$('#content').append('<p> Coord - Lon: ' + jd.list[i].coord.lon+ '</p>');
$('#content').append('<p> Coord - Lat: ' + jd.list[i].coord.lat+ '</p>');
$('#content').append('<p> Main - Temp: ' + jd.list[i].main.temp+ '</p>');
$('#content').append('<p> Main - Pressure: ' + jd.list[i].main.pressure+ '</p>');
$('#content').append('<p> Main - Humidity: ' + jd.list[i].main.humidity+ '</p>');
$('#content').append('<p> Main - Temp Min.: ' + jd.list[i].main.temp_min+ '</p>');
$('#content').append('<p> Main - Temp Max.: ' + jd.list[i].main.temp_max+ '</p>');
$('#content').append('<p> DT: ' + jd.list[i].dt+ '</p>');
$('#content').append('<p> Wind - Speed: ' + jd.list[i].wind.speed+ '</p>');
$('#content').append('<p> Wind - Deg: ' + jd.list[i].wind.deg+ '</p>');
$('#content').append('<p> Wind - Var Begin: ' + jd.list[i].wind.var_beg+ '</p>');
$('#content').append('<p> Wind - Var End: ' + jd.list[i].wind.var_end+ '</p>');
$('#content').append('<p> Country: ' + jd.list[i].sys.country+ '</p>');
$('#content').append('<p> All Clouds: ' + jd.list[i].clouds.all+ '</p>');
var weatherlist = jdlist[i].weather;
for (var i = 0; i < weatherlist.length ; i++) {
$('#content').append('<p> Weather - ID: ' + weatherlist[i].id+ '</p>');
$('#content').append('<p> Weather - Main: ' + weatherlist[i].main+ '</p>');
$('#content').append('<p> Weather - Description: ' + weatherlist[i].description+ '</p>');
$('#content').append('<p> Weather - Icon: ' + weatherlist[i].icon+ '</p>');
}
}
})
})
})
}
