2016-06-18 14 views
0

Ich habe viele Posts darüber geschrieben, wie man Daten zur JSON-Datei hinzufügt, und ich habe versucht, alles zusammenzusetzen und für meine Situation zu verwenden, aber es funktioniert nicht. Im Grunde, was ich tue, ist, Daten von der HTML-Datei mit Javascript zu erhalten, dann benutze XMLHttp Anfrage, um diese Daten an PHP-Datei zu senden, und von PHP-Datei versuche ich, die Daten zu .JSON-Datei hinzuzufügen. Anywho, es fügt es nicht hinzu und ich weiß nicht warum und wo ist das Problem. Meine Frage betrifft die XMLHttp-Anfrage. Ist es richtig? Warum nicht? Und über PHP-Datei. Wenn das Problem in der XMLHttp-Anfrage liegt, würde die PHP-Datei die Daten zur .json-Datei hinzufügen? Ich versuche nur, etwas in die JSON-Datei zu bekommen, also könnte ich über Algorithmen nachdenken, um es machbar zu machen. XMLHttp Anfrage ist ziemlich neu für mich. Zum Verständnis, hier ist mein Code:Fügt keine Daten zur JSON-Datei hinzu

index.html:

<!DOCTYPE html> 

<html> 
    <head> 
     <title>Project</title> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <link href="css/style_mob.css" type="text/css" rel="stylesheet"> 
     <script src="script/jquery.js"></script> 
     <script src="script/sendData.js"></script> 
    </head> 
    <body> 
     <div id="top"> 
      <h1>Click only in case of an emergency!</h1> 
     </div> 
     <div id="divButtons"> 
      <button class="button" id="polizei">Polizei</button> 
      <button class="button" id="feuerwehr">Feuerwehr</button> 
      <button class="button" id="krankenwagen">Krankenwagen</button> 
     </div> 
    </body> 
</html> 

sendData.js:

$(document).ready(function() { 
    var type; 
    var latitude; 
    var longitude; 
    var currentdate = new Date(); 
    $(".button").click(function(){ 
     type = $(this).attr("id");   

     var dateTime = "Date: " + currentdate.getDay() + "/"+(currentdate.getMonth()+1) 
      + "/" + currentdate.getFullYear() + " time - " 
      + currentdate.getHours() + ":" 
      + currentdate.getMinutes(); 

     if (navigator.geolocation) { 
      navigator.geolocation.getCurrentPosition(sendData); 
     } else { 
      alert("Geolocation is not supported by this browser."); 
     } 
     function sendData(position) { 
      latitude = position.coords.latitude; 
      longitude = position.coords.longitude;   
     } 
     var hr = new XMLHttpRequest(); 
     hr.open("POST", "emergencyData.php", true); 
     hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
     alert("about to send data to php file"); 
     hr.send("type="+type+"&latitude="+latitude+"&longitude="+longitude+"$dateTime="+currentdate+""); 
    }); 


}); 

emergencyData.php:

<?php 
    header("Content-Type: application/json"); 
    $type = $_POST["type"]; 
    $latit = $_POST["latitude"]; 
    $longit = $_POST["longitude"]; 
    $dateTime = $_POST["dateTime"]; 
    echo $type; 
    // Loading existing data: 
    $json = file_get_contents("emergencyData.json"); 
    $data = json_decode($json, true); 

    // Adding new data: 
    $data[0] = array('type' => $type, 'latitude' => $latit, 'longitude' => $longit, 'date' => $dateTime); 

    // Writing modified data: 
    file_put_contents('emergencyData.json', json_encode($data, JSON_FORCE_OBJECT)); 
?> 
+0

Sie können das Debuggen über die Registerkarte "Netzwerk" in den Dev Tools von Chrome starten. Prüfen Sie, ob die richtige Anfrage an den Server gesendet wird, und prüfen Sie, ob das Richtige als Antwort gesendet wird. Sobald Sie sichergestellt haben, dass die AJAX-Anforderung (xmlhttp ...) ordnungsgemäß funktioniert, können Sie mit dem Debugging der PHP-Logik beginnen. Momentan sieht es so aus, als ob Sie die neuen Daten nicht anhängen, sondern Sie setzen die Daten immer auf den 0. Index und ersetzen alles, was vorher dort war. Sehen Sie sich an, wie Sie Daten an ein Array in PHP anhängen. Außerdem: Solange Sie jQuery verwenden, sollten Sie $ .AJAX anstelle von XMLHttpRequest verwenden. Es ist einfacher. –

+0

nur um sicher zu sein, haben Sie einen Webserver eingerichtet oder versuchen Sie dies lokal zu tun? –

+0

ja, ich habe vergessen zu erwähnen. Ich versuche dies auf einem kostenlosen Online-Webserver. – Oskars

Antwort

0

Sie haben einen Tippfehler in Javascript.

hr.send("type="+type+"&latitude="+latitude+"&longitude="+longitude+"$dateTime="+currentdate+""); 

Sie haben eine $ bei dateTime die &

Auch sollte ich glaube, Sie &dateTime="+currentdate+""&dateTime="+dateTime sein wollte. Extra +"" ist nicht notwendig.

Und letzte, was, wenn Sie neue Daten behalten wollen das Hinzufügen anstelle alte Daten zu überschreiben, die im Gebrauch PHP-Skript:

$data[] = array('type' => $type, 'latitude' => $latit, 'longitude' => $longit, 'date' => $dateTime); 

Ansonsten jedes Mal der alten JSON-Daten werden durch neue ersetzt bekommen.

+0

Ich habe alles geändert, was Sie vorgeschlagen haben. Dies ist, was im in-Konsole in Firefox erhalten: 1. 'POST XHR http: // projectforuni.byethost32.com/emergencyData.php' 2.' GET XHR http://parked-domain.org/ ' 3.' Cross-Origin-Anfrage blockiert: Die gleiche Herkunft Richtlinie verbietet das Lesen der Remote-Ressource bei http://parked-domain.org/. (Grund: CORS-Header 'Access-Control-Allow-Origin' fehlt) .' – Oskars

+0

Nun wird 'http: // projectforuni.byethost32.com/emergencyData.php' auf' http://parked-domain.org umgeleitet/'Deshalb bekommst du diesen Fehler. Warum wird es umgeleitet? Du musst deinen Gastgeber danach fragen. – TheDrot

+0

Danke, ich habe meinen eigenen Wamp-Server eingerichtet, damit es keine Missverständnisse gibt und es funktioniert! Vielen Dank. – Oskars