duandaijian1583 2010-04-25 22:10
浏览 47
已采纳

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

I've a search form wherein the database query has been coded in php and the html file calls this php file via ajax to display the results in the search form. The problem is, I would like the result to be displayed in the same form as search.html; yet while the ajax works, it goes to search.php to display the results.

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>

If I add action="search.php" to the form tag, it displays the result but on search.php. I'd like it to display on the same form [i.e search.html, and not search.php] if I just add the javascript function [as done above], it displays nothing on 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

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());
  • 写回答

3条回答 默认 最新

  • ds2321 2010-04-25 22:19
    关注
    onclick="run_query();"
    

    You don't seem to block the form's default action. Add a return false; to the end of onclick:

    onclick="run_query(); return false;"
    

    Or if run_query() actually returns false, then rewrite the onclick as follows:

    onclick="return run_query();"
    

    Update: you indeed didn't pass the request parameter to PHP code. Replace

    var url = "search.php";
    

    by

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

    And use $_GET in PHP. If you actually want to use POST, then do

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

    (the searchvalue is obviously the user-entered value. I assume that you can figure how to grab it from the HTML DOM using JS.

    That said and unrelated to the actual problem, instead of all that opaque and boilerplate Ajax code I suggest you to use jQuery for this. It greatly eases doing ajaxical stuff. You could for example use jQuery.post() instead of this all. The link points to several examples.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

悬赏问题

  • ¥15 微信小程序 用oss下载 aliyun-oss-sdk-6.18.0.min client报错
  • ¥15 ArcGIS批量裁剪
  • ¥15 labview程序设计
  • ¥15 为什么在配置Linux系统的时候执行脚本总是出现E: Failed to fetch http:L/cn.archive.ubuntu.com
  • ¥15 Cloudreve保存用户组存储空间大小时报错
  • ¥15 伪标签为什么不能作为弱监督语义分割的结果?
  • ¥15 编一个判断一个区间范围内的数字的个位数的立方和是否等于其本身的程序在输入第1组数据后卡住了(语言-c语言)
  • ¥15 Mac版Fiddler Everywhere4.0.1提示强制更新
  • ¥15 android 集成sentry上报时报错。
  • ¥15 抖音看过的视频,缓存在哪个文件