Javascript jQuery在中自动提交表单加载到新页面_Javascript_Jquery

Javascript jQuery在中自动提交表单加载到新页面

javascript jquery

Javascript jQuery在中自动提交表单加载到新页面,javascript,jquery,Javascript,Jquery,我正在开发一个美化现有web应用程序一部分的项目。有必要将现有代码放在一个div中：搜索条件表单，搜索结果放在另一个div中，形成一种选项卡，但这是另一回事使用jQuery我能够管理它，但现在我正在努力处理结果页面，它本身就是另一个表单，可以使用document.form.submit自动提交到另一个文件，这是最终的搜索结果视图。此自动提交导致最终视图退出目标div并作为新页面而不是新窗口加载所以，流程是这样的：第一个文件，我们称之为criteria.html在一个div+另一个div空中

我正在开发一个美化现有web应用程序一部分的项目。有必要将现有代码放在一个div中：搜索条件表单，搜索结果放在另一个div中，形成一种选项卡，但这是另一回事

使用jQuery我能够管理它，但现在我正在努力处理结果页面，它本身就是另一个表单，可以使用document.form.submit自动提交到另一个文件，这是最终的搜索结果视图。此自动提交导致最终视图退出目标div并作为新页面而不是新窗口加载

所以，流程是这样的：

第一个文件，我们称之为criteria.html在一个div+另一个div空中加载搜索条件表单，该div空的目的是填充搜索结果：它提交到另一个文件，我们称之为resultsView.php

此行导致结果页显示在div results之外，作为新页。由于这些文件中有很多逻辑，每行超过700行，重写这个怪物的想法让我毛骨悚然

现在的问题是：这是在div之外打开结果的正常行为吗？我尝试删除document.form.submit代码，一切正常，没有显示resultsView.php的结果。正是这条线导致视口重置。我还尝试了使用空页面，以消除与页面内容交互的可能性-仍然是相同的结果

我希望文本不要太多，问题也清楚地说明了。如果我正确理解您的问题，您需要使用ajax而不是document.form.submit来处理最终提交；以便您可以在第页上处理结果。传统表单提交将始终重新加载/打开操作页面。如果要避免这种情况，您必须通过ajax控制表单提交响应，并相应地处理结果。。。就像你在第一次提交时所做的那样

我能想到的唯一替代方法是将div id=results改为iframe，以便它包含后续表单submit。当然，这会释放更多的限制，可能会导致其他麻烦。

我不确定我是否理解你的问题，但也许你可以这样做

这是我的JQuery脚本：[我只是等待提交搜索。当它发生时，我使用$.Post方法调用一个函数，该函数应该返回Html结果，您可以使用JQuery或css包含一些内容来隐藏任何想要的字段]

<script type="text/javascript" src="http://code.jquery.com/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("form#searchForm").submit(function() {
                    var theCity = $("select#chooseCity").val(); 
                    var theName = $("input#searchInput").val(); 
                    $.post("callProvideSearchResults.php", {theCity: theCity, theName: theName}, function(data) {
                        $("div#searchResults").html(data);
                    });
                  return false
                });
            });
        </script>

这是我的主体：{它包括选择一个城市、提供你要找的人的姓名的表格以及提供结果的地点

<body>
    <FORM id="searchForm">
        <h2>Select the city: </h2>            
        <select id="chooseCity">
            <?php
            $theCitiesOptionsHTML = "cityOptions.html";
            require($thePathDataFiles.$theCitiesOptionsHTML);  / A large list of cities              
            ?> 
        </select>
        <h2> What is the name of the person </h2> 
        <P> <INPUT id="searchInput" TYPE="TEXT" SIZE=50></P>  
        <P><INPUT TYPE="submit" VALUE="search"></P> 
    </FORM>
    <div id="searchResults">
        <!-- Here: Search results -->
    </div>        
 </body>

//函数callProvideSearchResults.php//只需调用生成所有作业的函数并回显$Html页面即可

<?php
    include "provideSearchResults.php";
    $theName=$_POST['theName'];
    $theCity=$_POST['theCity'];
  echo  provideSearchResults($theName, $theCity);

?>

//providedSearchResults.php//数据库连接和搜索

<?php

    function provideSearchResults($theName, $theCity) {

        include "databaseConnection.php";
        //database Queries
        // Generate $theHtml using strings or ob_start, for instance


        return $theHtml;
    }

?>

谢谢你的回答。我知道这个问题很复杂，我面临的代码也很复杂。因此，你建议将第一个Ajax请求的结果捕获到中间表单document.form.submit，并将另一个Ajax帖子发布到final resultsView.php？听起来很合逻辑，尽管我不确定如何捕获intermediate表单数据$form.serialize？以及使用什么jQuery事件我不认为$document.ready可以用于Ajax响应？由于此表单包含许多隐藏字段，我希望避免逐个捕获它们。我最终将其整理出来。根据您的建议，我进行了两次Ajax调用，第一次和以前一样，第二次调用表单数据从第一个响应中提取。经过一些处理后的第二个响应HTML用于使用jQuery.HTML动态设置div的内容。再次感谢您的建议！我很高兴您能让它正常工作。只想补充一点，处理第二个AJAX调用可以在第一个响应的成功函数中进行。因此，没有额外的$document.ready是必需的。此外，从第一次调用中获取表单变量取决于数据的设置方式，但是将数据保持为JS变量的形式，而不是填充HTML和用JS提取值，这将是最干净的。当然，您的数据格式可能需要类似的内容。无论如何，很高兴看到它工作了！而不是谢谢你的回答。如果我很好地理解了你的方法，在我看来，我缺少了一点：在我的问题中有两种形式：一种是标准没有问题的形式；另一种是只返回隐藏字段的形式，即我用ajax加载的字段，它自动提交到最终结果视图。对不起，我仍然不完全理解你的答案点。想象一下没有动态输入的静态情况……你能为这种静态情况生成HTML吗？如果你的答案是肯定的，你可以使用上面的代码动态生成它。唯一要改变的是最后一个函数生成的HTML。在她的手，如果隐藏的领域是静态的，没有问题，因为你只要让他们出现。请注意，您可以在字段I'd=searchResults中附加您想要的任何内容。也许你不需要隐藏它们，只要创造它们。

<body>
    <FORM id="searchForm">
        <h2>Select the city: </h2>            
        <select id="chooseCity">
            <?php
            $theCitiesOptionsHTML = "cityOptions.html";
            require($thePathDataFiles.$theCitiesOptionsHTML);  / A large list of cities              
            ?> 
        </select>
        <h2> What is the name of the person </h2> 
        <P> <INPUT id="searchInput" TYPE="TEXT" SIZE=50></P>  
        <P><INPUT TYPE="submit" VALUE="search"></P> 
    </FORM>
    <div id="searchResults">
        <!-- Here: Search results -->
    </div>        
 </body>

<?php
    include "provideSearchResults.php";
    $theName=$_POST['theName'];
    $theCity=$_POST['theCity'];
  echo  provideSearchResults($theName, $theCity);

?>

<?php

    function provideSearchResults($theName, $theCity) {

        include "databaseConnection.php";
        //database Queries
        // Generate $theHtml using strings or ob_start, for instance


        return $theHtml;
    }

?>