Top-Themen

AppleEntwicklungHardwareInternetLinuxMicrosoftMultimediaNetzwerkeOff TopicSicherheitSonstige SystemeVirtualisierungWeiterbildungZusammenarbeit

Aktuelle Themen

Administrator.de FeedbackApache ServerAppleAssemblerAudioAusbildungAuslandBackupBasicBatch & ShellBenchmarksBibliotheken & ToolkitsBlogsCloud-DiensteClusterCMSCPU, RAM, MainboardsCSSC und C++DatenbankenDatenschutzDebianDigitiales FernsehenDNSDrucker und ScannerDSL, VDSLE-BooksE-BusinessE-MailEntwicklungErkennung und -AbwehrExchange ServerFestplatten, SSD, RaidFirewallFlatratesGoogle AndroidGrafikGrafikkarten & MonitoreGroupwareHardwareHosting & HousingHTMLHumor (lol)Hyper-VIconsIDE & EditorenInformationsdiensteInstallationInstant MessagingInternetInternet DomäneniOSISDN & AnaloganschlüsseiTunesJavaJavaScriptKiXtartKVMLAN, WAN, WirelessLinuxLinux DesktopLinux NetzwerkLinux ToolsLinux UserverwaltungLizenzierungMac OS XMicrosoftMicrosoft OfficeMikroTik RouterOSMonitoringMultimediaMultimedia & ZubehörNetzwerkeNetzwerkgrundlagenNetzwerkmanagementNetzwerkprotokolleNotebook & ZubehörNovell NetwareOff TopicOpenOffice, LibreOfficeOutlook & MailPapierkorbPascal und DelphiPeripheriegerätePerlPHPPythonRechtliche FragenRedHat, CentOS, FedoraRouter & RoutingSambaSAN, NAS, DASSchriftartenSchulung & TrainingSEOServerServer-HardwareSicherheitSicherheits-ToolsSicherheitsgrundlagenSolarisSonstige SystemeSoziale NetzwerkeSpeicherkartenStudentenjobs & PraktikumSuche ProjektpartnerSuseSwitche und HubsTipps & TricksTK-Netze & GeräteUbuntuUMTS, EDGE & GPRSUtilitiesVB for ApplicationsVerschlüsselung & ZertifikateVideo & StreamingViren und TrojanerVirtualisierungVisual StudioVmwareVoice over IPWebbrowserWebentwicklungWeiterbildungWindows 7Windows 8Windows 10Windows InstallationWindows MobileWindows NetzwerkWindows ServerWindows SystemdateienWindows ToolsWindows UpdateWindows UserverwaltungWindows VistaWindows XPXenserverXMLZusammenarbeit
GELÖST

JSONP Callback in HTML ausgeben

Frage Entwicklung HTML

Mitglied: maddig

maddig (Level 1) - Jetzt verbinden

02.08.2016 um 08:36 Uhr, 1125 Aufrufe, 16 Kommentare

Guten Morgen,

ich versuche zurzeit die Temperaturwerte eines AllNet3500 über die eingebaute JSONP Abfrage abzufragen und als einfache HTML Seite auszugeben.

Die Abfrage: http://IP/xml/json.php?mode=sensor&id=103&callback=IN

Die Rückgabe:

01.
IN([{"id":"103","name":"Anschlu\u00df 0","description":"","fe_view":"0","sort":"2:1","fe_cvs_show_typ":"1","actor_analogValue":null,"digitalToText":"0::","tileColors":"1E7EAC:900000:900000","tileFormats":"55:","lang_port_identifier":"Anschlu\u00df 0","value":"22.18","error":0,"config":{"icon":null,"display":{"min":"15","max":"40"},"limit":{"min":"20","max":"30"}},"info":{"activ":"1","enabled":"1","unit":"\u00b0C","type":"1","view":"0","chipid":"2","chipnumber":"2","chipaddress":"3","helperchipnumber":"0","helperchipaddress":"0","bitaddress":"0"},"minmax":{"today":{"min":"20.93","max":"24.93"},"absolute":{"min":"17.81","max":"40.37"}},"connection":{"port":"0","bus":"67","group":"0"}}])
Mir ist hierbei nur die Variable "value" wichtig, die die aktuelle Temperatur beinhaltet.

Mein Versuch sieht so aus:

