PDA

Επιστροφή στο Forum : Ποιος γνωριζει JAVASCRIPT και AJAX (XML) ???


_pike
22-08-15, 11:44
Αγαπητοι φιλοι καλημερα.
Αυτο που θελω να καταφερω ειναι το εξης.....
Θελω σε μια φορμα html που εχω φτιαξει,αφου κανω post method, με το που την υποβαλλει να κανει GET method......
και η η τιμη που θα παρει απο το GET method να την εμφανισει σε ενα text box χωρις να ανανεωσει ολοκληρη την σελιδα....
Εχω ψαχτει αρκετα ειμαι πολυ κοντα (πιστευω) αλλα σε δοκιμες που κανω ητε ανανεωνει ολοκληρη την σελιδα ητε δεν κανει τπτ.
ειδα ενα attribute? το (onsubmit) Αλλα δεν εχω καταφερει τιποτα βασει αυτου. Γνωριζω βασικα πραγματα σε html και καθολου Javascript.

Ευχαριστω πολυ Παναγιωτης.
nikosp
22-08-15, 12:05
Θα μπορούσα ίσως να σε βοηθήσω αλλά θα πρέπει να δώ από κοντά το τί έχεις φτιάξει και πώς
Η καλύτερη λύση είναι να δείς τα πράγματα από μόνος σου
Υπάρχουν τα πάντα στό site της ORACLE
Γράψου εκεί και άρχισε να κατεβάζεις πληροφορίες
Για εμένα είναι η πηγή γνώσεων
_pike
22-08-15, 12:14
Ευχαριστω Nικο για την απαντηση σου....Θελεις να ποσταρω τον κωδικα html? Θα το κοιταξω αυτο που μου ειπες....Αυτο που δεν μπορω να καταφερω ειναι το κομματι του script που θα υπαρχει στον κωδικα.
nikosp
22-08-15, 12:21
Ευχαριστω Nικο για την απαντηση σου....Θελεις να ποσταρω τον κωδικα html? Θα το κοιταξω αυτο που μου ειπες....Αυτο που δεν μπορω να καταφερω ειναι το κομματι του script που θα υπαρχει στον κωδικα.
Δές το καλύτερα μόνος σου
Εκεί που σου είπα θα βρείς πολλά πράγματα για τα script αυτ'α
Gant
23-08-15, 08:16
Παναγιώτη πόσταρε τον κώδικα να δούμε που ακριβώς είναι το πρόβλημα
_pike
23-08-15, 12:32
Ευχαριστώ για το ενδιαφέρον.....




<html>


