Question

我正在开发一个“美化”现有Web应用程序的一部分的项目。需要将现有代码：搜索条件表单放在一个div中，并将搜索结果放在另一个div中（形成一种标签，但这是另一个故事）。

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

所以，流程是这样的：

第一个文件，我们称之为“criteria.html”加载搜索条件表单（在div内）+另一个div（空）注定要填充搜索结果。：

<div id="criteria">... form with search criteria here...</div>
<div id="results"></div>

在提交时，使用jQuery的“hide（）”方法，我隐藏第一个div（围绕搜索条件表单），并对第二个文件进行Ajax调用，让我们称之为“results.php”：

<script>
$("#criteria").hide();
$.ajax({
   ...,
   url: "results.php",
   success: function(data){
    $("#results").html(data);
   },
   ...
});
</script>

results.php根据给定的标准进行搜索，并显示一个“中间形式”（以上面的ajax查询的data结果返回），其中包含大量隐藏字段，最后执行：< / p>

<script>document.form.submit();</script>

，我们称之为“resultsView.php”

此行导致结果页显示在div“results”之外，作为新页面。

由于这些文件中有很多逻辑（每行超过700行），重写这个怪物的想法只会让我感到毛骨悚然。

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

我希望没有太多的文字，问题已明确说明。关于如何解决这个问题的每一个建议都将不胜感激。

Answer 1

如果我正确理解您的问题，您需要使用ajax而不是<script>document.form.submit();</script>处理最终提交，以便您可以在页面上处理结果。传统表单提交将始终重新加载/打开操作页面。如果你想避免这种情况，你必须通过ajax控制表单提交响应并相应地处理结果......就像你正在进行第一次提交一样。

我能想到的唯一选择是将div id =“results”改为iframe，以便它包含后续的表单提交。当然，这会引发可能引起其他麻烦的进一步限制。

Answer 2

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

这是我的JQuery脚本：[我只是等待提交搜索。当它发生时，我使用$ .Post方法来调用一个应该返回Html结果的函数（你可以包括somenthing来隐藏你想要的任何使用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);

?>

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

<?php

    function provideSearchResults($theName, $theCity) {

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


        return $theHtml;
    }

?>

jQuery自动提交表单在<div>内加载新页面</div>

2 个答案: