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

【问题标题】：search form in html/php via ajax通过 ajax 在 html/php 中搜索表单
【发布时间】：2011-02-12 04:51:40
【问题描述】：

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

搜索.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>

如果我将 action="search.php" 添加到表单标签，它会在 search.php 上显示结果。我希望它显示在同一个表单上[即search.html，而不是search.php]，如果我只是添加javascript函数[如上所述]，它不会在search.html上显示任何内容。

search_ajax.js：

var xmlHttp


function run_query() {
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null) {
alert ("This browser does not support HTTP Request");
return;
} // end if
var url="search.php";
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
} //end function

function stateChanged(){
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
document.getElementById("searchContainer").innerHTML=xmlHttp.responseText;
} //end if
} //end function

function GetXmlHttpObject() {
var xmlHttp=null;
try {
// For these browsers: Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}catch (e){
//For Internet Explorer
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
} //end function

搜索.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());

【问题讨论】：

标签： php javascript html ajax forms

【解决方案1】：

onclick="run_query();"

您似乎没有阻止表单的默认操作。在onclick 末尾添加return false;：

onclick="run_query(); return false;"

或者如果run_query()实际上返回false，那么重写onclick如下：

onclick="return run_query();"

更新：您确实没有将请求参数传递给 PHP 代码。替换

var url = "search.php";

通过

var url = "search.php?search=" + searchvalue;

并在 PHP 中使用 $_GET。如果你真的想使用POST，那就做

var url = "search.php";
xmlHttp.open("POST",url,true);
xmlHttp.send("search=" + searchvalue);

（searchvalue 显然是用户输入的值。我假设您知道如何使用 JS 从 HTML DOM 中获取它。

也就是说，与实际问题无关，我建议您使用jQuery 来代替所有不透明和样板的Ajax 代码。它极大地简化了 ajaxical 的工作。例如，您可以使用 jQuery.post() 而不是全部。该链接指向几个示例。

【讨论】：

做到了。不起作用。如果我添加onclick="run_query(); return false;" 它会显示所有记录，而不是输入的关键字[sql 查询有效，因为我已经在 mysql 中尝试过]，如果我重写 onclick，则什么也不会发生。
至少解决了页面刷新的问题。您的下一个问题是为什么它返回所有结果。请求参数是否正确传递？请求参数是否正确收集？调试您的 PHP 代码。
请求参数没有被传递给 search.php
我已经从上面的 search.php 中发布了相关的 sn-p。
感谢您。但它不起作用。在地址栏中，它不去search.php。而是显示search.html?search=sweet 并且没有显示任何结果..我在这里做错了什么？

【解决方案2】：

我猜您需要在 Javascript 中的某处添加 return false;？

【讨论】：

【解决方案3】：

那么，让我看看我是否理解正确：

您有 2 个文件：一个包含上述表单的纯文本 HTML，以及一个接收 AJAX 请求的 search.php 文件，对吗？而且您希望文件不提交数据，而是发送 AJAX 并在 searchContainer div 中构造结果，对吗？

那么你有两个选择：

根据 XML/纯文本请求构造结果
如果您的浏览器支持，请使用 innerHTML。

从答案来看，前面的答案是对的，你需要一个return false;来避免将表单提交到服务器。现在，回到答案，您还可以将类型从 submit 更改为 button 以仅使用按钮。

现在，选项：

第一个选项应该是最理想的：您可以在预先格式化的字符串中获得结果，然后您可以使用createElement() 和appendChild() 对其进行拆分和构造。尽管这需要更多的编码，但您可以确保跨浏览器支持（除非浏览器太烂，您无法使用上面提到的 2 个功能）。
这个几乎依赖于浏览器（我在使用 Firefox 和 Internet Explorer 时遇到了问题），您可能需要实现大量检查和其他功能来替换 searchContainer 中编写的当前 HTML。

我会选择 1 号，它可以减轻你的负担。

更新：

根据请求，我正在编辑 1) 的示例。假设你得到纯文本的结果，保存在xhr_results 格式如下：text_1:value_1|text_2:value_2|...（我对 XML 了解不多，这对我来说更容易）。

var options = xhr_results.split('|');
var options_text = [];
var options_value = [];
for (var i = 0; i < options.length; i++){
options_text[i] = options[i].split(':')[0];
options_value[i] = options[i].split(':')[1];
}
var sel = document.createElement('select');
for (var i = 0; i < options.length; i++){
    opt = document.createElement('option');
opt.text = options_text[i]
opt.value = options_value[i];
sel.appendChild(opt);
}

这段代码将为您构建一个下拉菜单，其中包含从 AJAX 传递的所有选项。

【讨论】：

感谢您的回复。你能举一个第一个选项的例子吗？
用一个例子更新了答案。一旦构建完成，您所要做的就是 document.getElementById('searchContainer').appendChild(sel); ，例如。