Question

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

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

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

Answer 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），切换到网络面板，提交表单，单击网络面板中显示的新资源，然后选择标题选项卡。 / LI>
jsfiddle.net站点会自动为您整合jQuery和HTML标记，但您需要自己包含这些标记，如上面的代码片段所示。您可以选择将jQuery源更改为另一个CDN。
jQuery.load（）是一种执行HTTP GET的简写“帮助程序”方法。 POST也有辅助方法，但你应该阅读全部的jQuery AJAX方法，在这里：http://api.jquery.com/category/ajax/
我提供的示例使用表单action属性中的网址。这样做的两个好处是：URL仅在一个地方定义，而您的交互功能在禁用JavaScript时起作用。对于这种情况，这是一种古老且值得信赖的技术，但如果您可以假设某些有关浏览器的内容，则可以使用其他方法。
您在原始问题标签中提到了IFRAME。在大多数情况下，你会想要避免IFRAME，因为它会增加各种复杂性。示例中的<div id="results"></div>扮演了您正在考虑使用IFRAME的角色。这是今天执行部分页面更新的常用方法。
如果您希望支持对同一URL的普通（非AJAX）请求，则此元素更新技术可能会增加服务器端代码的复杂性。在这种情况下，您可以选择使用不同的<form action=来保持简单。在请求不是AJAX时在服务器上检测，然后将响应包装在页面模板中也很常见。
CSS负责分配页面上的空间，并提供“就地更改而不会打扰其他任何内容”。我在这里提供了一个简单的CSS示例。 #results容器具有position: relative;属性，导致子项包含在其中，尽管它不会阻止具有偏移的对象将其置于父容器之外。如果这对你来说是个问题，你可能想问一个关于CSS的单独问题。
您可以轻松找到有关此内容的其他信息。关于堆栈溢出肯定是一个重复的问题，虽然关于这个主题有很多问题我找不到一个精确的，措辞良好的匹配给你。要查看相关主题，请搜索关键字jQuery.load，AJAX提交和部分页面更新，仅举几例。

Answer 2

尝试ajax。请参阅链接：http://api.jquery.com/jQuery.ajax/

在网址中

：你可以设置一个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
  });

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

2 个答案:

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