通过ajax在html/php中搜索表单_Php_Javascript_Html_Ajax_Forms

通过ajax在html/php中搜索表单

php javascript html ajax forms

通过ajax在html/php中搜索表单,php,javascript,html,ajax,forms,Php,Javascript,Html,Ajax,Forms,我有一个搜索表单，其中数据库查询已经用php编码，html文件通过ajax调用这个php文件，以在搜索表单中显示结果。问题是，我希望结果以与search.html相同的形式显示；然而，当ajax工作时，它会转到search.php来显示结果 search.html： <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <scr

我有一个搜索表单，其中数据库查询已经用php编码，html文件通过ajax调用这个php文件，以在搜索表单中显示结果。问题是，我希望结果以与search.html相同的形式显示；然而，当ajax工作时，它会转到search.php来显示结果

search.html：

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="scripts/search_ajax.js" type="text/javascript"></script> 
</head>

<body>
<form id="submitForm" method="post">
<div class="wrapper">
<div class="field">
<input name="search" id="search" />
</div><br />
<input id="button1" type="submit" value="Submit" class="submit" onclick="run_query();" /><br />
</div>
<div id="searchContainer">
</div>
</form>
</body>
</html>

search.php：

<?php
include 'config.php';

$search_result = "";

$search_result = $_POST['search'];

$result = mysql_query("SELECT cQuotes, vAuthor, cArabic, vReference FROM thquotes WHERE cQuotes LIKE '%$search_result%' ORDER BY idQuotes DESC", $conn)
  or die ('Error: '.mysql_error());


您似乎没有阻止窗体的默认操作。添加一个返回false
到单击的末尾：
onclick="run_query(); return false;"

或者，如果run\u query（）
实际返回false，则重写onclick
，如下所示：
onclick="return run_query();"

更新：您确实没有将请求参数传递给PHP代码。替换
var url = "search.php";

借
并在PHP中使用$\u GET
。如果您真的想使用POST
，那么就这样做
var url = "search.php";
xmlHttp.open("POST",url,true);
xmlHttp.send("search=" + searchvalue);

（显然，searchvalue
是用户输入的值。我假设您可以考虑如何使用JS从HTML DOM中获取它
也就是说，这与实际问题无关，我建议您不要使用所有不透明和样板的Ajax代码。这大大简化了ajaxical的工作。例如，您可以使用来代替这一切。链接指向几个示例
您似乎没有阻止窗体的默认操作。请在单击onclick
的末尾添加一个return false；
：
onclick="run_query(); return false;"

或者，如果run\u query（）
实际返回false，则重写onclick
，如下所示：
onclick="return run_query();"

更新：您确实没有将请求参数传递给PHP代码。替换
var url = "search.php";

借
并在PHP中使用$\u GET
。如果您确实想使用POST
，那么就这样做
var url = "search.php";
xmlHttp.open("POST",url,true);
xmlHttp.send("search=" + searchvalue);

（显然，searchvalue
是用户输入的值。我假设您可以考虑如何使用JS从HTML DOM中获取它
也就是说，与实际问题无关，我建议您不要使用那些不透明的、样板的Ajax代码。这大大简化了ajaxical的工作。例如，您可以使用代替这一切。链接指向几个示例。
我猜您需要在Ja中的某个地方添加一个return false；
vascript？
我猜您需要在Javascript中的某个地方添加一个返回false；
。
那么，让我看看我是否正确理解您的意思：
您有两个文件：一个纯文本HTML，其中包含上述表单，一个search.php文件接收AJAX请求，对吗？您希望该文件不提交数据，而是发送AJAX并在searchContainer div中构造结果，对吗
然后您有两个选项：
从XML/纯文本请求构造结果
如果浏览器支持，请使用innerHTML
从答案开始，前面的答案是正确的，您需要返回false；
以避免向服务器提交表单。现在，回到答案，您还可以将类型从submit
更改为button
，改为只使用一个按钮
现在，选项如下：
第一个选项应该是理想的：您可以在预格式化的字符串中获得结果，然后可以使用createElement（）
和appendChild（）
对其进行拆分和构造。尽管这需要更多的编码，但您可以确保跨浏览器支持（除非浏览器太差，否则您无法使用上述两个功能）
这一个非常依赖于浏览器（我在Firefox和Internet Explorer上遇到了问题），您可能需要执行许多检查和其他功能来替换搜索容器
中编写的当前HTML
我选择1号，它可以减轻你肩上的重量
更新：
根据请求，我正在使用1）的示例进行编辑。假设您以纯文本形式获得结果，保存在xhr\u结果中，格式如下：text\u 1:value\u 1 | text\u 2:value\u 2 |……
（我对XML了解不多，这对我来说更容易）
var options=xhr_results.split（“|”）；
var选项_text=[]；
var期权_值=[]；
对于（变量i=0；i

这段代码将为您构建一个下拉菜单，其中包含从AJAX传递的所有选项。
因此，让我看看我是否正确理解您的意思：
您有两个文件：一个纯文本HTML，其中包含上述表单，一个search.php文件接收AJAX请求，对吗？您希望该文件不提交数据，而是发送AJAX并在searchContainer div中构造结果，对吗
然后您有两个选项：
从XML/纯文本请求构造结果
如果浏览器支持，请使用innerHTML
从答案开始，前面的答案是正确的，您需要返回false；
以避免向服务器提交表单。现在，回到答案，您还可以将类型从submit
更改为button
，改为只使用一个按钮
现在，选项如下：
第一个选项应该是理想的：您可以在预格式化的字符串中获得结果，然后可以使用createElement（）
和appendChild（）
对其进行拆分和构造。尽管这需要更多的编码，但您可以确保跨浏览器支持（除非浏览器太差，否则您无法使用上述两个功能）
这一个非常依赖于浏览器（我在Firefox和InternetExplorer上遇到了问题），您可能需要实现很多检查和其他功能来替换当前在浏览器中编写的HTML