2012-05-08 50 views
8

http://pastebin.com/dttyN3L6如何不斷更新頁面

處理表單文件名爲upload.php的

我從來沒有真正使用jQuery的/ js的所以我不確定我會怎麼做這或一部分我會在那裏放置代碼。

它有事情做與此setInterval (loadLog, 2500);

另外,我怎麼可以把它使用戶可以提交表單沒有頁面刷新?

$.ajax({ 
    type: "POST", 
    url: "upload.php", 
    data: dataString, 
    success: function() { 

    } 
}); 
return false; ` 

<?php 
$conn1 = mysqli_connect('xxx') or die('Error connecting to MySQL server.'); 
$sql = "SELECT * from text ORDER BY id DESC LIMIT 1"; 
$result = mysqli_query($conn1, $sql) or die('Error querying database.'); 
while ($row = mysqli_fetch_array($result)) { 
     echo '<p>' . $row['words'] . '</p>'; 
} 
mysqli_close($conn1); 

?> 

</div> 

<?php  
if (!isset($_SESSION["user_id"])) { 

} else { 
     require_once('form.php'); 
} 

?> 
+0

什麼與那個pastebin縮進?你可以在這裏發佈你的代碼嗎? – elclanrs

+0

只爲你@elclanrs – JakeParis

+0

研究jQuery的[PeriodicalUpdater]插件(http://archive.plugins.jquery.com/project/periodicalupdater)。 – nickb

回答

9

您可以提交一個表單而無需刷新頁面是這樣的:

form.php的:

<form action='profile.php' method='post' class='ajaxform'> 
<input type='text' name='txt' value='Test Text'> 
<input type='submit' value='submit'> 
</form> 

<div id='result'>Result comes here..</div> 

profile.php:

<?php 
     // All form data is in $_POST 

     // Now perform actions on form data here and 
     // create an result array something like this 
     $arr = array('result' => 'This is my result'); 
     echo json_encode($arr); 
?> 

jQuery的:

jQuery(document).ready(function(){ 

    jQuery('.ajaxform').submit(function() { 

     $.ajax({ 
      url  : $(this).attr('action'), 
      type : $(this).attr('method'), 
      dataType: 'json', 
      data : $(this).serialize(), 
      success : function(data) { 
         // loop to set the result(value) 
         // in required div(key) 
         for(var id in data) { 
          jQuery('#' + id).html(data[id]); 
         } 
         } 
     }); 

     return false; 
    }); 

}); 

,如果你要調用一個Ajax請求沒有一個特定的時間後刷新頁面,你可以嘗試這樣的事:

var timer, delay = 300000; 

timer = setInterval(function(){ 
    $.ajax({ 
     type : 'POST', 
     url  : 'profile.php', 
     dataType: 'json', 
     data : $('.ajaxform').serialize(), 
     success : function(data){ 
        for(var id in data) { 
        jQuery('#' + id).html(data[id]); 
        } 
       } 
    }); 
}, delay); 

而且你可以在任何像這樣的時候停止計時器:

clearInterval(timer); 

希望這會給你一個方向來完成你的任務。

+5

您應該使用jQuery的$ .each()方法,而不是使用for(數組中的索引)。我傾向於認爲,如果你包括一個圖書館,你應該充分利用它,而不是混合搭配。 –

0

這是非常簡單的。 要使用jQuery使用CSS選擇器訪問元素,例如,用名稱爲「foo」你做的就是輸入字段的值如下:

var fooVal = $("input[name=foo]").val(); 

要通過其發送至服務器,你是要追加的事件偵聽器(例如,單擊),以提交按鈕/任何其他元素

var data = { varName : fooVal }; 
var url = "http://example.com"; 
var responseDataType = "json"; 
function parseResponse(JSON) 
{ 
    // your code handling server response here, it's called asynchronously, so you might want to add some indicator for the user, that your request is being processed 
} 

$("input[type=submit]").on('click', function(e){ 
    e.preventDefault(); 
    $(this).val("query processing"); 
    $.post(url,data, parseResponse, responseDataType); 
return false; 
}); 

如果你想要做的不斷更新,你可以,當然,新增計時器或一些其他的邏輯。但是,我希望你能明白如何處理這類案件;

0

要回答你的問題的一部分,你可以使用ajax。

<html><head></head><body> 
<div id="feed"></div> 
<script type="text/javascript"> 
var refreshtime=10; 
function tc() 
{ 
asyncAjax("GET","upload.php",Math.random(),display,{}); 
setTimeout(tc,refreshtime); 
} 
function display(xhr,cdat) 
{ 
if(xhr.readyState==4 && xhr.status==200) 
{ 
    document.getElementById("feed").innerHTML=xhr.responseText; 
} 
} 
function asyncAjax(method,url,qs,callback,callbackData) 
{ 
    var xmlhttp=new XMLHttpRequest(); 
    //xmlhttp.cdat=callbackData; 
    if(method=="GET") 
    { 
     url+="?"+qs; 
    } 
    var cb=callback; 
    callback=function() 
    { 
     var xhr=xmlhttp; 
     //xhr.cdat=callbackData; 
     var cdat2=callbackData; 
     cb(xhr,cdat2); 
     return; 
    } 
    xmlhttp.open(method,url,true); 
    xmlhttp.onreadystatechange=callback; 
    if(method=="POST"){ 
      xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 
      xmlhttp.send(qs); 
    } 
    else 
    { 
      xmlhttp.send(null); 
    } 
} 
tc(); 
</script> 
</body></html>