要实现ajax表单提交在div中不加载页面的效果,可以使用以下步骤:
$('#myForm').submit(function(e) {
e.preventDefault();
});
$('#myForm').submit(function(e) {
e.preventDefault();
var formData = $(this).serialize();
$.ajax({
url: 'submit.php',
type: 'POST',
data: formData,
success: function(response) {
// 处理成功响应
},
error: function(xhr, status, error) {
// 处理错误响应
}
});
});
success: function(response) {
// 隐藏表单
$('#myForm').hide();
// 在指定的div中显示成功消息
$('#resultDiv').html(response);
}
完整的示例代码如下:
HTML代码:
JavaScript代码:
$('#myForm').submit(function(e) {
e.preventDefault();
var formData = $(this).serialize();
$.ajax({
url: 'submit.php',
type: 'POST',
data: formData,
success: function(response) {
$('#myForm').hide();
$('#resultDiv').html(response);
},
error: function(xhr, status, error) {
// 处理错误响应
}
});
});
注意:上述示例中的代码是基于jQuery库实现的,要确保已经引入了jQuery库。另外,还需要根据实际情况修改表单的提交地址、div的id以及相应的处理逻辑。