2012-05-08 3 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

Что с этим пастебином отступают? Можете ли вы разместить свой код здесь? – elclanrs

+0

Просто для вас @elclanrs – JakeParis

+0

Изучите плагин [PeriodicalUpdater] (http://archive.plugins.jquery.com/project/periodicalupdater) для jQuery. – 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

Вместо использования for (index in array) вы должны использовать метод $ .each() jQuery. Я склонен полагать, что если вы включите библиотеку, вы должны полностью ее использовать, а не смешивать и сопоставлять. –

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> 
Смежные вопросы