<body bgcolor="#e8e8e8">
<meta charset="UTF-8">
<script>
function UpdateLighting(){

var xmlhttp;

var a = document.getElementById("bed").value;
var b = document.getElementById("sal").value;
var c = document.getElementById("kit").value;
var d = document.getElementById("ext").value;



if (window.XMLHttpRequest)

{


xmlhttp=new XMLHttpRequest();

}


else
{

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.onreadystatechange=function(){

if (xmlhttp.readyState==4 && xmlhttp.status==200){

var PlaketaResponse = xmlhttp.responseText.split(" ");

var ares = PlaketaResponse[0].substr(PlaketaResponse[0].indexOf("=")+1, PlaketaResponse[0].length-PlaketaResponse[0].indexOf("="));
var bres = PlaketaResponse[1].substr(PlaketaResponse[1].indexOf("=")+1, PlaketaResponse[1].length-PlaketaResponse[1].indexOf("="));
var cres = PlaketaResponse[2].substr(PlaketaResponse[2].indexOf("=")+1, PlaketaResponse[2].length-PlaketaResponse[2].indexOf("="));
var dres = PlaketaResponse[3].substr(PlaketaResponse[3].indexOf("=")+1, PlaketaResponse[3].length-PlaketaResponse[3].indexOf("="));

if (ares == a){

document.getElementById("bedresult").innerHTML = 'OK'
document.getElementById("bedresultinput").value = 'OK'


}
else{

document.getElementById("bedresult").innerHTML = 'ERROR'
document.getElementById("bedresultinput").value = 'ERROR'
}


if (bres == b){ document.getElementById("saloniresult").innerHTML = 'OK'}
else{document.getElementById("saloniresult").innerHTML = 'ERROR'}


if (cres == c){ document.getElementById("kouzinaresult").innerHTML = 'OK'}
else{document.getElementById("kouzinaresult").innerHTML = 'ERROR'}


if (dres == d){ document.getElementById("exresult").innerHTML = 'OK'}
else{document.getElementById("exresult").innerHTML = 'ERROR'}


//document.getElementById("FotismosResults").innerHTML = ;

}
else{

document.getElementById("FotismosResults").innerHTML = "A server error occured.";

}

}


xmlhttp.open("POST","HTTP://192.168.1.107:80",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("a="+a+"&b="+b+"&c="+c+"&d="+d);

}


</script>


<style>
form.wood1 {float:left; margin-left:30px;}
fieldset {height: 210px;width: 210px;}
#txt {font-weight:bold;}
</style>




<br>
<center><h1>Κεντρικό Μενού</h1></center>
<form class="wood1" >


<fieldset>
<legend><b>Φωτισμός</b></legend><br>
<select id="bed">
<option value="off">OFF</option>
<option value="on">ON</option>
<option value="auto">AUTO</option>
</select> Υπνοδωμάτιο <span id="bedresult"></span><input type="text" id="bedresultinput" size="4" readonly="readonly"/><br/><br/>


<select id="sal">
<option value="off">OFF</option>
<option value="on">ON</option>
<option value="auto">AUTO</option>
</select> Σαλόνι<span id="saloniresult"></span><br/><br/>


<select id="kit">
<option value="off">OFF</option>
<option value="on">ON</option>
<option value="auto">AUTO</option>
</select> Κουζίνα<span id="kouzinaresult" style="float:right;"></span><br/><br/>


<select id="ext">
<option value="off">OFF</option>
<option value="on">ON</option>
<option value="auto">AUTO</option>
</select> Εξωτερικά<span id="exresult" style="float:right;"></span><br/><br/>


<button type="button" onclick="UpdateLighting();">Υποβολή</button>




</fieldset>




</form>


</body>
</html>



Για να καταλαβεις θελω αφου πατησω το κουμπι submit να κανει post τις τιμες που θα εχουν επιλεχθει στα κουτακια dropbox.Αφου γινει αυτο να μου ζητησει η σελιδα GET method ετσι ωστε να του στειλω ΟΚ οτι και καλα πηρε την τιμη αλλα να την εμφανισει στο input type text "bedresult" χωρις να ανανεωσει ολοκληρη την σελιδα....
Gant
23-08-15, 22:12
Ο κώδικάς σου φαίνεται οκ.
Στην περιοχή μόνο που ελέγχει την απάντηση του σέρβερ if (a==ares) ... λείπουν τα semicolon (ελληνικά ερωτηματικά ';' ) στο τέλος των εντολών.
_pike
24-08-15, 01:05
Το δοκιμασα φιλε μου δυστηχως ουτε ετσι δουλευει.....
Τι να πω.....




if (ares == a){

document.getElementById("bedresult").innerHTML = 'OK'
document.getElementById("bedresultinput").value = 'OK'


}
else{

document.getElementById("bedresult").innerHTML = 'ERROR'
document.getElementById("bedresultinput").value = 'ERROR'
else{

document.getElementById("FotismosResults").innerHTML = "A server error occured.";

}


Μπορεις να μου εξηγησεις τι κανει ο παραπανω κωδικας? Εαν το ares ειναι ιδιο με το a τοτε δειξε ΟΚ στο κουτακι αλλιως ERROR και εαν κατι απο αυτα παει στραβα τοτε δειξε A SERVER ERROR OCCURED .
Μπορεις να μου κανεις μια εξηγηση γραμμη-γραμμη????

Αρα κατι επρεπε να δειχνει το οτι δεν ανταποκρινεται στις τιμες που του στελνω που μπορει να οφειλεται???

Σε ευχαριστω πολυ!
Gant
24-08-15, 06:37
To "Server error occured" εμφανίζεται αν ο σερβερ απαντήσει και το readystate δεν είναι 4 και το status δεν είναι 200.
Κοίταξε και http://www.w3schools.com/ajax/ajax_xmlhttprequest_onreadystatechange.asp

Η υπορουτίνα onreadystatechange θα τρέχει κάθε φορά που αλλάζει το readystate από 0 σε 1,2,3 και 4. Καλύτερα να βγει το κομμάτι else του κώδικα προς στιγμήν.


xmlhttp.onreadystatechange=function(){

if (xmlhttp.readyState==4 && xmlhttp.status==200){

var PlaketaResponse = xmlhttp.responseText.split(" ");

var ares = PlaketaResponse[0].substr(PlaketaResponse[0].indexOf("=")+1, PlaketaResponse[0].length-PlaketaResponse[0].indexOf("="));
var bres = PlaketaResponse[1].substr(PlaketaResponse[1].indexOf("=")+1, PlaketaResponse[1].length-PlaketaResponse[1].indexOf("="));
var cres = PlaketaResponse[2].substr(PlaketaResponse[2].indexOf("=")+1, PlaketaResponse[2].length-PlaketaResponse[2].indexOf("="));
var dres = PlaketaResponse[3].substr(PlaketaResponse[3].indexOf("=")+1, PlaketaResponse[3].length-PlaketaResponse[3].indexOf("="));

if (ares == a){

document.getElementById("bedresult").innerHTML = 'OK';
document.getElementById("bedresultinput").value = 'OK';


}
else{

document.getElementById("bedresult").innerHTML = 'ERROR';
document.getElementById("bedresultinput").value = 'ERROR';
}

if (bres == b){ document.getElementById("saloniresult").innerHTML = 'OK';}
else{document.getElementById("saloniresult").innerHTML = 'ERROR';}


if (cres == c){ document.getElementById("kouzinaresult").innerHTML = 'OK';}
else{document.getElementById("kouzinaresult").innerHTML = 'ERROR';}


if (dres == d){ document.getElementById("exresult").innerHTML = 'OK';}
else{document.getElementById("exresult").innerHTML = 'ERROR';}


//document.getElementById("FotismosResults").innerHTML = ;

}

}

O Browser σου έχει πολύ πιθανόν ενσωματωμένο debugger (ενεργοποιείται πατώντας το F12) που τρέχει τον κώδικα γραμμή γραμμή και σε βοηθάει να βρεις τα λάθη σου.
_pike
24-08-15, 11:27
Επειδη τον server τον προσομοιωνω εγω μεσω του esp8266 τι περιμενει ο browser να λαβει? Δηλαδη αφου μου κανει το POST method τι πρεπει να του στειλω? Για να μπει η απαντηση στο textbox?.
π.χ
1) a=on
2) response.write=on
3) on

Θα δοκιμασω το debugger κι'ολας να δω αυτο που μου λες πιο μετα.....

Σε ευχαριστω!
Gant
24-08-15, 20:45
Η απάντηση που επεξεργάζεται ο κώδικας ( σου; ) έχει τη μορφή

a=OK b=OFF c=AUTO d=OFF

H μεταβλητή (a,b,c,d) δεν παίζει ρόλο. Χρειάζεται πάντα ένα κενό " " ανάμεσα στις εξισώσεις και χρειάζεσαι τουλάχιστον 4 μεταβλητές.

Καλή επιτυχία!
_pike
25-08-15, 00:51
Δεν με καταλαβες..... Κατ αρχας ο κωδικας javascript δεν ειναι δικος μου γιατι οπως προειπα δεν γνωριζω javascript αλλα html και αυτην με περιορισμους.
Αυτο που σε ρωτησα επειδη προσπαθω να καταλαβω τι μπορει να πηγαινει στραβα ειναι to εξης......
τι απαντηση περιμενει η σελιδα απο τον server για να τυπωσει
στο textbox to OK.
Απο τα λιγα που καταλαβαινω Πρεπει να του λεει

"Εαν η μεταβλητη ares ειναι ιδια με την μεταβλητη a
(οπου το a einai to bed value ===> var a = document.getElementById("bed").value; )

