当前位置：文江博客话题详情

使用表单定位 div

发布于 2024-10-08 09:49:44 字数 119 浏览 1 评论 0原文

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

我只能使用 JavaScript。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

却一份温柔 2024-10-15 09:49:44

使用“普通”代码是不可能实现您想要的。

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

回复收藏 0 原文

旧时模样 2024-10-15 09:49:44

如果您使用表单，则表单提交事件页面将转到表单操作的位置。为了避免这种情况，请使用带有 Iframe 的表单。在加载 iframe 时，您应该将其内部 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;
}

If you are using form, on form submit event page will go to location of form's action. To avoid it use a form with an Iframe. And onload of iframe you should set it's inner html as your target's inner html. Let me explain with a simple

<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;
}

回复收藏 0 原文

音盲 2024-10-15 09:49:44

放置 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>

This is little bit tricky to place iframe and div.

Here is the proper solution

<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>

回复收藏 0 原文

~没有更多了~