2012-05-08 16 views
8

http://pastebin.com/dttyN3L6Cómo actualizar continuamente una parte de la página

El archivo que procesa el formulario se llama upload.php

nunca he utilizado realmente jquery/js así que estoy seguro de cómo iba a hacer esto o donde pondría el código

Tiene algo que ver con esto setInterval (loadLog, 2500);

Además, ¿cómo puedo hacer que lo que el usuario puede enviar un formulario sin la página refrescante?

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

    } 
}); 
return false; ` 

y

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

Whats with that pastebin indenting? ¿Puedes publicar tu código aquí? – elclanrs

+0

Solo para ti @elclanrs – JakeParis

+0

Investiga el plugin [PeriodicalUpdater] (http://archive.plugins.jquery.com/project/periodicalupdater) para jQuery. – nickb

Respuesta

9

Puede enviar un formulario sin actualizar una página o menos así:

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

}); 

Y Si desea llamar a una petición AJAX sin actualizar la página después de un tiempo determinado, puede intentar algo como esto:

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

Y se puede detener el temporizador en cualquier momento como este :

clearInterval(timer); 

Espero que esto le dará una dirección para completar su tarea.

+5

En lugar de usar for (index in array), debe usar el método $ .each() de jQuery. Tiendo a creer que si incluyes una biblioteca, deberías hacer un uso completo de ella y no mezclarla. –

0

Esto es bastante simple. Para acceder a los elementos con jQuery que utilizan selectores CSS, por ejemplo, para obtener el valor de un campo de entrada con el nombre "nombre" hace lo siguiente:

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

para enviarla al servidor son para anexar una detector de eventos (por ejemplo, haga clic) en el botón de envío/cualquier otro 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; 
}); 

Si usted quiere hacer cambios constantes, se puede, por supuesto, añadir temporizadores o alguna otra lógica. Pero espero que tenga la idea de cómo proceder en tales casos;

0

Para responder a parte de su pregunta, puede usar 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> 
Cuestiones relacionadas