自動隱藏我的部落格右側的內容
我的部落格一直有個隱藏版的密技，在網頁開啟後按下 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',
});
});
});
});
});