javascript - 为什么 Ajax 在移动设备上通过 POST 方法提交表单后会刷新页面?
问题描述
我正在尝试在我的 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:我检测到 on click 块无法在移动设备上执行。(我注意到通过添加 alert() 之后
$('#email_button_secondary_submit').on('click', function(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>
推荐阅读
- c# - ASP.NET MVC 5 数据库更新
- react-native - 如何正确使用 Expo.DocumentPicker.getDocumentAsync。[博览会] [ReactNative]
- java - 在 java 项目中打开和关闭 2 个不同的扫描仪
- testing - 如何在 Scalatra 测试请求中提供 cookie?
- javascript - 使容器消失后显示带有按钮的容器
- javascript - 如何在asp net中的dbmodel的剃刀视图中显示来自父类的更多字段
- javascript - Manually creating a object list on Mongoose
- java - 转到 RecyclerView 上选择的项目
- amazon-web-services - AWS CLI cp 不会第二次复制文件
- mysql - 将 CONSTRAINT 与 FOREIGN KEY 一起使用