2012-05-23 21 views
17

Escribí una página web donde un usuario puede ingresar una entrada de registro que se almacena en una base de datos y luego se recupera e imprime en la página usando ajax. Todavía soy bastante nuevo en el ajax y me preguntaba si alguien podría explicarme qué hace return false; al final de mi código. y es incluso necesario?¿Qué significa "devolver falso"; ¿hacer?

Si coloco el segundo código ajax después del return false ¡el código no funciona! ¿Puedes explicarme por qué?

//handles submitting the form without reloading page 
$('#FormSubmit').submit(function(e) { 
    //stores the input of today's data 
    var log_entry = $("#LogEntry").val(); 
    // prevent the form from submitting normally 
    e.preventDefault(); 

    $.ajax({ 
     type: 'POST', 
     url: 'behind_curtains.php', 
     data: { 
      logentry: log_entry 
     }, 
     success: function() { 
      alert(log_entry); 
      //clears textbox after submission 
      $('#LogEntry').val(""); 
      //presents successs text and then fades it out 
      $("#entered-log-success").html("Your Entry has been entered."); 
      $("#entered-log-success").show().fadeOut(3000); 
     } 
    }); 
    //prints new log entries on page upon submittion 
    $.ajax({ 
     type: 'POST', 
     url: '/wp-content/themes/childOfFanwood/traininglog_behind_curtains.php', 
     data: { 
      log_entries_loop: "true" 
     }, 
     success: function(data) { 
      alert(data); 
      $("#log-entry-container").html(""); 
      $("#log-entry-container").html(data); 
     } 
    }); 
    return false; 
}); 
​ 
+0

detiene el comportamiento de envío de formulario predeterminado –

+0

@Dagon. No solo eso. – gdoron

Respuesta

35

Lo que voy a escribir aquí es cierto para eventos jQuery,
Para vainilla Javascript eventos leídos @ T. J. Crowder comentario en la parte inferior de la respuesta


return false dentro de una devolución de llamada impide que el comportamiento por defecto. Por ejemplo, en un evento submit, no envía el formulario.

return false también deja de burbujear, por lo que los padres del elemento no sabrán que ocurrió el evento.

return false es equivalente a event.preventDefault() + event.stopPropagation()

Y, por supuesto, todo el código que existe después no se ejecutará la línea return xxx. (Al igual que con todos los lenguajes de programación que conozco)

Tal vez usted ha resultado útil:
Stop event bubbling - increases performance?


un "verdadero" demostración para explicar la diferencia entre return false y event.preventDefault():

Marca:

<div id="theDiv"> 
    <form id="theForm" > 
     <input type="submit" value="submit"/> 
    </form> 
</div>​ 

JavaScript:

$('#theDiv').submit(function() { 
    alert('DIV!'); 
}); 
$('#theForm').submit(function(e) { 
    alert('FORM!'); 
    e.preventDefault(); 
});​ 

Ahora ... cuando el usuario envía el formulario, el primer controlador se envía el formulario, el cual preventDefault() -> forma, no se presentarán, pero el evento se propaga a el div, desencadenando su controlador de envío.

Live DEMO

Ahora, si la forma de presentar manejador cancelaría el burbujeo con return false:

$('#theDiv').submit(function() { 
    alert('DIV!'); 
}); 
$('#theForm').submit(function(event) { 
    alert('FORM!'); 
    return false; 
    // Or: 
    event.preventDefault(); 
    event.stopPropagation(); 
});​ 

El div que ni siquiera sabía que había un envío del formulario.

Live DEMO


¿Qué return false hacer en JavaScript básico eventos

retorno falsa de un manejador de DOM2 (addEventListener) no hace nada en absoluto (ni impide que el defecto ni deje de burbujear; desde un controlador DOM2-ish de Microsoft (attachEvent), evita el valor predeterminado pero no el borboteo; desde un controlador DOM0 (onclick="return ..."), impide el valor predeterminado (siempre que incluya el retorno en el atributo) pero no burbujee; desde un manejador de eventos jQuery, hace ambas cosas, porque eso es algo de jQuery. Detalles y pruebas en vivo aquí - T.J. Crowder

+1

+1 para responder a la pregunta real, incluso como una ocurrencia tardía –

+0

+1 Sí, estaba a punto de escribir sobre 'stopPropagation' pero vi que ya lo has mencionado :) – VisioN

+0

¿Eso significa que tienes' e.preventDefault() ; 'no necesita' return false; 'si ambos hacen lo mismo? – Nope

2

En este caso, return false; impide la acción predeterminada (que es la forma remitentes).

Aunque es probable que sea mejor utilizar e.preventDefault();

+0

Tiene razón, evita la acción predeterminada, pero también detiene el burbujeo. – gdoron

+0

'En este caso' - el envío del formulario no se haría. – ahren

+0

¿Por qué crees que es así? – gdoron

0

debido Ajax no lo hace su formulario que debe presentarse con la forma normal. Por lo tanto, debe devolver el valor falso para evitar el comportamiento predeterminado del formulario.

3

Cualquier código después de la declaración return en una función nunca se ejecutará. Deja de ejecutar la función y hace que esta función devuelva el valor pasado (false en este caso). Su función es devolución de llamada de evento "enviar". Si esta devolución de llamada devuelve false, el formulario no se enviará en realidad. De lo contrario, se enviará como lo haría sin JavaScript.

Cuestiones relacionadas