1. 首頁
  2. 問答
  3. AJAX刷新網站的破壞版式

AJAX刷新網站的破壞版式

2010-08-16 61 views
2

當我運行此代碼時，頁面重複其自我。我也需要刷新它，而不是這樣做。AJAX刷新網站的破壞版式

像這樣：

Image

EDITED代碼下面：

<?php include 'config.php' ?> 
<script language="javascript"> 
function createRequestObject() { 

    var req; 

    if(window.XMLHttpRequest){ 
     // Firefox, Safari, Opera... 
     req = new XMLHttpRequest(); 
    } else if(window.ActiveXObject) { 
     // Internet Explorer 5+ 
     req = new ActiveXObject("Microsoft.XMLHTTP"); 
    } else { 
     // There is an error creating the object, 
     // just as an old browser is being used. 
    alert("Your Browser Does Not Support This Script - Please Upgrade Your Browser ASAP"); 
    } 

    return req; 

} 

// Make the XMLHttpRequest object 
var http = createRequestObject(); 

function sendRequest(page) { 

    // Open PHP script for requests 
    http.open('get', page); 
    http.onreadystatechange = handleResponse; 
    http.send(null); 

} 

function handleResponse() { 

    if(http.readyState == 4 && http.status == 200){ 

     // Text returned FROM the PHP script 
     var response = http.responseText; 

     if(response) { 
     // UPDATE ajaxTest content 
     document.getElementById("msgstatus").innerHTML = response; 
     } 

    } 

} 


function repeatloop() 
{ 
sendRequest('test.php'); // replace "inbox-status.php" with your php page's url 
setTimeout("repeatloop()", 10000); 
} 

var replacementDiv = document.createElement("div"); 
replacementDiv.innerHTML = response; 
document.getElementById("msgstatus").innerHTML = replacementDiv.firstChild.innerHTML; 

window.onload=function() { 
repeatloop(); 
} 
</script> 
<link rel="stylesheet" href="style.css" type="text/css" /> 
</head><body> 

<?php // Collet Latest Posts 

$query = " 
    SELECT Users.UserID, Wall.Message, Users.Forename, Users.Surname 
    FROM Wall 
    INNER JOIN Users ON Wall.UserID = Users.UserID 
    ORDER BY Wall.MessageID DESC 
    LIMIT 20;"; 
$result = mysql_query($query) or die('Invalid query: ' . mysql_error()); 

// Collet Post User 
    ?> 
    <div id ="container"> 
     <div id="insideleft"> 
      <ul> 
       <li><a href="index.php">Home</a></li> 
       <li><a href="profile.php">Edit Profile</a></li> 
       <li><a href="wall.php">Community Wall</a></li> 
       <li><a href="logout.php">Logout</a></li> 
      </ul> 
     </div> 
     <div id="insideright"> 
      <h1>Community Wall</h1> 
      <br /> 
      <div id="postcontainer"> 
       <form method="post" action="wall.php" name="wallpost" id="wallpost"> 
        <input type="text" name="message" id="message" class="message" /> 
        <input type="submit" name="messagesub" id="messagesub" value="Post Message" class="post"/><br /><br /> 
       </fieldset> 
       </form> 
      </div> 
      <span id="msgstatus"> 
      <?php while ($row = mysql_fetch_assoc($result)) { ?> 
      <div id="messagecontainer"> 
      <img class="pic" src="dummy.gif"> 
      <p class="messageposter"> 
      <?php echo "<b>{$row['Forename']} {$row['Surname']}</b><br />"; ?> 
      </p> 
      <p class="message"> 
      <?php echo stripslashes($row['Message']); ?> 
      </p> 
      </div> 
      </span> 
<?php 
} ?>

來源

2010-08-16 ritch

回答

0

首先 - 邁克爾指出，你應該使用一個div味精狀態：

二 - 假設的例子文件名爲test.php的，你加載網頁的全部內容回msgstatus子元素（而不僅僅是SQL）。除了瀏覽器不允許在AJAX回覆中發佈可執行代碼（因此第二個嵌入層被忽略）之外，您實際上正在將其設置爲無窮大。

我假設你已經簡化了你的代碼，但以下是根據你發佈的內容更新的代碼。注意這裏有一些風格差異（隨意忽略）！），當段落處理換行符時（也就是我刪除它），還包含BRp.MESSAGEPOSTER。

<?php 

include 'config.php' 

function latestPosts() { 
    $query = " 
    SELECT Users.UserID, Wall.Message, Users.Forename, Users.Surname 
    FROM Wall 
    INNER JOIN Users ON Wall.UserID = Users.UserID 
    ORDER BY Wall.MessageID DESC 
    LIMIT 20;"; 

    $result = mysql_query($query) or die('Invalid query: ' . mysql_error()); 

    while ($row=mysql_fetch_assoc($result)) { 
     echo "<div id=\"messagecontainer\"> 
    <img class=\"pic\" src=\"dummy.gif\"> 
    <p class=\"messageposter\"> 
     <b>".$row["Forename"]." ".$row["Surname"]."</b> 
    </p> 
    <p class=\"message\"> 
     ".stripslashes($row["message"]." 
    </p> 
</div>\n"; 
    } 
} 


//Test for AJAX on the post - only output the values. 
if ($_REQUEST['ajax']==1) { 
    latestPosts(); 
    exit(); 
} 


?> 
<script language="javascript"> 
function createRequestObject() { 

    var req; 

    if(window.XMLHttpRequest){ 
     // Firefox, Safari, Opera... 
     req = new XMLHttpRequest(); 
    } else if(window.ActiveXObject) { 
     // Internet Explorer 5+ 
     req = new ActiveXObject("Microsoft.XMLHTTP"); 
    } else { 
     // There is an error creating the object, 
     // just as an old browser is being used. 
    alert("Your Browser Does Not Support This Script - Please Upgrade Your Browser ASAP"); 
    } 

    return req; 

} 

// Make the XMLHttpRequest object 
var http = createRequestObject(); 

function sendRequest(page,vars) { 

    // Open PHP script for requests 
    http.open('get', page+'?'+vars); 
    http.onreadystatechange = handleResponse; 
    http.send(null); 

} 

function handleResponse() { 

    if(http.readyState == 4 && http.status == 200){ 

     // Text returned FROM the PHP script 
     var response = http.responseText; 

     if(response) { 
     // UPDATE ajaxTest content 
     document.getElementById("msgstatus").innerHTML = response; 
     } 

    } 
} 


function repeatloop() 
{ 
    sendRequest('test.php','ajax=1'); // replace "inbox-status.php" with your php page's url 
    setTimeout("repeatloop()", 10000); 
} 

window.onload=function() {repeatloop();} 
</script> 
<link rel="stylesheet" href="style.css" type="text/css" /> 
</head><body> 
    <div id ="container"> 
     <div id="insideleft"> 
      <ul> 
       <li><a href="index.php">Home</a></li> 
       <li><a href="profile.php">Edit Profile</a></li> 
       <li><a href="wall.php">Community Wall</a></li> 
       <li><a href="logout.php">Logout</a></li> 
      </ul> 
     </div> 
     <div id="insideright"> 
      <h1>Community Wall</h1> 
      <br /> 
      <div id="postcontainer"> 
       <form method="post" action="wall.php" name="wallpost" id="wallpost"> 
        <input type="text" name="message" id="message" class="message" /> 
        <input type="submit" name="messagesub" id="messagesub" value="Post Message" class="post"/><br /><br /> 
       </fieldset> 
       </form> 
      </div> 
     <div id="msgstatus"> 
<?php 
//Output the current posts - you may not even want to do this since AJAX will fill it in right after load 
latestPosts();?> 
     </div> 
    <!-- ... we have some truncating! --> 
?>

的其他一些觀點：

如果你有一個AJAX的解決方案去，你可能要考慮離開框爲空在首發HTML（降latestsPosts（）;在線118），和然後在頁面呈現後加載列表。

這是目前編碼方式，每10秒的完整列表是由AJAX重新加載，您可能要跟蹤的最新帖子（也許ID？），並傳回給AJAX命令，這樣可以：

  1. 更新僅在更改時提供。（JS響應處理將忽略空的返回 - 當前代碼將用空白覆蓋狀態）
  2. 僅提供新條目。 （JS響應處理會預先對現有的msgstatus對象作出新的響應）。

因爲這是你應該使用POST動詞，不能獲得一個動態的AJAX腳本（這還需要一些改變，你如何發佈變量 - 在http.open線+'?'+vars需要在身體代替）。從技術上講，GET允許瀏覽器緩存結果 - 我特別注意到Internet Explorer上的這一點（具有諷刺意味的是，他們似乎遵循W3C規範，而其他規則則沒有）。長話短說 - 有些用戶可能會抱怨消息不能及時更新。

來源

2010-08-30 14:57:20 Rudu

0

跨度不能包含塊級元素 - 無的div在跨度。

看起來像你的AJAX請求response值包含id="msgstatus"範圍，所以你在做什麼與你的innerHTML = reponse是添加該元素的新版本。

如果你不想改變從AJAX腳本的響應，你可以嘗試：

var replacementDiv = document.createElement("div"); 
replacementDiv.innerHTML = response; 
document.getElementById("msgstatus").innerHTML = replacementDiv.firstChild.innerHTML;

例子：http://jsfiddle.net/TdmuL/

來源

2010-08-16 00:51:48

+0

嗨，感謝您的幫助。我已經將它添加到代碼，但刷新不起作用。上面編輯過的 – ritch 2010-08-16 01:55:01

+0

。 – ritch 2010-08-16 01:55:16

0

嗯......我沒看過你所有的帖子，但是當你通過ajax加載某些東西時，只需要加載一部分佈局......而不是整個佈局本身,,,這只是錯誤的........並得到效果就像你的情況一樣。

SO因爲你使用的是PHP，試圖篩選Ajax請求，然後嘗試輸出所需要的部分只回了JavaScript的...........

來源

2010-08-16 02:01:17 Starx

0

你可以做一個單獨的PHP您的ajax代碼的文件，並將該代碼放入一個iframe中，並設置特定時間間隔的iframe刷新時間。這樣，你特定的部分被刷新並且可以從db訪問值。

來源

2010-08-30 12:33:34 Rubyist

0

在我看來，如果您想要使用JavaScript加載的內容（由PHP構建）與test.php分離，然後將其包含回test.php中會更好。這樣，test.php變得更乾淨，新文件可以有Ajax請求，希望能解決你的問題。

來源

2010-09-01 12:12:18 chrisjkirkham

相關問題

 相關問題