23

ユーザーがデータベースに保存されているログエントリを入力し、を使用してページに取得して印刷できるWebページを作成しajaxました。私はまだまったく新しいので、誰かが私のコードの最後で何をするのajaxか説明してもらえないかと思っていました。return false;そしてそれも必要ですか?

return falseコードが機能しない後に2番目のajaxコードを配置すると!理由を教えていただけますか?

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

5 に答える 5

37

ここで書くことはjQueryイベントに当てはまります
。バニラJavaScriptイベントについては、回答の下部にある@TJCrowderコメントを読んでください。


return falseコールバック内では、デフォルトの動作が妨げられます。たとえば、submitイベントでは、フォームは送信されません。

return falseまた、バブリングが停止するため、要素の親はイベントが発生したことを知りません。

return falseevent.preventDefault()+と同等ですevent.stopPropagation()

そしてもちろん、そのreturn xxx行の後に存在するすべてのコードは実行されません。(私が知っているすべてのプログラミング言語と同じように)

たぶん、これは役に立ちます:
イベントのバブリングを停止します-パフォーマンスを向上させますか?


との違いを説明する「実際の」デモ:return falseevent.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にバブルされ、送信ハンドラーがトリガーされます。

ライブデモ

ここで、フォーム送信のハンドラーがバブリングをキャンセルする場合return false

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

divは、フォームの送信があったことすら知りませんでした。

ライブデモ


return falseバニラJavaScriptイベントで何をしますか

DOM2ハンドラー()からfalseを返すと、addEventListener何も実行されません(デフォルトを防止もバブリングも停止しません。MicrosoftDOM2風ハンドラー()attachEventからは、デフォルトを防止しますが、バブリングは防止しません。DOM0ハンドラー(onclick="return ...")からは、デフォルトを防止します。 (属性にreturnを含める場合)ただし、バブリングは行いません。jQueryイベントハンドラーからは、jQueryであるため、両方を実行します。詳細とライブテストはこちら– TJ Crowder

于 2012-05-23T23:21:36.807 に答える
4

関数内のステートメントの後のコードreturnは実行されません。関数の実行を停止し、この関数の戻り値を渡します(falseこの場合)。あなたの関数は「送信」イベントコールバックです。このコールバックが返された場合false、フォームは実際には送信されません。それ以外の場合は、JavaScriptを使用しない場合と同じように送信されます。

于 2012-05-23T23:24:03.597 に答える
3

この場合、return false;デフォルトのアクション(フォームの送信)を防ぎます。

おそらく使用する方が良いですがe.preventDefault();

于 2012-05-23T23:22:14.067 に答える
1

ajaxのため、通常の方法でフォームを送信することは望ましくありません。したがって、フォームのデフォルトの動作を防ぐには、falseを返す必要があります。

于 2012-05-23T23:22:39.023 に答える
0

return ステートメントは関数の実行を終了します。これは重要です。return を使用すると、コードが短絡してすぐに実行が停止し、次のコード行が実行されなくなります。

于 2018-11-30T14:08:32.567 に答える