这个javascript + ajax有一个小问题

时间：2012-03-30 13:48:55

标签： javascript html ajax xhtml textarea

我正在尝试翻译信息，当我使用以下代码时，它运行成功，因为我已经在之前给出了textarea信息

<!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>

如果在初始加载页面之前删除textarea中的文本，则翻译无效，如下面的代码所示。

<!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>

我没有明白这一点，任何人都可以告诉我为什么会出现这个问题。

2 个答案:

答案 0 :(得分：0)

它可能不起作用，因为当您从textarea中删除文本时，document.getElementById('txt2').innerHTML为null。在firefox＆amp; firebug中检查此功能是否存在可能的错误/警告。您还可以提供有关您的问题的更多数据 - 完全会发生什么。

答案 1 :(得分：0)

我不知道为什么它不起作用。实际上，您在第一个示例中更改innerHTML的代码只是在chrome上工作，而在旧的IE中，它们始终都有效。

我认为innerHTML不属于W3C标准，如果更改为value，则两者都将始终有效。像：

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

和

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

编辑： 编写符合标准的代码总是好的=）

相关问题
最新问题