当用户键入名称时,我遇到了一些麻烦,使用ajax使搜索功能工作以显示结果。这就是问题所在的网站(您可以单击"查看全部"以查看可搜索的内容)http://ra-yon.com/beta/Testrongites/HFE/admin/contact.php正在运行的查询http://ra-yon.com/beta/Testrongites/HFE/include/queryc.php?query=ra-yon&条款=邮件
所讨论的代码
<html>
<head>
<style type="text/css">
body
{
background:black;
color:black;
width:100%;
}
#center
{
width:90%;
height:110%;
background:white;
margin:0 auto;
text-align:center;
color:black;
}
#insert{
background:navy; color:white; font-family:impact; font-size:18px;width:170px; height:170px; border-radius:50%;
margin:0 auto;
float: left; margin-left: 100px;
top:200px;
position: relative;
}
#insert:hover
{
background:white;
color:navy;
}
label
{width:150px;}
td
{
border:solid 2px black;
max-width: 250px;
text-align: center;
}
</style>
<script language="javascript" type="text/javascript">
<!--
//Browser Support Code
function ajaxFunction(x,y){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
document.getElementById('table').innerHTML = ajaxRequest.responseText;
}
}
ajaxRequest.open("GET", "../include/queryc.php?query=" + x + "&clause="+ y, true);
ajaxRequest.send(null);
}
//-->
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script></head>
<body>
<a href="index.php"> <h4 style="float:right; color:blue; position: relative; left:-100px;" id="goback"> Go back? </h4></a>
<div id="center">
<div id="queryform1" >
<a href="#" onclick="$('#table2').css('display','block');">View All?</a>
<span style="color:black;">search</span> <input type='text' onKeyUp="ajaxFunction(this.value,sel.options[sel.selectedIndex].value); " name='searchname' id="searchname" />
<span style="color:black;">search by</span> <select onChange="ajaxFunction(this.value,sel.options[sel.selectedIndex].value);" name="searchclause" id="searchclause">
<option ></option>
<option value="name">Name</option>
<option value="email">Email Address</option>
<option value="subject">Subject</option>
<option value="date">Date</option>
</select>
<a href="../include/downloadcontact.php">Download file?</a>
<div id="table2" style="display: none; margin: 0 auto; position: relative; top:40px; max-width:700px;">
<div id="viewall">
<?php
include '../include/include.php';
$sql = 'select * from contactus' ;
//print_r($sql);
$result=mysql_query($sql);
?>
<table>
<tbody>
<th>Name</th><th>Email</th><th>Subject</th><th style="width:200px;">Message</th><th>Date</th>
<tr>
<?php
while ($client = mysql_fetch_array($result, MYSQL_ASSOC)){
echo "
<tr>
<td >".$client[name]."</td>
<td >".$client[email]."</td>
<td >".$client[subject]."</td>
<td >".$client[message]."</td>
<td >".$client[date]."</td>
</tr>";
} ?>
</tbody></table>
</div></div><div id="table">TestTestTest</div>
</div></div>
</body>
</html>
现在有点乱,我打算修好后把它打扫干净。非常感谢大家!
为什么不使用jQuery来制作AJAX请求呢?jQuery提供了一个简单的$. AJAX()函数,这使得发送AJAX请求变得非常容易。http://api.jquery.com/jQuery.ajax/
同样与jQuery函数你的代码将不会那么混乱。——凯文
编辑:示例jQuery函数与回调。
$.ajax({
url: 'test',
type: 'POST',
data: 'data=foo',
success: function(text){
$('.content').html(text);
}
});
请求的响应文本在 Text 变量中。