if (ares == a){
document.getElementById("bedresult").innerHTML = 'OK';
document.getElementById("bedresultinput").value = 'OK';

Τοτε μεσα στο input text "bedresultinput" γραψε το ΟΚ........

Αρα ενα παραδειγμα.......Εαν ο σερβερ στειλει το ΟΝ (ξερο σκετο ΟΝ χωρις α=ΟΝ)
θα εχουμε αραγε την συμπεριφορα που περιμενουμε??? (γιατι μεχρι και σημερα τπτ απο τα παραπανω δεν δουλεψε...)

Μηπως πριν απο το ΟΝ ο browser περιμενει καποιου αλλου ειδους απαντησης???
π.χ

Server---------------- browser
----------------------- POST method
readystate=4---------OK
readystate=200------OK
a=ON------------------printing on screen textbox value=OK
close channel---------OK
OK

(Το παραπανω ειναι υποθετικο σεναριο)

Ελπιζω να με καταλαβες σε ευχαριστω πολυ για τον χρονο σου.....!!!
Gant
26-08-15, 18:06
Η σελιδα περιμενει απαντηση απο τον σερβερ στην μορφη που εγραψα παραπανω. Δλδ. 4 εξισωσεις χωρισμενες με κενα. Αν το κειμενο μετα το πρωτο ισον και μεχρι το πρωτο κενο ισοσυναμει με το περιεχομενο του πρωτου dropbox, τοτε γραφεται στο inputbox OK αλλιως ERROR. Αν θες ξαναγραψε ολο το αρχειο html.
_pike
27-08-15, 01:21
Για ριξε μια ματια μπας και καταλαβεις τπτ.....
Gant
27-08-15, 21:01
ok, την απάντηση του σερβερ που την γραφεις;
θα χρειαστει κάτι σαν


HTTP/1.1 200 OK
Access-Control-Allow-Origin: *
Connection: Close

a=OK b=OFF c=AUTO d=OFF
_pike
27-08-15, 21:06
Την απαντηση τωρα την προσωμοιωνω εγω πρωσωρινα για τις δοκιμες μεσω του sscom32 που ειναι κατι σαν το teraterm hyperterminal κλπ... Λιγο που το εψαξα και εγω (απελπιστηκα) ελεγα κατι για JSONP Θα δοκιμασω να στειλω το παραπανω μοτιβο οπως το εχεις γραψει.....


*EDIT

Access-Control-Allow-Origin: *Access-Control-Allow-Origin: *

Θα στειλω αυτο και επειτα την σειρα

a=OK b=OFF c=AUTO d=OFF
Gant
30-08-15, 20:24
ok σε μένα δούλεψε. Παραθέτω κώδικα και screenshot

<html>
<body bgcolor="#e8e8e8">
<meta charset="UTF-8">
<script>
function UpdateLighting(){
var xmlhttp;
var a = document.getElementById("bed").value;
var b = document.getElementById("sal").value;
var c = document.getElementById("kit").value;
var d = document.getElementById("ext").value;
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
} else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
var PlaketaResponse = xmlhttp.responseText.split(" ");
var ares = PlaketaResponse[0].substr(PlaketaResponse[0].indexOf("=")+1, PlaketaResponse[0].length-PlaketaResponse[0].indexOf("="));
var bres = PlaketaResponse[1].substr(PlaketaResponse[1].indexOf("=")+1, PlaketaResponse[1].length-PlaketaResponse[1].indexOf("="));
var cres = PlaketaResponse[2].substr(PlaketaResponse[2].indexOf("=")+1, PlaketaResponse[2].length-PlaketaResponse[2].indexOf("="));
var dres = PlaketaResponse[3].substr(PlaketaResponse[3].indexOf("=")+1, PlaketaResponse[3].length-PlaketaResponse[3].indexOf("="));
if (ares == a){
document.getElementById("bedresult").innerHTML = 'OK';
document.getElementById("bedresultinput").value = 'OK';
}else{
document.getElementById("bedresult").innerHTML = 'ERROR';
document.getElementById("bedresultinput").value = 'ERROR';
}
if (bres == b){ document.getElementById("saloniresult").innerHTML = 'OK';}
else{document.getElementById("saloniresult").innerHTML = 'ERROR';}
if (cres == c){ document.getElementById("kouzinaresult").innerHTML = 'OK';}
else{document.getElementById("kouzinaresult").innerHTML = 'ERROR';}
if (dres == d){ document.getElementById("exresult").innerHTML = 'OK';}
else{document.getElementById("exresult").innerHTML = 'ERROR';}
/*document.getElementById("FotismosResults").innerHTML = ;
}else{
document.getElementById("FotismosResults").innerHTML = "A server error occured.";
//*/
}
}
xmlhttp.open("POST","HTTP://127.0.0.1:80",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("a="+a+"&b="+b+"&c="+c+"&d="+d);
}
</script>
<style>
form.wood1 {float:left; margin-left:30px;}
fieldset {height: 210px;width: 210px;}
#txt {font-weight:bold;}
</style>
<br>
<center><h1>Κεντρικό Μενού</h1></center>
<form class="wood1" >
<fieldset>
<legend><b>Φωτισμός</b></legend><br>
<select id="bed">
<option value="off">OFF</option>
<option value="on">ON</option>
<option value="auto">AUTO</option>
</select> Υπνοδωμάτιο <span id="bedresult" style="float:right;"></span><input type="text" id="bedresultinput" size="4" readonly="readonly"/><br/><br/>
<select id="sal">
<option value="off">OFF</option>
<option value="on">ON</option>
<option value="auto">AUTO</option>
</select> Σαλόνι<span id="saloniresult" style="float:right;"></span><br/><br/>
<select id="kit">
<option value="off">OFF</option>
<option value="on">ON</option>
<option value="auto">AUTO</option>
</select> Κουζίνα<span id="kouzinaresult" style="float:right;"></span><br/><br/>
<select id="ext">
<option value="off">OFF</option>
<option value="on">ON</option>
<option value="auto">AUTO</option>
</select> Εξωτερικά<span id="exresult" style="float:right;"></span><br/><br/>
<button type="button" onclick="UpdateLighting();">Υποβολή</button>
</fieldset>
</form>
</body>
</html>
59279
Θα χρειαστεί να αλλάξεις την IP (127.0.0.1) στην δική σου.
_pike
01-09-15, 01:20
Φιλε μου σε ευχαριστω παρα πολυ για το ενδιαφερον σου!!!
Λοιπον δεν δουλεψε σε εμενα :saad: και λογικα γνωριζω το γιατι.....Μιλησα με εναν φιλο σημερα και μου ειπε για το συγκεκριμενο σφαλμα που βρισκει.....
"Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://192.168.1.107/. (Reason: CORS header 'Access-Control-Allow-Origin' missing)

