使用表单定位div

Question

我有一个 JSP 页面，其中有一个包含表单的 div。提交表单后，操作将转到 spring 控制器并返回一个新页面，我必须在调用该操作的同一 div 中加载新页面。

我只能使用 JavaScript。

Answer 1

如果您使用表单，则表单提交事件页面将转到表单操作的位置。为了避免这种情况，请使用带有 Iframe 的表单。在加载 iframe 时，您应该将其内部 html 设置为目标的内部 html。让我简单解释一下吧

    





/* 不要忘记隐藏你的 iframe */
内联框架{
   宽度：0 像素；
   高度：0 像素；
   边框：无；
}


// 该函数将验证表单并将其发布到表单的操作
函数submitFn(){
    // 在这里验证表单
    document.getElementById('formid').submit()
}



// 该函数将处理表单的 post 回调并加载对 div 的响应
函数 onLoadFn(){
    document.getElementById('targetDiv').innerHTML = document.getElementById('iframeid').innerHTML;
}

Answer 2

使用“普通”代码无法实现您想要的。

一种方法（我个人不喜欢）是使用内部框架，另一种方法是使用 AJAX：不提交表单，而是使用相同的数据向服务器发送 AJAX 请求，并使用服务器的响应填充

div

。使用 jQuery 只需几行即可。

Answer 3

放置 iframe 和 div 有点棘手。

这是正确的解决方案

<div id="targetDiv"></div>
    <script>
       function onLoadFn(){
            var frame = document.getElementById('resultFrame');
            if(frame){
               document.getElementById("targetDiv").innerHTML = (frame.contentWindow.document.body.innerHTML)
            }
        }
    </script>
<iframe name="resultFrame" id="resultFrame" width="100%" style="border:none;display:none" onload="onLoadFn()"></iframe>