Question

我正在尝试学习一些组合的php，javascript，sql，html的东西...... 我创建了一些在firefox（WinXP和Android版本）上完美运行的东西。所需的操作是，每当我点击“进程！”按钮时，php脚本会将文本放入“textarea”中，将每个单词放入数据库并吐出一些HTML ...

<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”，我不知道这是ajax应该是什么。但我称之为是因为它应该在每个keyup事件中发送textfield中的字符串。据我所知，感觉有点ajax。

然而，正如我所说，这在firefox上运行得非常好，但是当我在其他浏览器上尝试时没有任何反应。所有发生的事情似乎是页面重新加载时附加?到地址栏中的URL ...

我可以让所有朋友都使用firefox，但我很好奇是什么导致了这个问题。我哪里出错了。

谢谢！

修改<！/强> 我在Chrome的调试器中做了一些挖掘工作。结果是响应恢复正常。当我设置断点时，我看到div被新内容填充。但是，回调函数连续两次被调用。完成后我将恢复到之前的内容，服务器响应无处可寻。发生了什么事？

Answer 1

我今天遇到了完全相同的问题，可能对明天有用。

在表单元素中，输入类型为“submit”，表单为onsubmit =“func（）”。如下所示：

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

由于某些原因我不明白，在chrome中，从xmlhttp.onreadystatechange = function（）返回“？”后重新加载整个页面到底。完全像OP发布的那样。

我读到某处使用type =“button”，然后表单元素必须更新为onclick =“func（）”。以下代码对我来说非常合适：

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

如果有人可以解释为什么会这样发生，那将会很棒。

Answer 2

就像乔纳森所说，你没有提到哪种浏览器很难给你具体答案。另外你的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这样的库来处理大多数浏览器的不一致。

onreadystatechange触发重新加载页面

2 个答案: