1. 首页
  2. 问答
  3. AJAX刷新网站的破坏版式

AJAX刷新网站的破坏版式

2010-08-16 60 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

相关问题

 相关问题