01.
<script type="text/javascript"> 
02.
function IN(value){ 
03.
var tempin = value; 
04.
 
05.
document.getElementById('intern').innerHTML=""+tempin+" "°C""; 
06.
07.
 
08.
window.onload=function(){ 
09.
IN(); 
10.
setInterval(IN,1000); 
11.
12.
</script> 
13.
<script src="http://IP/xml/json.php?mode=sensor&id=103&callback=IN"> 
14.
<div id="intern" style="font:40pt Arial; color:#000000;"></div>
Ich hab nur leider null Programmierkenntnisse.
Das Ziel ist, dass einfach nur die Temperatur mit °C jede Sekunde aktualisiert wird und mit Arial in 40pt angezeigt wird.

Ich hoffe ihr könnt mir helfen.

MFG
Mitglied: BirdyB
02.08.2016 um 09:02 Uhr
Hallo maddig,

wenn du den JSON-String in deiner Variable hast, kannst du einfach per Regex den Wert auslesen, z.B.
01.
var re = /((?<=value":")\d{2}.\d{2})/;  
02.
var str = inputstring; //hier die Ausgabe von deinem Sensor einsetzen 
03.
var m; 
04.
if ((m = re.exec(str)) !== null) { 
05.
    if (m.index === re.lastIndex) { 
06.
        re.lastIndex++; 
07.
08.
tempin = m[0]; 
09.
}
Bitte warten ..
Mitglied: atze187
02.08.2016, aktualisiert um 09:11 Uhr
Hi,

das Ausführen von "IN" alleine reicht nicht aus, du musst die Abfrage immer wieder neu ausführen. Am einfachsten ist das mit jquery zu bewerkstelligen. Das ginge dann in folgende Richtung:

01.
<script src="http://code.jquery.com/jquery-3.1.0.min.js"></script> 
02.
<script type="text/javascript"> 
03.
    function IN(value){ 
04.
        document.getElementById('intern').innerHTML=value[0].value + ' °C'; 
05.
06.
 
07.
    window.setInterval(function() { 
08.
        $.getJSON('http://IP/xml/json.php?mode=sensor&id=103&callback=IN') 
09.
    }, 1000); 
10.
</script> 
11.
<div id="intern" style="font:40pt Arial; color:#000000;"></div>
Gruß,
André
Bitte warten ..
Mitglied: atze187
02.08.2016, aktualisiert um 09:12 Uhr
Hi Birdy,

das bringt nichts, da der Callback nur einmal ausgeführt wird, er die Anzeige aber regelmäßig aktualisiert haben möchte. Wozu außerdem parsen wenn in der IN-Methode bei korrekter Ausführung ein Objekt bereitgestellt wird.

Gruß,
André
Bitte warten ..
Mitglied: maddig
02.08.2016 um 09:17 Uhr
Danke für eure Hilfe.

Ich habe jetzt mal das Script von atze187 so übernommen und noch die IP angepasst.
Leider bleibt die Seite leer.

Was ich nicht ganz verstehe, ist dass window.setInterval unten den Link aufruft und oben wo die Variable gefüllt wird, hat er ja theoretisch noch keinen Zugriff auf die Daten oder?
Bitte warten ..
Mitglied: atze187
02.08.2016 um 09:23 Uhr
Gibt es Fehler? (Um das herauszubekommen im Browser F12 drücken, dort sollten dann die Fehler ausgegeben werden)
Bitte warten ..
Mitglied: maddig
02.08.2016 um 09:38 Uhr
Hier der Browser.
browser - Klicke auf das Bild, um es zu vergrößern
Bitte warten ..
Mitglied: atze187
02.08.2016 um 09:40 Uhr
Klick mal rechts aus "Console", da stehen die wertvollen Infos drin
Bitte warten ..
Mitglied: maddig
02.08.2016 um 09:49 Uhr
Ich sehe glaube ich das Übel. Ich muss in der Konfig des Geräts einen User und Passwort eintragen. Momentan hab ich das Feld leer gelassen und gehofft er zählt es als kein Login. Kann man der Abfrage noch einen User und PW mitgeben?

Oder liegt es an etwas anderem?
unbenannt - Klicke auf das Bild, um es zu vergrößern
Bitte warten ..
Mitglied: atze187
02.08.2016, aktualisiert um 10:08 Uhr
Rufst du die Seite von einem Webserver auf, oder hast du einfach die Datei im Browser geöffnet? Ich tippe auf letzteres, und das wird nur dann klappen wenn man dem Browser beim starten mitteilt dass er das darf. Bei Aufruf über einen Webserver sollte es kein Problem geben.

Falls du keinen Webserver hast/möchtest, kannst du den Chrome - und zwar um genau diese eine Datei und keinesfalls irgendeine Webseite zu öffnen - mit folgender Einstellung starten den oben gescheiterten Aufruf dennoch auszuführen.: Sorry alles Blödsinn.
Mein Rat: Installier dir einen Webserver, z.B. IIS Express
Bitte warten ..
Mitglied: maddig
02.08.2016 um 10:05 Uhr
Ja habe sie immer nur mit Browser direkt aufgerufen.
Habe sie jetzt mal auf einen Apache Webserver und selber Fehler wie vorhin.

Muss ich am Webserver noch irgendwas konfigurieren?

oder liegt es vll doch an der Authentifizierung?
unbenannt - Klicke auf das Bild, um es zu vergrößern
Bitte warten ..
Mitglied: atze187
02.08.2016 um 10:07 Uhr
Ich hab keine vom Apache, mein erster Versuch wäre wohl das hier: Enable CORS
Bitte warten ..
Mitglied: maddig
02.08.2016 um 10:21 Uhr
Habe es eingetragen, leider immer noch der Fehler.
In einem anderen Forum schreiben sie das es ein cross-domain-request ist und das der Browser standardmäßig blockiert.
Als Lösung haben sie diesen Link mit rein.

Nur leider verstehe ich da null...
Bitte warten ..
Mitglied: atze187
02.08.2016 um 11:02 Uhr
Klappt es denn wenn du den Chrome mit folgenden Parametern startest?

01.
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --user-data-dir="C:/testsession" --disable-web-security
PS: Vorher bitte das Verzeichnis "testsession" auf c:\ anlegen.
Bitte warten ..
Mitglied: maddig
02.08.2016, aktualisiert um 11:39 Uhr
Ok danke. Er bringt zwar noch eine weiße Seite aber der Fehler taucht nicht mehr in der Console auf bzw taucht gar kein Fehler mehr auf.

ALS UPDATE: Ich hab die Seite jetzt auf den Webserver des Thermometers gelegt, dass er nicht auf einen anderen Server connecten muss. Jetzt habe ich wie in Chrome eine weiße Seite aber überhaupt keine Fehlermeldung.
Bitte warten ..
Mitglied: colinardo
LÖSUNG 02.08.2016, aktualisiert 03.08.2016
Hallo zusammen,
zuerst einmal ist bei "richtigen" JSONP-Requests die SameOriginPolicy gerade die, die man umgehen möchte, also ist der CORS-Header auf dem jeweiligen Server von dem man abfragt dann nicht erforderlich!
Man sollte sofern man jQuery nutzt besser zur $.ajax() Funktion greifen und explizit angeben das man eine jsonp Anfrage machen möchte und diesen Datentyp erwartet, dann versucht es jquery erst gar nicht per xmlhttp.

Hier ein Beispiel:
01.
<!doctype html> 
02.
<html> 
03.
<head> 
04.
<meta charset="utf-8"> 
05.
<title>Current temperature</title> 
06.
</head> 
07.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
08.
<script type="text/javascript"> 
09.
function IN(data){ 
10.
	$('#result').text(data[0].value + " °C"); 
11.
12.
$(document).ready(function(e) { 
13.
	setInterval("LoadData()",1000); 
14.
}); 
15.
 
16.
function LoadData(){ 
17.
	$.ajax({ 
18.
		url:"http://www.XXXXXXXX.com/data.php", 
19.
		jsonpCallback:"IN", 
20.
		dataType:"jsonp" 
21.
	}).fail(function(xhr){ 
22.
		alert("Error loading data, error-code:" + xhr.status) 
23.
        }); 
24.
25.
</script> 
26.
<style type="text/css"> 
27.
	#result{ 
28.
		font-size: 10em; 
29.
		font-family:Verdana, Geneva, sans-serif; 
30.
		text-align:center; 
31.
		line-height:100vh;	 
32.
33.
</style> 
34.
<body> 
35.
<div id="result"></div> 
36.
</body> 
37.
</html>
Grüße Uwe
Bitte warten ..
Mitglied: maddig
03.08.2016 um 08:34 Uhr
Ich danke dir vielmals, hat einwandfrei funktioniert.
Bitte warten ..
Ähnliche Inhalte
JavaScript
gelöst Datumabhängiger Text in HTML anzeigen (4)

Frage von adm2015 zum Thema JavaScript ...

JavaScript
gelöst Knoten in fremder HTML-Seite ausblenden ? (6)

Frage von bonsai132 zum Thema JavaScript ...

HTML
HTML, CSS: Mapping auf dynamischen Hintergrund (2)

Frage von Judo99 zum Thema HTML ...

Neue Wissensbeiträge
Sicherheits-Tools

Sicherheitstest von Passwörtern für ganze DB-Tabellen

(1)

Tipp von gdconsult zum Thema Sicherheits-Tools ...

Peripheriegeräte

Was beachten bei der Wahl einer USV Anlage im Serverschrank

(8)

Tipp von zetboxit zum Thema Peripheriegeräte ...

Windows 10

Das Windows 10 Creators Update ist auf dem Weg

(6)

Anleitung von BassFishFox zum Thema Windows 10 ...

Heiß diskutierte Inhalte