Ειναι επειδη οι δοκιμες που κανω (την html σελιδα που παιζουμε)......δεν ειναι ανεβασμενη στον σερβερ (Μικροελενκτη) Και γι'αυτο βγαζει αυτο το error....
Το συγκεκριμενο σφαλμα δημιουργηται μου ειπε γιατι η javascript προσπαθει να παρει κατι που χρηζει θεμα ασφαλειας διοτι δεν ζητηται απο τον σερβερ (στην προκειμενη περιπτωση αλλα απο την ιδια την σελιδα......(καπως ετσι)
Θα επανερθω με πιο αναλυτικοτερα νεα....

Σε ευχαριστω και παλι!!!!
Gant
01-09-15, 22:46
Πολύ σωστά αυτά που γραφεις. Για να ξεπεράσουμε το εμπόδιο της javascript που απαιτεί να βρίσκονται το αρχείο html και οι υπολοιπες πηγές ajax στον ίδιο υπολογιστή γράφουμε στην απάντηση του webserver εκτος των άλλων:

Access-Control-Allow-Origin: *

Το δοκίμασα και με 2 υπολογιστές στο σπιτικό δίκτυο (ο ένας το αρχείο html ο άλλος webserver) και ... δούλεψε.

Νομίζω πως είσαι πολύ κοντά στην επιτυχία!
_pike
26-09-15, 21:47
Μετα απο εμποδια (αρκετα) που βρηκα καταφερα να το δω να δουλευει...... Κοψαμε-ραψαμε με τον φιλο και εκανα ενα μικρο αρχειακι 1ΚΒ γιατι το προηγουμενο ηταν ~4ΚΒ και ειχα θεματα με τον μικροελενκτη και με το esp... Ο κωδικας ειναι ο παρακατω το μονο προβλημα που εχει τωρα ειναι :

1) Με το που πατω το κουμπι submit μου βγαζει το μνμ SRV ERROR αμεσως.....
( Βεβαια μετα που το στελνω την τιμη απο SRV ERROR αλλαζει σε ΟΚ εαν ειναι συμπιπτει με το post η ERROR εαν ειναι διαφορετικη....)

