Php 如何在模式窗口中显示内容？

我有一个简单的应用程序（qanadable2.php），当用户单击加号按钮时，它将打开一个模式窗口，并显示存储在另一个页面（previousquestions.php）中的详细信息

现在我遇到的问题是，如果在文本框为空时直接单击“搜索”按钮，您将看到它在自己的页面上加载页面，显示要输入搜索短语的消息，并且它还显示以前从模式窗口进入该页面的所有功能。这是不正确的

我想让它做的是，如果用户点击了搜索按钮，那么当它发布表单并输出消息时，它会在模式窗口中完成，而不是在它自己的整个页面上。那么有人知道这是如何实现的吗

我使用的模式窗口称为SimpleModel，它的网站是

下面是qanadable2.php代码，其中显示加号按钮并打开模式窗口，将模式窗口的内容链接到previousquestions.php页面：

<script type="text/javascript">

  function plusbutton()
    {

    $.modal( $('<div />').load('previousquestions.php #previouslink') );            
    return false;
}

</script>


<h1>CREATING QUESTIONS AND ANSWERS</h1>

<table id="plus" align="center">
<tr>
<th>
<a onclick="return plusbutton();">
<img src="Images/plussign.jpg" width="30" height="30" alt="Look Up Previous Question" class="plusimage"/>
</a>
<span id="plussignmsg">(Click Plus Sign to look <br/> up Previous Questions)</span>
</th>
</tr>
</table>

函数plusbutton（）
{
$.modal（$（''）.load（'previousquestions.php#previouslink'）；
返回false；
}
创建问题和答案
（单击加号查找前面的问题）

下面是previousquestions.php代码，它在模式窗口中显示详细信息，并存储搜索功能：

<?php

      foreach (array('questioncontent') as $varname) {
        $questioncontent = (isset($_POST[$varname])) ? $_POST[$varname] : '';
      }

