我正在尝试在我的 Django 网站上提交表单。 Ajax 对于桌面上的表单提交工作正常,提交时不会刷新页面,而在移动设备上使用时,POST 数据已成功提交,但页面会在请求后刷新。 如何防止提交后刷新?
<script>
$(document).ready(function(){
$('#email_button_secondary_submit').on('click', function(e){
$('#email_button_secondary_submit > span').removeClass('glyphicon glyphicon-chevron-right');
$('#email_button_secondary_submit > span').addClass('fa fa-spinner fa-spin');
$emailaddress = $('#email').val();
$.ajax({
type: "POST",
url : '',
cached: false,
data: {
email: $emailaddress,
csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val()
},
success: function () {
$('.Subscribe').hide();
$('.Thanks').show();
},
complete: function () {
$('#email_button_secondary_submit > span').removeClass('fa fa-spinner fa-spin');
$('#email_button_secondary_submit > span').addClass('glyphicon glyphicon-ok');
},
error: function () {
$('.Subscribe').hide();
$('.Error').show();
$('#email_button_secondary_submit > span').removeClass('glyphicon glyphicon-ok');
$('#email_button_secondary_submit > span').addClass('glyphicon glyphicon-remove');
},
});
e.preventDefault();
});
});
</script>
编辑1:
我检测到点击 block 无法在移动设备上执行。(我注意到通过在之后添加一个alert()
$('#email_button_secondary_submit').on('点击', 函数(e){
最佳答案
注意“function(e)”中的“e”。你应该补充一下。还要创建“e.preventDefault();”就像我下面的那样。
<script>
$(document).ready(function(){
$('#email_button_secondary_submit').on('click', function(e){
e.preventDefault();
$('#email_button_secondary_submit > span').removeClass('glyphicon glyphicon-chevron-right');
$('#email_button_secondary_submit > span').addClass('fa fa-spinner fa-spin');
$emailaddress = $('#email').val();
$.ajax({
type: "POST",
url : '',
cached: false,
data: {
email: $emailaddress,
csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val()
},
success: function () {
$('.Subscribe').hide();
$('.Thanks').show();
},
complete: function () {
$('#email_button_secondary_submit > span').removeClass('fa fa-spinner fa-spin');
$('#email_button_secondary_submit > span').addClass('glyphicon glyphicon-ok');
},
error: function () {
$('.Subscribe').hide();
$('.Error').show();
$('#email_button_secondary_submit > span').removeClass('glyphicon glyphicon-ok');
$('#email_button_secondary_submit > span').addClass('glyphicon glyphicon-remove');
},
});
});
});
</script>
关于javascript - 为什么 Ajax 在通过 POST 方法提交表单后会在移动设备上刷新页面?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52040076/