1

我正在尝试学习一些组合的 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 应该是的。但我之所以这样称呼它，是因为它应该textfield在每个 keyup 事件中发送字符串。据我了解，感觉有点 ajax。

尽管如此，正如我所说，这在 Firefox 上非常有效，但是当我在其他浏览器上尝试时没有任何反应。所发生的一切似乎是页面重新加载并附?加到地址栏中的 URL...

我可以要求我所有的朋友只使用 firefox，但我很好奇是什么原因造成的。我哪里错了。

谢谢！

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

4

2 回答 2

1

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

在表单元素中，输入类型为“提交”，表单具有 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>

如果有人能解释为什么会这样，那就太好了。

于 2016-08-20T23:24:52.873 回答
0

就像乔纳森说的你没有提到哪个浏览器所以很难给你具体的答案。此外，您的 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 这样的库来解决大多数浏览器的不一致问题。

于 2013-03-26T23:23:53.923 回答