[Ajax] retun & e.preventDefault

小弟是從C#開始寫程式的,一直有種return 就是跳開全部事情的感覺

但今天發生一個是點了按鈕 <a href> 後

<a id="nextBtn" href="@Url.Action("ActionName", "Plan")">下一步</a>


執行一段ajax 以下是程式碼

  $("#nextBtn").on('click', function (e): void {
                $.ajax({
                    type: "POST",
                    headers: self.headers,
                    url: Router.GetPath("ActionName","Plan"),
                    async: false,
                    data: { prjIdEncode: prjId },
                    dataType: "json",
                    //檢查內容是否必填
                    success: function (result) {                          
                        Message.AlertMessage("必須填寫經費項目!", null, null);
                        return; 
                        alert("after return");
                    },
                    //失敗
                    error: function (data) {
                        Message.AlertMessage("讀取檢查失敗!", null, null);
                    }
                });
                alert(123);
                $("#nextBtn").attr("href", $("#nextBtn").attr("href") + "?prjid=" + prjId);
            });

Q1. alert(123) 會跑嗎? 

A: 答案是會的,因為return 是跳開 ajax 這段程式,所以還是會執行ajax以外的程式

Q2:因為原本是點了a 這個Click 那頁面會跳轉嗎?

A:答案也還是會的,因為本來就是執行了這個 a tag 的click

  $("#nextBtn").on('click', function (e): void {
                $.ajax({
                    type: "POST",
                    headers: self.headers,
                    url: Router.GetPath("ActionName","Plan"),
                    async: false,
                    data: { prjIdEncode: prjId },
                    dataType: "json",
                    //檢查內容是否必填
                    success: function (result) {                          
                        Message.AlertMessage("必須填寫經費項目!", null, null);
                        e.preventDefault();                        
                    },
                    //失敗
                    error: function (data) {
                        Message.AlertMessage("讀取檢查失敗!", null, null);
                    }
                });
                alert(123);
                $("#nextBtn").attr("href", $("#nextBtn").attr("href") + "?prjid=" + prjId);
            });

Q3:那這次換成 e.preventDefault ,alert(123) 會執行嗎?

A: 答案是會的,因為程式就是會繼續往下跑

Q4:那這次頁面會跳轉嗎?(因為是點了a,有href 所以會轉去其他頁)

A:答案是不會的,因為prevent 掉event 了(但因為有prevent所以就會停下來)