2012-05-08 1 views
8

http://pastebin.com/dttyN3L6Come aggiornare continuamente una parte della pagina

Il file che elabora la forma è chiamata upload.php

ho mai realmente utilizzato jquery/js, quindi sono sicuro di come avrei fatto questo o dove metterei il codice.

Ha qualcosa a che fare con questo setInterval (loadLog, 2500);

Inoltre, come posso fare in modo che l'utente può inviare un modulo senza la pagina rinfrescante?

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

    } 
}); 
return false; ` 

e

<?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

Che cosa è il rientro di questo pastebin? Puoi pubblicare il tuo codice qui? – elclanrs

+0

Solo per te @elclanrs – JakeParis

+0

Ricerca il plug-in [PeriodicalUpdater] (http://archive.plugins.jquery.com/project/periodicalupdater) per jQuery. – nickb

risposta

9

È possibile inviare un modulo senza aggiornare una pagina simile a questa:

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; 
    }); 

}); 

e se si desidera chiamare una richiesta AJAX senza aggiornare la pagina dopo un momento particolare, si può provare qualcosa di simile:

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); 

E si può interrompere il timer in qualsiasi momento come questo :

clearInterval(timer); 

Spero che questo ti dia una direzione per completare il tuo compito.

+5

Invece di usare for (index in array), dovresti usare il metodo $ .each() di jQuery. Tendo a credere che se includi una libreria, dovresti farne pieno uso e non mescolare e abbinare. –

0

questo è abbastanza semplice. per accedere agli elementi utilizzando jQuery si utilizza selettori CSS, per esempio, per ottenere il valore di un campo di immissione con il nome "foo" effettuare le seguenti operazioni:

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

per inviarlo verso il server si sta per aggiungere un listener di eventi (ad esempio, fare clic) per il pulsante di invio/qualsiasi altro elemento

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; 
}); 

Se si vuole fare un aggiornamento costante, è possibile, ovviamente, aggiungere i timer o qualche altra logica. Ma spero che tu abbia l'idea di come procedere in questi casi;

0

Per rispondere a una parte della domanda, è possibile utilizzare 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>