[英]jQuery Ajax beforesend, success and error with axios
我在通過 formspree 發送的 static web 頁面上有一個聯系表。 我正在嘗試實施 ajax 提交以避免重定向頁面。
我在 jQuery 中找到了這個要點。
jQuery
var $contactForm = $('#contact-form');
$contactForm.submit(function(e) {
e.preventDefault();
var $submit = $('input:submit', $contactForm);
var defaultSubmitText = $submit.val();
$.ajax({
url: '//formspree.io/your@email.com',
method: 'POST',
data: $(this).serialize(),
dataType: 'json',
beforeSend: function() {
$submit.attr('disabled', true).val('Sending message…');
},
success: function(data) {
$submit.val('Message sent!');
setTimeout(function() {
$submit.attr('disabled', false).val(defaultSubmitText);
}, 5000);
},
error: function(err) {
$submit.val('Oops, there was an error.');
setTimeout(function() {
$submit.attr('disabled', false).val(defaultSubmitText);
}, 5000);
}
});
});
我只想使用本機 javascript,到目前為止,這就是我“翻譯它”的方式
原生JS
const form = document.querySelector('form');
form.addEventListener("submit", function(e){
e.preventDefault();
const $submit = form.querySelector('.contact__submit');
const defaultSubmitText = $submit.innerHTML;
axios({
method: 'post',
url: 'https://formspree.io/your@email.com',
data: serialize(form)
// https://plainjs.com/javascript/ajax/serialize-form-data-into-a-query-string-45/
})
.then(function(response) {
console.log('SENT!!', response.data);
})
.catch(function(){
console.log('ERROR!!');
});
//https://github.com/stefanpenner/es6-promise
});
我如何“翻譯” beforeSend
,讓用戶知道消息正在發送?
我知道這是舊的,但讓我放棄我是如何讓我的工作的。 當我嘗試用普通 JS 重寫我的 jQuery 代碼時遇到了同樣的問題,我所做的是使用攔截器。
使用您的示例代碼
const form = document.querySelector('form');
form.addEventListener("submit", function(e){
e.preventDefault();
const $submit = form.querySelector('.contact__submit');
const defaultSubmitText = $submit.innerHTML;
// Axios BeforeSend equivalent
axios.interceptors.request.use( config => {
// Write whatever logic you want to run beforeSend here
$submit.attr('disabled', true).val('Sending message…');
return config; // very Important to add this, else Axios will cancel itself
});
axios({
method: 'post',
url: 'https://formspree.io/your@email.com',
data: serialize(form)
// https://plainjs.com/javascript/ajax/serialize-form-data-into-a-query-string-45/
})
.then(function(response) {
console.log('SENT!!', response.data);
})
.catch(function(){
console.log('ERROR!!');
});
//https://github.com/stefanpenner/es6-promise
});
您也可以選擇執行類似BeforeReceive
的操作(即在返回響應之前執行操作):
axios.interceptors.response.use( config => {
// Write whatever logic you want to run beforeReceieve here
return config;
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.