2012-05-23 2 views
17

Я написал веб-страницу, где пользователь может ввести запись в журнале, которая хранится в базе данных, а затем извлекается и печатается на странице с помощью ajax. Я до сих пор совершенно новичок в ajax и задавался вопросом, может ли кто-нибудь объяснить мне, что делает return false; в конце моего кода? и это даже необходимо?Что означает «return false»; делать?

Если я положил второй код ajax после return false, код не работает! не могли бы вы объяснить мне почему?

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

останавливает отправку по умолчанию формы отправки –

+0

@Dagon. Не только это. – gdoron

ответ

35

То, что я буду писать здесь верно для JQuery событий,
Для ваниль Javascript событий читать @ T.J. Crowder комментарий в нижней части ответа


return false внутри обратного вызова предотвращает поведение по умолчанию. Например, в событии submit он не отправляет форму.

return false также останавливает пузыри, поэтому родители элемента не будут знать, что произошло событие.

return false эквивалентно event.preventDefault() + event.stopPropagation()

И конечно, весь код, который существует после return xxx линия не будет выполнена. (Как и во всех языках программирования, я знаю)

Может быть, вы найдете это полезным:
Stop event bubbling - increases performance?


"реальный" демо, чтобы объяснить разницу между return false и event.preventDefault():

Разметка:

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

Теперь ... когда пользователь отправить форму, то первый обработчик формы представить, что preventDefault() -> форма не будет представлен, но событие пузыри div, запускающий обработчик отправки.

Live DEMO

Теперь обработчик, если форма представить был бы отменить кипела return false:

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

ДИВ даже не знаю, что было представление формы.

Live DEMO


Что return false делать в ванили JavaScript события

возвращение ложных от обработчика DOM2 (addEventListener) ничего не делает вообще (ни предотвращает по умолчанию и не перестает пузырится; из обработчика Microsoft DOM2-ish (attachEvent), он предотвращает по умолчанию, но не пузырится, из обработчика DOM0 (onclick="return ...") он предотвращает по умолчанию (если вы включаете возврат в атрибут), но не пузырясь; из обработчика события jQuery, он делает оба, потому что это вещь jQuery. Подробности и живые тесты здесь - T.J. Кроудер

+1

+1 для ответа на реальный вопрос, даже как задумка –

+0

+1 Да, я собирался написать о 'stopPropagation', но видел, что вы уже упоминали об этом :) – VisioN

+0

Означает ли это, если у вас есть' e.preventDefault() ; 'вам не нужно' return false ', если они оба делают то же самое? – Nope

2

В этом случае return false; предотвращает действие по умолчанию (которое является формой представления).

Хотя это, вероятно, лучше использовать e.preventDefault();

+0

Вы правы, это предотвращает действие по умолчанию, но оно также прекращает пузыриться. – gdoron

+0

«В этом случае» - представление формы не было бы пузырьком. – ahren

+0

Почему вы так думаете? – gdoron

0

из-за AJAX вы не ваша форма будет представлен с обычным способом. Поэтому вам нужно вернуть false, чтобы предотвратить поведение формы по умолчанию.

3

Любой код после return Оператор в функции никогда не будет выполнен. Он прекращает выполнение функции и возвращает это возвращаемое значение функции (false в этом случае). Ваша функция - отправить запрос события. Если этот обратный вызов возвращает false, форма не будет отправлена ​​на самом деле. В противном случае он будет представлен, как и без JavaScript.

Смежные вопросы