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.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
  • donglian4464 2010-04-25 22:19
    关注

    I am guessing that you need to add a return false; somewhere in your Javascript?

    评论
  • douying0108 2010-04-25 22:30
    关注

    So, let me see if I understood you properly:

    You have 2 files: a plain text HTML where you have the aforementioned form, and a search.php file that receives the AJAX petitions, right? And you want the file not to submit the data but instead send the AJAX and construct the results in the searchContainer div, right?

    Then you have 2 options:

    1. Construct the results from an XML / Plain text petition
    2. Use innerHTML, if supported by your browser.

    Stranding from the answer, the previous answers are right, you need a return false; to avoid submitting the form to the server. Now, going back to the answer, you could also change the type from submit to button to use just a button instead.

    Now, the options:

    1. The first option should be the ideal: you get the results in a pre-formatted string, which you can then split and construct with createElement() and appendChild(). Although this requires a little more coding, you ensure cross-browser support (unless the browser sucks so much you cannot use the 2 functions mentioned above).
    2. This one is pretty much browser-dependant (I had issues with Firefox and Internet Explorer), and you may have to implement a lot of checking and other functions to replace the current HTML written inside the searchContainer.

    I'd go for number 1, it puts off a lot of weight off your shoulder.

    Update:

    Per request, I'm editing with an example of 1). Supposing you get the results as plain-text, saved in xhr_results and formated like this: text_1:value_1|text_2:value_2|... (I don't know much about XML, and this is easier for me).

    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);
}

    This piece of code will construct you a dropdown menu with all the options passed from the AJAX.

    评论
查看更多回答(2条)

报告相同问题？

悬赏问题

  • ¥30 c++ http服务器
  • ¥15 express连接mssql，每条额外附加了语句
  • ¥20 IQOO12如何有效ADB方法
  • ¥15 ios如何获取用户的订阅情况
  • ¥15 复杂表达式求值程序里的函数优先级问题
  • ¥15 求密码学的客成社记ji着用
  • ¥35 POI导入树状结构excle
  • ¥15 初学者c语言题目解答
  • ¥15 div editable中的光标问题
  • ¥15 mysql报错1415Not allowed to return a result set from a trigger 不知如何修改