表单提交后无法在Modal的result容器加载内容的技术问询

看起来你遇到的核心问题是Modal的显示时机和AJAX回调的执行顺序没配合好，直接在.modal()后面写回调的方式是错误的，导致你尝试往Modal里的#result写入内容时，Modal可能还没完全渲染完成，自然找不到目标元素。

问题出在哪？ #

你当前代码里调用Modal的部分语法有误：

$('#myModal').modal(), function() {
 // do something when the modal is shown
 $('#result').fadeIn('slow').html(data);
})

这并不是Bootstrap Modal正确的回调写法，.modal()方法需要通过事件监听或者配置对象来指定显示完成后的操作。

修正后的代码方案 #

这里提供两种可靠的实现方式：

方案1：监听Modal显示完成事件

通过shown.bs.modal事件确保Modal完全渲染后，再往内部的#result写入内容：

$(document).ready(function() {
 $('#reg-form').submit(function(e){
 e.preventDefault(); // 阻止默认表单提交行为
 $.ajax({
 url: 'testcontroller.php',
 type: 'POST',
 data: $(this).serialize()
 })
 .done(function(data){
 // 先触发Modal显示
 $('#myModal').modal('show');
 // 监听Modal完全显示的事件
 $('#myModal').on('shown.bs.modal', function() {
 // 此时Modal已完全加载，能正确找到内部的#result
 $('#result').fadeIn('slow').html(data);
 // 解绑事件，避免多次提交时重复执行
 $(this).off('shown.bs.modal');
 });
 })
 .fail(function(){
 alert('Ajax Submit Failed ...');
 });
 });
});

方案2：调用Modal时传入配置对象

也可以在调用modal()时直接传入包含回调的配置对象：

$(document).ready(function() {
 $('#reg-form').submit(function(e){
 e.preventDefault();
 $.ajax({
 url: 'testcontroller.php',
 type: 'POST',
 data: $(this).serialize()
 })
 .done(function(data){
 $('#myModal').modal({
 show: true,
 backdrop: 'static', // 可选：禁止点击背景关闭Modal
 keyboard: false // 可选：禁止ESC键关闭Modal
 }).on('shown.bs.modal', function() {
 $('#result').fadeIn('slow').html(data);
 $(this).off('shown.bs.modal');
 });
 })
 .fail(function(){
 alert('Ajax Submit Failed ...');
 });
 });
});

额外检查点 #

• 打开浏览器开发者工具（F12），在Network标签下确认AJAX请求是否成功，testcontroller.php返回的内容是否符合预期
• 确保Modal内的#result元素没有被其他代码意外修改或隐藏

内容的提问来源于stack exchange，提问作者mdehghani