需要在同一页面（半页）上加载页面吗？答案

【问题标题】：Need to get page loaded on the same page (Half page)?需要在同一页面（半页）上加载页面吗？
【发布时间】：2013-12-23 06:03:20
【问题描述】：

    <html>
    <form method="get" action="/00ON0000000FOHS" >
        <b>Enter Text</b><input type="text" id="pv2" name="pv2"/>
        <input type="submit" value="Report Generation" class="submit"/>
   </form> 
   </html>

我想让操作页面加载到输入框所在的同一页面上

就像页面的上半部分是用户输入的一样。页面的下半部分将根据用户输入来加载。

【问题讨论】：

您想在同一个窗口中显示两个单独的页面吗？
同一个窗口，同一个页面两个单独的块，一个是用户输入端的静态块，另一个是动态的

标签： javascript jquery html iframe

【解决方案1】：

使用 jQuery 非常简单和优雅。

<html>
<head>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script>
    $("form").submit(function(e) {
        var form = $(this);
        e.preventDefault();
        $("#results").load(form.attr("action"), form.serialize());
    });
    </script>
</head>
<body>
    <form method="get" action="/00ON0000000FOHS" >
        <b>Enter Text</b><input type="text" id="pv2" name="pv2"/>
        <input type="submit" value="Report Generation" class="submit"/>
    </form> 
    <div id="results"></div>
</body>
</html>

工作示例：http://jsfiddle.net/syndicatedshannon/2WE54/

注意事项：

jsfiddle 不返回任何内容，因为操作 URL 处没有页面。 您看到的“结果”一词不是示例的一部分，而是来自 jsfiddle.net 站点的叠加层。要查看它是否正常工作，请在 Chrome 中打开该站点，打开开发者工具 (F12)，切换到网络面板，提交表单，单击网络面板中出现的新资源，然后选择标题选项卡。
jsfiddle.net 站点会自动为您合并 jQuery 和 HTML 标签，但您需要自己包含这些，按照上面的代码 sn-p。您可以选择将 jQuery 源更改为另一个 CDN。
jQuery.load() 是执行 HTTP GET 的速记“帮助”方法。 POST 也有辅助方法，但您可能应该在此处阅读有关 jQuery AJAX 方法的全部内容：http://api.jquery.com/category/ajax/
我提供的示例使用来自表单action 属性的URL。这样做有两个好处：URL 只定义在一个地方，并且当 JavaScript 被禁用时你的交互功能。这是一种古老且值得信赖的技术，但如果您可以假设您的浏览器的某些情况，则可以使用其他方法。
您在原始问题标签中提到了 IFRAME。在大多数情况下，您会希望避免使用 IFRAME，因为它会增加各种复杂性。示例中的 <div id="results"></div> 扮演了您正在考虑使用 IFRAME 的角色。这是目前执行部分页面更新的常规方式。
如果您确实希望支持对同一 URL 的普通（非 AJAX）请求，这种元素更新技术可能会增加服务器端代码的复杂性。在这种情况下，您可能会选择使用不同的 <form action= 以使事情变得更简单。当请求不是 AJAX 时，在服务器上检测到然后将响应包装在页面模板中也是相当常见的。
CSS 负责分配页面上的空间，并提供“就地更改而不干扰其他任何内容”。我在这里提供了一个简单的 CSS 示例。 #results 容器有一个 position: relative; 属性，可以很好地包含子元素，尽管它不会阻止具有偏移量的对象将它们放在其父容器之外。如果这对您来说是个问题，您可能希望单独提出一个关于 CSS 的问题。
您可以轻松找到有关此的其他信息。这肯定是关于堆栈溢出的重复问题，尽管关于该主题的问题太多了，但我无法为您找到准确、措辞恰当的匹配项。要查看相关主题，请搜索关键字 jQuery.load、AJAX 提交和部分页面更新等等。

【讨论】：

我需要在页面的一半中加载结果)。
当我点击报告生成时，它会重新加载到结果页面中
这只是 CSS 的问题，我的朋友。在这里，让我更新工作示例供您演示。
k Shannon 我去看看
嗨，香农，当我点击提交时，它仍在重新加载到结果页面。还有其他想法

【解决方案2】：

试试 ajax。请看链接：http://api.jquery.com/jQuery.ajax/

在url中：你可以设置一个php或任何其他服务器端页面来调用。

在该服务器端页面中编写您的 php 代码并回显结果，它将返回您调用 ajax 的页面上的值。

$.ajax({
  url: "server side page link",
})
  .done(function( data ) {
    $('div#id').html(data);<==== it will show you data what has been echoed on the server side page
  });

【讨论】：