提交搜索查询并获取搜索结果而不刷新

我想提交搜索查询表单并获取搜索结果，而无需在同一页面上重定向/重新加载/刷新 。

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

Answer 1

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

1. 使用Ajax将表单中的数据发布到php文件中;

2. 后台的该文件将查询数据库并获取他收到的数据的结果;

3. 使用查询结果，您需要将其注入页面中的html元素，该元素已准备好将结果呈现给用户;

4. 最后，您需要设置一些控件，让样式和文档工作流程顺利运行。

---

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

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

的index.php

            
 HEADER 
 
 
 Search:  
 
 
 
 FOOTER 
   

db_query.php

 Please contact the site\'s administrator.'); ############## Make the mysql connection ########### $conn = mysql_connect(HOST, DBUSER, PASS) or die(DB_MSG_ERROR); $db = mysql_select_db(DB) or die(DB_MSG_ERROR); $query = mysql_query(" SELECT * FROM persons WHERE age='".$_POST['value']."' "); echo ''; while ($data = mysql_fetch_array($query)) { echo ' '; } echo '
 
'.$data["name"].'
 
'.$data["age"].'
 
'; ?> 

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

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

Answer 2

您可能希望从网上可以找到的成千上万的“AJAX for beginners”教程开始。 使用该术语进行Google搜索可以帮助您实现目标。

试试这个对于初学者：

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

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

Answer 3

这就是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 4

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

假设你有一个像这样的html：

   
 your content area
 Change Content   

现在，您的javascipr代码将如下所示：

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

另外，请理解，我在这里使用jquery库来实现Ajaxfunction。