Question

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

我只能使用JavaScript。

Answer 1

如果您使用的是表单，则表单提交事件页面将转到表单操作的位置。为了避免它使用带有iframe的表单。并且iframe的onload你应该将它的内部html设置为你的目标的内部html。让我用简单的解释

<form action="url.php" id="formid" type="post" target="iframename">
    <input type="submit" onclick="submitFn()"/>
</form>
<irame id="iframeid" name="iframename" onload="onLoadFn()"></iframe>



/* Dont forget to hide your iframe */
iframe {
   width: 0px;
   height: 0px;
   border: none;
}


// This function will validate form and post it to form's action
function submitFn(){
    // validate form here
    document.getElementById('formid').submit()
}



// this function will handle form's post callback and load response to div
function 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>

使用表单定位div

3 个答案: