Question

我想提交搜索查询表单＆amp;在同一页上重定向/重新加载/刷新获取搜索结果。

我的内容是动态的，所以不能使用那些“提交联系表单而不刷新回复成功的页面”。

Answer 1

要提交表单，从数据库中收集结果并将其呈现给用户而不进行页面刷新，重定向或重新加载，您需要：

使用Ajax将表单中的数据发布到php文件中;
后台的文件将查询数据库并获取他收到的数据的结果;
使用查询结果，您需要将其注入页面中的html元素，该元素已准备好向用户显示结果;
最后，您需要设置一些控件，让样式和文档工作流程顺利运行。

所以，说到这里，这是一个有效的例子：

我们有一个表“人”，字段“年龄”和字段“名称”，我们将搜索年龄为32岁的人。接下来我们将在{{1}内显示他们的姓名和年龄带有粉红色背景的div和非常大的文字为了正确测试这个，我们将有一个灰色的标题，正文和页脚！

<强>的index.php

table

<强> db_query.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="pt" dir="ltr">

  <head>

    <title>Search And Show Without Refresh</title>

    <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">

    <!-- JQUERY FROM GOOGLE API -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

    <script type="text/javascript">
      $(function() {
        $("#lets_search").bind('submit',function() {
          var value = $('#str').val();
           $.post('db_query.php',{value:value}, function(data){
             $("#search_results").html(data);
           });
           return false;
        });
      });
    </script>

  </head>

  <body style="margin:0;padding:0px;width:100%;height:100%;background-color:#FFFFFF;">

    <div style="width:1024px;margin:0 auto;height:100px;background-color:#f0f0f0;text-align:center;">
      HEADER
    </div>
    <div style="width:1024px;margin:0 auto;height:568px;background-color:#f0f0f0;text-align:center;">
      <form id="lets_search" action="" style="width:400px;margin:0 auto;text-align:left;">
        Search:<input type="text" name="str" id="str">
        <input type="submit" value="send" name="send" id="send">
      </form>
      <div id="search_results"></div>
    </div>
    <div style="width:1024px;margin:0 auto;height:100px;background-color:#f0f0f0;text-align:center;">
      FOOTER
    </div>

  </body>

</html>

控制的东西取决于你想要的东西，但是使用那些代码，将这两个文件放在同一个目录中，你应该没问题！

任何问题或更明确的代码，请告诉我们;）

Answer 2

这就是AJAX的用途。在jQuery中（如果你正在寻找一个不同的库，道歉）

$("form#search").bind('submit',function() {
  $.post("search.php",this.serialize(),function(data) { 
    // Put the code to deal with the response data here
  });
  return false;
});

Answer 3

您可能希望从网上可以找到的成千上万的“适合初学者的AJAX”教程开始。使用该术语的Google搜索可以帮助您。

首先尝试这个：

http://www.destraynor.com/serendipity/index.php?/archives/29-AJAX-for-the-beginner.html

阅读完之后，请记住，您确实不需要编写任何XHR处理代码。正如Jamie所指出的，jQuery或任何其他大量的Javascript库都可以大大简化你的客户端AJAX代码。

Answer 4

如果你能在直接进入代码之前获得一些Ajax基础知识，这是很好的。 Ajax，是您问题的确切解决方案。它异步向服务器发出请求，获取结果，并且可以使用结果修改页面中的数据。这一切都是用JavaScript完成的。

假设您有一个像这样的HTML：

<html>
<body>
<div id="myDiv"> your content area</div>
<button type="button" onclick="loadByAjax()">Change Content</button>
</body>
</html>

现在，您的javascipr代码将是这样的：

<script type="text/javascript">
function loadByAjax()
{
     $.ajax({
          type: "POST",
          url: "yourserverpage.php",
          data: "searchkey=data_from_user_input",
          success: function(response_data){
          $('myDiv').html(response_data)
          }
          });
}
</script>

所以，基本上点击按钮后，JavaScript就会被执行。它将调用php服务器端脚本，传递从用户输入获得的参数并检索响应数据并将其放在div中。因此，您的页面无需完全刷新即可更新。

另外，请理解，我在这里使用了jquery库来获取Ajax函数。

提交搜索查询＆amp;获取搜索结果而不刷新

4 个答案:

所以，说到这里，这是一个有效的例子：