2) Εαν η απαντηση ειναι ..
a=ON δειχνει ΟΚ εαν ειναι....
b=ON δειχνει ΟΚ εαν ειναι....

=ON δειχνει ΟΚ

Οπου σημαινει οτι δεν ελενχει να δει οτι το α=ΟΚ αλλα εαν το= ειναι ΟΚ...... (Μετα απο δοκιμες το ειδα οτι συμβαινει αυτο τσεκαρει απο το = και μετα....)
επειτα ομως που θα βαλω και αλλα dropboxes θα πρεπει να βλεπει το a το b ή το c




<html>
<script>
function ULF(){
var xmlhttp;
var a = document.getElementById("bed").value;
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
var PL = xmlhttp.responseText.split(" ");
var ares = PL[0].substr(PL[0].indexOf("=")+1, PL[0].length-PL[0].indexOf("="));
if (ares == a){
document.getElementById("bri").value = 'OK'
}
else{
document.getElementById("bri").value = 'ERROR';
}
}
else{
document.getElementById("bri").value = 'SRV ERROR'
}
}
xmlhttp.open("POST","HTTP://192.168.1.107:80",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("a="+a);
}
</script>
<b>Lights</b><br>
<select id="bed">
<option value="OFF">OFF</option>
<option value="ON">ON</option>
<option value="AUTO">AUTO</option>
</select>Bed<input type="text" id="bri" size="50" readonly="readonly"/><br/><br/>
<button type="button" onclick="ULF();">Submit</button>
</body>
</html>
JOHNY+
26-09-15, 22:17
kalytera xrhsimopoihse Jquery , exeis aytomata symavatothta me oloys toys browser , vivliothiki ths javascript . Kai pio eykolo sthn xrhsh . Otan kaneis post de tha pareis tipota me get , tha steileis ena request ston server kai aytos afoy trexei to service poy thes , tha soy apanthsei me ena xml Http Request object , to jquery tha to handlarei kai tha paei na soy valei to periexomeno toy xml ston tomea ths selidas poy exeis piasei me ton selector , diavase ligo jquery kai ajax .

paidia sorry me ta grreklish exw kairo na postarw sto forum
_pike
26-09-15, 22:28
Σε ευχαριστω πολυ για την απαντηση σου.....Εκτος το οτι ειμαι ασχετος απο jquery kai ajax κλπ ο server που χρησιμοποιω εχει 16ΚΒ μνημη το jquery einai απο μονο του 100ΚΒ....Εκτος εαν κανεις include και να το παιρνει απο google....Να μην το εχεις στον server.Αυτο ισως γινει στο μελλον που θα ενταξω μια SD στο κυκλωμα και θα εχω απλετο χωρο......
JOHNY+
26-09-15, 22:33
http://www.w3schools.com/jquery/ajax_post.asp

Η λυση στο πρόβλημα σου . O server θα τρεχει καποια γλώσσα προγραμματισμού υποθέτω php , οτι θές , κανε post και παρε την απάντηση . Καντο include απο google δεν θα χεις προβλημα στο πάνω μερος της σελίδας στο head .
JOHNY+
27-09-15, 00:34
το jquery και ajax calls τρεχουν στον browser αυτου που φορτώνει την ιστοσελίδα , οπότε δεν θα χεις πρόβλημα μνήμης . Ειδικά αμα τραβάς το jquery κατευθείαν απο την google στο ολοκληρωμένο θα στέλνεις την απάντηση και θα τρέχει κατι και θα επιστρέφει την ενημέρωση στην ιστοσελίδα .


$("input").keyup(function(){
var txt = $("input").val();
$.post("demo_ajax_gethint.asp", {suggest: txt}, function(result){
$("span").html(result);
});
});



Βασικά αυτό εδώ χρειάζεσαι . τροποποιησε το λιγο να ταιριάζει σε αυτο που θες να κάνεις .

αυτα εδω $("input") πχ ειναι selectors με αυτα πιάνεις στοιχεία html που θές να εφαρμόσεις πάνω τους αλλαγές , η να πάρεις πληροφορία απο αυτά , το demo_ajax_gethint.asp ειναι το αρχείο που θές να εκτελέσεις στον server , εσυ βάλε το δικό σου , στην γλώσσα που θές . Αυτό το καλεί , στέλνει το περιεχόμενο του στοιχείου input kai ο κώδικας που τρέχει στον server επιστρεφει το αρχείο xml που το πίανει o selector $("span") και το τοποθετεί μεσα σε αυτό το στοιχείο ενημερώνοντας το κομάτι της σελίδας χωρίς να ξαναφορτώσει .

Ειναι πιο απλό απ το να το γράψεις σε καθαρή Javascript μονος σου και εχεις καλυτερη συμβατότητα με browser γιατι η συναρτηση του Ajax ειναι ήδη χτισμένη απο το jquery .

Απλα κανε include στην σελίδα στην αρχή του path toy jquery vale τον κωδικα σου στο head μεσα σε script tags kai frontise ta στοιχει της σελιδας που χεις βαλει να ενημερωνει , περνει στοιχεια να υπαρχουν .
Gant
27-09-15, 08:36
1.
το SRV ERROR βγαίνει κάθε φορά που τρέχει η υπορουτίνα onreadystatechange και το readystate δεν είναι 4 και το status δεν είναι 200. Αυτό συμβαίνει μερικές φορές δλδ κατά τη σύνδεση με το σερβερ, κατά την αναμονή για απάντηση κτλ.
Κατ' εμέ δεν χρειάζεται το

else{ document.getElementById("bri").value = 'SRV ERROR' }
καθόλου για την ώρα.

2.Το
var ares = PL[0].substr(PL[0].indexOf("=")+1, PL[0].length-PL[0].indexOf("="));

θα το αντικαθιστούσα με


if (PL[0].indexOf("a=")>-1) {
var ares = PL[0].substr(PL[0].indexOf("a=")+2);}
_pike
27-09-15, 17:14
Φιλε Χρηστο σε ευχαριστω για την απαντηση σου θα την δοκιμασω και αυτη και θα σου πω αποτελεσματα......
Φιλε Gant....Αντικατεστησα αυτο που μου ειπες και δουλευει κανονικα!!!!!!!! τωρα κοιταει απο το a και επειτα....!!!
Επισης εβγαλα και αυτο που μου ειπες.....Εαν ομως αλλαζα τα νουμερα Φανταζομαι οι αριθμοι αυτοι δηλωνουν χρονο σε ms σωστα? Το λεω αυτο γιατι θα ηταν ωραιο να το αφησω σε περιπτωση που ο mcu για καποιο λογο δεν απαντησει μεσα σε ενα προκαθορισμενο χρονο να βγαζει αυτο το μνμ κατι σαν timeout....

Αυτο χρειαζεται να υπαρχει στον κωδικα με την τροποποιηση που εκανες???
" var PL = xmlhttp.responseText.split(" "); "

Και κατι τελευταιο επειδη μου αρεσει να μαθαινω...Θα μπορουσες οταν βρεις λιγο χρονο να μου εξηγησεις τι κανει η γραμμη που εγραψες?
οτι πχ :Εαν το a ειναι ισο η μεγαλυτερο του 1 κλπ κλπ (Μπορει να λεω χαζα αλλα δεν καταλαβαινω τπτ στο τι κανει αυτη η γραμμη..)

Σας Ευχαριστω πολυ!!!!
_pike
01-10-15, 02:16
Υπαρχει και νεα "εκδοση" χρησιμοποιωντας JSON παραθετω τον κωδικα οπου και αυτος μου δουλεψε αλλα ειναι και πιο μικρος αλλα σαν να μου φαινεται και πιο ευκολος.....( Για οσους ενιαφερονται μιας και οπου ειδα οτι το thread κοντευει τα 2000 views!!! )


<html>


<body>


<script>


function ULF(){
var x = new XMLHttpRequest();
var a = document.getElementById("bed").value;
var p = document.getElementById("bri");
var b = document.getElementById("kit").value;
var o = document.getElementById("kri");
x.onreadystatechange=function() {
if (x.readyState == 4 && x.status == 200) {
var j = JSON.parse(x.responseText)
j.a == a ? p.value = "OK" : p.value = "ERROR";
j.b == b ? o.value = "OK" : o.value = "ERROR";
}
else{
p.value = "SERVER ERROR"
o.value = "SERVER ERROR"
}
}
x.open("POST","HTTP://192.168.1.107:80",true);
x.setRequestHeader("Content-type","application/x-www-form-urlencoded");
x.send("a="+a+"&b="+b);
}
</script>


<b>Lights</b><br>
Bed <select id="bed">
<option value="ON">ON</option>
<option value="OFF">OFF</option>
<option value="AUTO">AUTO</option>
</select>
<input type="text" id="bri" size="10" readonly="readonly"/>

<br/>
<br/>


Kitchen <select id="kit">
<option value="ON">ON</option>
<option value="OFF">OFF</option>
<option value="AUTO">AUTO</option>
</select>
<input type="text" id="kri" size="10" readonly="readonly"/><br/><br/>
<button onclick="ULF();">Submit</button>


</body>


</html>



Αυτο εδω χρειαζεται ?????? (x.readyState == 4 && x.status == 200)


Ευχαριστω πολυ ολους σας!!!
Gant
22-11-15, 18:41
1 ....Εαν ομως αλλαζα τα νουμερα Φανταζομαι οι αριθμοι αυτοι δηλωνουν χρονο σε ms σωστα? Το λεω αυτο γιατι θα ηταν ωραιο να το αφησω σε περιπτωση που ο mcu για καποιο λογο δεν απαντησει μεσα σε ενα προκαθορισμενο χρονο να βγαζει αυτο το μνμ κατι σαν timeout....

2 Αυτο χρειαζεται να υπαρχει στον κωδικα με την τροποποιηση που εκανες???
" var PL = xmlhttp.responseText.split(" "); "

3 ..Θα μπορουσες οταν βρεις λιγο χρονο να μου εξηγησεις τι κανει η γραμμη που εγραψες?
οτι πχ :Εαν το a ειναι ισο η μεγαλυτερο του 1 κλπ κλπ (Μπορει να λεω χαζα αλλα δεν καταλαβαινω τπτ στο τι κανει αυτη η γραμμη..)


1 Όπως έγραψα και στις 24.8. τα νούμερα 4 και 200 δηλώνουν την κατάσταση της απάντησης από τον webserver. Με απλά λόγια ότι ολοκληρώθηκε με επιτυχία η μεταφορά των δεδομένων από τον web server στον web browser. Και ναι, η γραμμή αυτή χρειάζεται για να εξετάσουμε την απάντηση μόνο εφ όσον ολοκληρωθεί με επιτυχία η μεταφορά των δεδομένων.
Αυτό που είναι λάθος είναι το else server error. Κάθε φορά που ξεκινά ή βρίσκεται σε εξέλιξη η επικοινωνία μεταξύ server και client τα νούμερα αυτά αλλάζουν. Με το else γράφεις server error κάθε φορά που τα νούμερα αλλάζουν και δεν είναι 4 και 200. Οκ;

2 Αυτή η γραμμή δημιουργεί ένα μητρώο/πίνακα (array PL) χωρίζοντας (split) το κείμενο responseText σε κάθε κενό " ". Ok;

3 Αν το πρώτο στοιχείο του πίνακα PL, δηλ. το PL[0], εμπεριέχει το κείμενο "a=", τότε το ares θα πάρει την τιμή του τμήματος (substring) του PL[0] δύο θέσεις μετά το "a=" και μέχρι το τέλος. Ok;
Gant
22-11-15, 18:44
Η "νέα" σου έκδοση αποκλείεται να δούλεψε, γιατί λείπουν τα ελληνικά ερωτηματικά στο τέλος των εντολών
var j = JSON.parse(x.responseText)
p.value = "SERVER ERROR"
o.value = "SERVER ERROR"