2012-03-30 6 views
0

mit versuche Informationen zu übersetzen, wenn ich den folgenden Code verwenden, es läuft erfolgreich, wie ich vor den Textarea Informationen gegeben habe, inein kleines Problem mit diesem Javascript + Ajax

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" /> 
<title>Example Ajax POST</title> 
<script type="text/javascript"><!-- 
// create the XMLHttpRequest object, according browser 
function get_XmlHttp() { 
    // create the variable that will contain the instance of the XMLHttpRequest object (initially with null value) 
    var xmlHttp = null; 

    if(window.XMLHttpRequest) {  // for Forefox, IE7+, Opera, Safari, ... 
    xmlHttp = new XMLHttpRequest(); 
    } 
    else if(window.ActiveXObject) { // for Internet Explorer 5 or 6 
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 

    return xmlHttp; 
} 

// sends data to a php file, via POST, and displays the received answer 
function ajaxrequest(php_file, tagID, tolang) { 

if(tolang=="-")return; 
    var request = get_XmlHttp();  // call the function for the XMLHttpRequest instance 

    // create pairs index=value with data that must be sent to server 
    var the_data = 'data='+document.getElementById('txt2').innerHTML+'&to='+tolang; 

    request.open("POST", php_file, true);   // set the request 

    // adds a header to tell the PHP script to recognize the data as is sent via POST 
    request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    request.send(the_data);  // calls the send() method with datas as parameter 

    // Check request status 
    // If the response is received completely, will be transferred to the HTML tag with tagID 
    request.onreadystatechange = function() { 
if (request.readyState == 4) { 
     document.getElementById(tagID).innerHTML = request.responseText; 
    } 

    } 
} 
--></script> 


</head> 
<body> 

<textarea id="txt2" rows="20" cols="50">hi wassup</textarea><br/> 
<select name="langlist" onchange="ajaxrequest('translator.php', 'txt2', this.options[this.selectedIndex].value)"> 
    <option value="-" selected>-</option> 
<option value="ar">Arabic</option><option value="bg"> 
Bulgarian</option><option value="ca"> 
Catalan</option><option value="zh-CHS"> 
Chinese Simplified</option><option value="zh-CHT"> 
Chinese Traditional</option><option value="cs"> 
Czech</option><option value="da"> 
Danish</option><option value="nl"> 
Dutch</option><option value="en"> 
English</option><option value="et"> 
Estonian</option><option value="fi"> 
Finnish</option><option value="fr"> 
French</option><option value="de"> 
German</option><option value="el"> 
Greek</option><option value="ht"> 
Haitian Creole</option><option value="he"> 
Hebrew</option><option value="hi"> 
Hindi</option><option value="mww"> 
Hmong Daw</option><option value="hu"> 
Hungarian</option><option value="id"> 
Indonesian</option><option value="it"> 
Italian</option><option value="ja"> 
Japanese</option><option value="ko"> 
Korean</option><option value="lv"> 
Latvian</option><option value="lt"> 
Lithuanian</option><option value="no"> 
Norwegian</option><option value="pl"> 
Polish</option><option value="pt"> 
Portuguese</option><option value="ro"> 
Romanian</option><option value="ru"> 
Russian</option><option value="sk"> 
Slovak</option><option value="sl"> 
Slovenian</option><option value="es"> 
Spanish</option><option value="sv"> 
Swedish</option><option value="th"> 
Thai</option><option value="tr"> 
Turkish</option><option value="uk"> 
Ukrainian</option><option value="vi"> 
Vietnamese</option> 
</select><img src="http://www.allsaints-sec.glasgow.sch.uk/Images/QuestionMarkIcon16.gif" title="plz save your copy of data, as there will be chances of data loss during translation"/> 

</body> 
</html> 

wenn Sie den Text entfernen in textarea vor dem ersten Laden der Seite, dann funktioniert die Übersetzung nicht, wie im folgenden Code gezeigt.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" /> 
<title>Example Ajax POST</title> 
<script type="text/javascript"><!-- 
// create the XMLHttpRequest object, according browser 
function get_XmlHttp() { 
    // create the variable that will contain the instance of the XMLHttpRequest object (initially with null value) 
    var xmlHttp = null; 

    if(window.XMLHttpRequest) {  // for Forefox, IE7+, Opera, Safari, ... 
    xmlHttp = new XMLHttpRequest(); 
    } 
    else if(window.ActiveXObject) { // for Internet Explorer 5 or 6 
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 

    return xmlHttp; 
} 

// sends data to a php file, via POST, and displays the received answer 
function ajaxrequest(php_file, tagID, tolang) { 

if(tolang=="-")return; 
    var request = get_XmlHttp();  // call the function for the XMLHttpRequest instance 

    // create pairs index=value with data that must be sent to server 
    var the_data = 'data='+document.getElementById('txt2').innerHTML+'&to='+tolang; 

    request.open("POST", php_file, true);   // set the request 

    // adds a header to tell the PHP script to recognize the data as is sent via POST 
    request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    request.send(the_data);  // calls the send() method with datas as parameter 

    // Check request status 
    // If the response is received completely, will be transferred to the HTML tag with tagID 
    request.onreadystatechange = function() { 
if (request.readyState == 4) { 
     document.getElementById(tagID).innerHTML = request.responseText; 
    } 

    } 
} 
--></script> 


</head> 
<body> 

<textarea id="txt2" rows="20" cols="50"></textarea><br/> 
<select name="langlist" onchange="ajaxrequest('translator.php', 'txt2', this.options[this.selectedIndex].value)"> 
    <option value="-" selected>-</option> 
<option value="ar">Arabic</option><option value="bg"> 
Bulgarian</option><option value="ca"> 
Catalan</option><option value="zh-CHS"> 
Chinese Simplified</option><option value="zh-CHT"> 
Chinese Traditional</option><option value="cs"> 
Czech</option><option value="da"> 
Danish</option><option value="nl"> 
Dutch</option><option value="en"> 
English</option><option value="et"> 
Estonian</option><option value="fi"> 
Finnish</option><option value="fr"> 
French</option><option value="de"> 
German</option><option value="el"> 
Greek</option><option value="ht"> 
Haitian Creole</option><option value="he"> 
Hebrew</option><option value="hi"> 
Hindi</option><option value="mww"> 
Hmong Daw</option><option value="hu"> 
Hungarian</option><option value="id"> 
Indonesian</option><option value="it"> 
Italian</option><option value="ja"> 
Japanese</option><option value="ko"> 
Korean</option><option value="lv"> 
Latvian</option><option value="lt"> 
Lithuanian</option><option value="no"> 
Norwegian</option><option value="pl"> 
Polish</option><option value="pt"> 
Portuguese</option><option value="ro"> 
Romanian</option><option value="ru"> 
Russian</option><option value="sk"> 
Slovak</option><option value="sl"> 
Slovenian</option><option value="es"> 
Spanish</option><option value="sv"> 
Swedish</option><option value="th"> 
Thai</option><option value="tr"> 
Turkish</option><option value="uk"> 
Ukrainian</option><option value="vi"> 
Vietnamese</option> 
</select><img src="http://www.allsaints-sec.glasgow.sch.uk/Images/QuestionMarkIcon16.gif" title="plz save your copy of data, as there will be chances of data loss during translation"/> 

</body> 
</html> 

bekomme ich nicht den Punkt hier, kann mir jemand sagen, warum ist dieses Problem.

+0

Wahrscheinlich etwas in keinem Zusammenhang mit Ihrer eigentlichen Frage, aber ich würde auf jeden Fall sehen JQuery als eine Möglichkeit, um Ihren Ajax-Code wirklich zu vereinfachen und einige Kopfschmerzen zu entfernen. Es dreht sich alles um $ .ajax - ich habe nie zurückgeschaut, persönlich! – Codecraft

Antwort

0

Es funktioniert wahrscheinlich nicht, weil document.getElementById('txt2').innerHTML null ist, wenn Sie Text aus Textarea entfernen. Überprüfen Sie diese Funktion in Firefox & Firebug für mögliche Fehler/Warnungen. Sie könnten auch weitere Daten zu Ihrem Problem angeben - was passiert, genau passiert.

0

Ich weiß nicht wirklich, warum es nicht funktioniert. In der Tat ändern Sie Ihre Code innerHTML im ersten Beispiel nur die erste Zeit auf Chrom, und in einem alten IE beide arbeiten immer.

Und ich glaube nicht, innerHTML gehört zu einem W3C-Standard, wenn Sie zu value wechseln beide werden immer funktionieren. Wie:

var the_data = 'data='+document.getElementById('txt2').value+'&to='+tolang; 

und

document.getElementById(tagID).value = request.responseText; 

EDIT: Schreiben Normen konformer Code ist immer gut =)