?>

    <div id="previouslink">
    <button type="button" id="close" onclick="return closewindow();">Close</button>
    <h1>PREVIOUS QUESTIONS</h1>

    <p>Search for a previous question by entering in a phrase in the search box below and submitting the phrase</p>

    <form action="previousquestions.php" method="post">
          <p>Search: <input type="text" name="questioncontent" value="<?php echo $questioncontent; ?>" /></p>
          <p><input id="searchquestion" name="searchQuestion" type="submit" value="Search" /></p>
          </form>

    </div>

    <?php 

    //...connected to DB

                if (isset($_POST['searchQuestion'])) {

                  $questionquery = "SELECT QuestionContent FROM Question
              WHERE(QuestionContent = '".mysql_real_escape_string($questioncontent)."')";

            if (empty($questioncontent)){
        echo "Please enter in a phrase in the text box in able to search for a question";
    }
          ?>

接近
先前的问题
通过在下面的搜索框中输入短语并提交短语来搜索上一个问题

搜索：您可能想使用AJAX，因为您已经在使用jQuery，您只需要以下内容：

// override the "default" form submitting behavior with a callback function
$("form").submit(

    // this is the callback function for your form submit function.
    function(e)
    {

        // this prevents the page from reloading -- very important!
        e.preventDefault(); 

        // get the search data from the input textbox
        var s = $("input[name='questioncontent']").val();

        // see annotation
        $("#simplemodal-data").html("loading...")
           .load("previousquestions.php #previouslink", 
               { 
                   questioncontent : s,
                   searchQuestion : "Search"
               }
            );
    }); // end submit wrapper

这将向服务器发送值，并将其加载到id为SimpleModel data的div中

注释：

<!-- change type to button -->
<input id="searchquestion" name="searchQuestion" type="button" value="Search" />

代码的最后一行做了几件事。首先，它用一条“加载”消息替换SimpleModel DIV。同时，它向您的previousquestions.php页面发出POST请求。这部分
{questioncontent:s，searchQuestion:“Search”}
是表单中的数据传递到PHP页面的地方（记住上面的变量var s赋值。最后，来自previousquestions.PHP页面的结果应该加载到SimpleModel数据模式窗口中

缺少的一件事是在load方法中添加#previousquestions，以便在模式中只插入HTML文档的一部分。在另一个HTML文档中加载整个HTML页面并“加载”从来都不是一个好主意设计用于允许您仅选择要插入的文档部分，即该DIV

我添加了“#previouslink”在php文件名之后。这就是神奇之处。浏览器知道如何从php文件中提取该DIV，然后只在页面上插入该部分，而不插入
或任何不需要的标记。
通过使用AJAX提交表单，而不是使用默认行为，即使用添加新内容。您不能使用modal.load，因为您需要在请求中发布数据以获得适当的响应

但是，当使用AJAX发布数据时，可以将响应作为HTML并将该HTML添加到页面上的DIV中，然后在该DIV容器上调用SimpleModal命令

首先，修改表单上的提交按钮，使其为type=“button”而不是type=“submit”。这将阻止表单提交和重定向页面。或者，您可以添加event.preventDefault（）；并将false返回表单提交单击处理程序（参见第二步），但在进行更改时，尝试此方法可能更容易：

第1步：

<!-- change type to button -->
<input id="searchquestion" name="searchQuestion" type="button" value="Search" />

第三步：

<!-- change type to button -->
<input id="searchquestion" name="searchQuestion" type="button" value="Search" />

最后，请确保您的
先前的问题.php
代码只返回部分HTML文档，而不是完整的HTML文档。由于您正在将HTML注入现有页面，因此不需要
、
或
部分。这些部分只会导致您的页面无法验证，并且可能会在lega中导致不需要的行为cy浏览器。以下是您的响应的示例：

<div id="previouslink">
<button type="button" id="close" onclick="return closewindow();">Close</button>
<h1>PREVIOUS QUESTIONS</h1>

<p>Search for a previous question by entering in a phrase in the search box below and submitting the phrase</p>

<form action="previousquestions.php" method="post">
      <p>Search: <input type="text" name="questioncontent" value="test" /></p>
      <p><input id="searchquestion" name="searchQuestion" type="submit" value="Search" /></p>
      </form>

</div>


     <p>
         Your Search: 'test'     </p>


      <p>Number of Questions Shown from the Search: <strong>0</strong></p><p>Sorry, No Questions were found from this Search</p> 


接近
先前的问题
通过在下面的搜索框中输入短语并提交短语来搜索上一个问题

搜索：



您的搜索：“测试”

搜索中显示的问题数：0抱歉，此搜索中未找到任何问题

我从另一页上对类似问题的回答中发现，正如Bergi所说，使用iframe比使用ajax更容易将内容显示在模式窗口中。因此，这个问题的最佳答案如下，其中显示了iframe如何用于上述问题：

  function plusbutton() { 
    // Display an external page using an iframe 
    var src = "previousquestions.php"; 
    $.modal('<iframe src="' + src + '" style="border:0;width:100%;height:100%;">');
    return false;
} 

函数plusbutton（）{
//使用iframe显示外部页面
var src=“previousquestions.php”；
$.modal（“”）；
返回false；
} 
简单解决方案：使用iframe。复杂解决方案：使用Ajax更新站点，而不是提交表单。嗨，mazlix，当提交表单时，它会将POST数据发送到服务器，但会收到“加载”的响应操作包括来自发布数据的结果，或者只是默认的previousquestions.php页面？作为记录，如果这返回来自发布的结果，那么这是一个非常优雅、简洁的解决方案。嘿，jmort，我刚刚发布的代码应该可以用。只需将其添加到客户端代码中。实际上，我可以将其粘贴到google chrome中inspector并让它以我认为您希望的方式工作……jQuery有一些非常简洁的东西，明白了，感谢文档，所以您覆盖了表单的默认功能，并使用load来处理POST，包括pa