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被新內容填充。但是，回調函數會連續調用兩次。完成後，我恢復到以前的內容，服務器響應無處可尋。發生什麼事？

來源

2013-03-26 mickey

您正在嘗試使用哪個「*其他瀏覽器*」？什麼版本？ ['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，這將照顧大多數瀏覽器不一致。

來源

2013-03-26 23:23:53 nicholasnet

爲什麼'.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>

這將是巨大的，如果有人可以解釋爲什麼它發生這種方式。

來源

2016-08-20 23:24:52

onreadystatechange觸發器重新加載頁面

回答

相關問題