自動隱藏我的部落格右側的內容
我的部落格一直有個隱藏版的密技,在網頁開啟後按下 f
或 Ctrl+B
就可以隱藏部落格右側的內容,讓文章可以「全版面」檢視,提升閱讀體驗,其中最核心的程式碼如下,有用到一點點 jQuery,難度不高:
window.toggleAside = (e) => {
if (e) e.preventDefault();
const currentUrl = new URL(window.location.href);
const searchParams = new URLSearchParams(currentUrl.search);
if (jQuery('section.content-wrapper').hasClass('col-md-8')) {
searchParams.set('full', '1');
currentUrl.search = searchParams.toString();
window.history.replaceState(null, '', currentUrl.toString());
jQuery('aside').hide()
jQuery('section.content-wrapper').removeClass('col-md-8').addClass('col-md-12')
} else {
searchParams.delete('full');
currentUrl.search = searchParams.toString();
window.history.replaceState(null, '', currentUrl.toString());
jQuery('section.content-wrapper').removeClass('col-md-12').addClass('col-md-8')
jQuery('aside').show()
}
}
我的咒語是:
請幫我把這段程式碼的 jQuery 程式碼都改成 VanillaJS,不用解釋,給我 code 就好,也請順便幫我加上註解:
<<貼上你的程式碼>>
結果如下:
window.toggleAside = (e) => {
// Prevent the default action of the event
if (e) e.preventDefault();
// Get the current URL and its search parameters
const currentUrl = new URL(window.location.href);
const searchParams = new URLSearchParams(currentUrl.search);
// Select the content wrapper and aside elements
const contentWrapper = document.querySelector("section.content-wrapper");
const aside = document.querySelector("aside");
// Check if the content wrapper has the class "col-md-8"
if (contentWrapper.classList.contains("col-md-8")) {
// Add the "full" parameter to the URL
searchParams.set("full", "1");
currentUrl.search = searchParams.toString();
window.history.replaceState(null, "", currentUrl.toString());
// Hide the aside element and update the content wrapper's class
aside.style.display = "none";
contentWrapper.classList.remove("col-md-8");
contentWrapper.classList.add("col-md-12");
} else {
// Remove the "full" parameter from the URL
searchParams.delete("full");
currentUrl.search = searchParams.toString();
window.history.replaceState(null, "", currentUrl.toString());
// Show the aside element and update the content wrapper's class
aside.style.display = "block";
contentWrapper.classList.remove("col-md-12");
contentWrapper.classList.add("col-md-8");
}
};
他是真的看的懂 jQuery 程式碼!🔥
透過 $.ajax
送出表單資料到後端
我公司官網可以透過每頁下方的「聯絡我們」留言給我們,其表單送出是透過 jQuery 的 $.ajax
完成的,程式碼如下:
$("#mainContactForm").submit(function (event) {
var area = document.querySelector(".contact-fixed-container");
event.preventDefault();
updateRecaptchaToken((token) => {
$.ajax({
url: "/contact",
method: "post",
data: $('#mainContactForm').serialize(),
processData: false,
contentType: false,
success: function (res) {
area.classList.add("active");
setTimeout(() => {
area.classList.remove("active");
}, "1000");
},
error: function (jqXHR, textStatus, errorThrown) {
alert(jqXHR.responseJSON.message);
}
});
});
});
我的咒語是:
請幫我把這段程式碼的 jQuery 程式碼都改成 VanillaJS,其中 $.ajax 的部分改用 fetch API,後端回應如果成功就不用解析結果,如果失敗,要解析 JSON 內容,其中 alert 的部分改用 SweetAlert2,不用解釋,給我 code 就好,也請順便幫我加上註解:
<<貼上你的程式碼>>
結果如下:
// VanillaJS equivalent of jQuery's submit function
document.querySelector("#mainContactForm").addEventListener("submit", function(event) {
var area = document.querySelector(".contact-fixed-container");
event.preventDefault();
updateRecaptchaToken((token) => {
// Use fetch API to make a POST request
fetch("/contact", {
method: "post",
body: new FormData(document.querySelector("#mainContactForm")),
processData: false,
contentType: false
})
.then(response => {
// Check if the request is successful
if (!response.ok) {
throw response;
}
area.classList.add("active");
setTimeout(() => {
area.classList.remove("active");
}, 1000);
})
.catch(error => {
// If request fails, parse the error message from the response
error.json().then(errorJson => {
// Use SweetAlert2 to display the error message
Swal.fire({
title: 'Error',
text: errorJson.message,
icon: 'error',
});
});
});
});
});
由於我的後端程式有判斷 X-requested-with: XMLHttpRequest
標頭(HTTP Header),用以識別前端傳來的內容是否為 AJAX 的要求,不過這段 fetch API 呼叫並沒有處理這個部分,所以我再次輸入一個新的「咒語」如下:
幫我加上 x-requested-with: XMLHttpRequest 標頭
ChatGPT 因為可以記得我曾經輸入過的前後文,所以我不用再次輸入原始碼,他會直接給我一份新的程式碼版本。
// VanillaJS equivalent of jQuery's submit function
document.querySelector("#mainContactForm").addEventListener("submit", function(event) {
var area = document.querySelector(".contact-fixed-container");
event.preventDefault();
updateRecaptchaToken((token) => {
// Use fetch API to make a POST request
fetch("/contact", {
method: "post",
body: new FormData(document.querySelector("#mainContactForm")),
headers: { 'X-Requested-With': 'XMLHttpRequest' },
processData: false,
contentType: false
})
.then(response => {
// Check if the request is successful
if (!response.ok) {
throw response;
}
area.classList.add("active");
setTimeout(() => {
area.classList.remove("active");
}, 1000);
})
.catch(error => {
// If request fails, parse the error message from the response
error.json().then(errorJson => {
// Use SweetAlert2 to display the error message
Swal.fire({
title: 'Error',
text: errorJson.message,
icon: 'error',
});
});
});
});
});
上面這段 Code 很聰明的幫我改用 FormData
取得表單資料,而且當中有一個我自己寫的 updateRecaptchaToken
函式呼叫,他直接透過我的命名判斷出了一個相對正確的註解(命名很重要)。不過,這段程式還是有些問題,其中 processData: false
與 contentType: false
這兩個參數是錯誤的,這是 jQuery 專屬的選項設定,fetch API 並沒有。所以我再下一次新的咒語:
請移除 processData: false 與 contentType: false 參數,這兩個參數不在 fetch API 之中
我的天,程式碼 100% 正確!
// VanillaJS equivalent of jQuery's submit function
document.querySelector("#mainContactForm").addEventListener("submit", function(event) {
var area = document.querySelector(".contact-fixed-container");
event.preventDefault();
updateRecaptchaToken((token) => {
// Use fetch API to make a POST request
fetch("/contact", {
method: "post",
body: new FormData(document.querySelector("#mainContactForm")),
headers: { 'X-Requested-With': 'XMLHttpRequest' },
})
.then(response => {
// Check if the request is successful
if (!response.ok) {
throw response;
}
area.classList.add("active");
setTimeout(() => {
area.classList.remove("active");
}, 1000);
})
.catch(error => {
// If request fails, parse the error message from the response
error.json().then(errorJson => {
// Use SweetAlert2 to display the error message
Swal.fire({
title: 'Error',
text: errorJson.message,
icon: 'error',
});
});
});
});
});