onreadystatechange触发器重新加载页面

问题描述：

我想学习一些结合的PHP，JavaScript，SQL，HTML的东西... 我创建了一些工作，完美地在Firefox（WinXP和Android版本）。所需的操作是，每当我按一下按钮“的过程！”，一个PHP脚本采用文本在“文本区域”，把每一个字到一个数据库和吐回一些HTML ...onreadystatechange触发器重新加载页面

<html> 
<head> 
<link rel="stylesheet" type="text/css" href="somestyle.css"> 
</head> 
<body> 
<script> 

function ajaxUpdate() 
{ 
    var currStr = document.getElementById("textfield").value; 
    document.getElementById("textfield").value = currStr.trim(); 
    var response; 
    try{ 
     var httpReq = new XMLHttpRequest(); 
    } 
    catch(error){ 
     document.write(error); 
    } 
    httpReq.open("POST", "ajaxinput.php", true); 
    httpReq.send(currStr); 
    httpReq.onreadystatechange = function() { 

     if(httpReq.readyState == 4){ 
      response = httpReq.responseText; 
      document.getElementById("ajaxoutput").innerHTML = response; 

     } 
    } 

} 

function processText(){ 
    //document.write("in processURL"); 
    url = document.getElementById("textarea").value; 
    document.getElementById("m_block").innerHTML = document.getElementById("m_block").innerHTML + "<br/>text is being worked on by server..." 

    var response; 
    try{ 
     var httpReq = new XMLHttpRequest(); 
    } 
    catch(error){ 
     document.write(error); 
    } 
    httpReq.open("POST", "textinput.php", true); 
    httpReq.send(document.getElementById("textarea").innerHTML); 
    httpReq.onreadystatechange = function() { 
     if(httpReq.readyState == 4){ 
      response = httpReq.responseText; 
      document.getElementById("m_block").innerHTML = response; 
     } 
    } 

} 

</script> 

<div id="container"> 
    <div id="l_block"></div> 
    <div id="m_block"> 
    <form> 
    <br/> 
    <textarea id="textarea" rows="10" cols="42">Insert text here!</textarea> 
    <button onclick="processText()">process!</button> 
    </form> 
    </div> 
    <div id="r1_block">css 2</div> 
    <div id="r2_block">css 1</div> 
</div> 
</body> 

</html>

从PHP脚本的回应是这样的：

search: <input type="text" id="textfield" onkeyup="ajaxUpdate()" /> 
<div id="ajaxoutput"></div>

我把事情“Ajax”的，我不知道任何如果这是阿贾克斯应该是。但我这样称呼它，因为它应该在每个关键事件中发送关于textfield的字符串。据我了解，感觉有点阿贾克斯。尽管如此，这种方法在firefox上运行得非常好，正如我所说的，但是当我在其他浏览器上尝试时，没有任何反应。所发生的一切似乎是，页面重新加载带有附加?在地址栏中的URL ...

我可以问我的朋友们只使用Firefox，但我很好奇，是什么原因造成这一点。我哪里出错了。

谢谢！

编辑！ 我在Chrome的调试器中做了一些挖掘。原来的回应没有问题。当我设置断点时，我发现div被新内容填充。但是，回调函数会连续调用两次。完成后，我恢复到以前的内容，服务器响应无处可寻。发生什么事？

您正在尝试使用哪个“*其他浏览器*”？什么版本？ ['string.trim（）']（HTTPS：//developer.mozilla。org/en-US/docs/JavaScript/Reference/Global_Objects/String/Trim）是一种相对较新的方法，无法在任何地方使用：[compatibility]（http://kangax.github.com/es5-compat-table/ ＃String.prototype.trim）。另外，请检查您的浏览器的开发工具。大多数现在都内置了它们，并允许在发生异常时暂停。 – 2013-03-26 23:12:32

对不起，现在，IE8，Chome桌面winxp和android，Opera for Android，Firefox 19 for WinXP和android版本，HTC oneX浏览器，Iphone浏览器和Linux的Midori浏览器。只有两个Firefox版本做我想要的... – mickey 2013-03-26 23:22:50

另外，删除'trim（）'什么也没做。 – mickey 2013-03-26 23:27:42

答

就像乔纳森说你没有提到哪个浏览器很难给你具体的答案。此外，您的AJAX实现似乎不完整，请试试这个

//Put this on top before anything 
if(!String.prototype.trim) 
{ 
    String.prototype.trim = function() 
    { 
     return this.replace(/^\s+|\s+$/g,''); 
    }; 
}

也与此更新您的AJAX相关的代码。

var xmlhttp; 
if (window.XMLHttpRequest) 
{ 
    // code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest(); 
} 
else 
{ 
    // code for IE6, IE5 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
} 
xmlhttp.onreadystatechange=function() 
{ 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
     //Do something 
    } 
} 
xmlhttp.open("POST","textinput.php",true); 
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
//xmlhttp.send("fname=Henry&lname=Ford");

您也可以尝试使用库如jQuery，这将照顾大多数浏览器不一致。

为什么'.send（）'注释掉了？ – mickey 2013-03-26 23:30:16

根据你的建议更新没有帮助。 – mickey 2013-03-27 09:20:22

发送使用示例数据，所以我评论它。对不起，我应该在之前提到过。你可以请更新你尝试过的代码或者可能使用小提琴，以便我可以给你适当的答案。 – nicholasnet 2013-03-27 13:31:30

答

我今天面对完全相同的问题，明天可能对某人有用。

在表单元素中，输入类型是“提交”，表单有onsubmit =“func（）”。如下图所示：

<form id="x" name="x" onsubmit="func()"> 
    <input type="submit" value="Submit"></input> 
</form>

出于某种原因，我不明白，在镀铬的整个页面（）与xmlhttp.onreadystatechange =函数返回后重新装入“？”到底。完全像OP发布的。

我在某处读取使用type =“button”，然后表单元素必须更新为onclick =“func（）”。下面的代码是完美的工作对我来说：

<form id="x" name="x" onclick="func()"> 
    <input type="button" value="Submit"></input> 
</form>

这将是巨大的，如果有人可以解释为什么它发生这种方式。

onreadystatechange触发器重新加载页面

相关推荐