ajax练习习题三搜索
做一个汽车搜索页面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>易捷搜索</title>
<style type="text/css">
.title
{
font-size:40px ;
font-style:italic;
top:100px;
width:%;
height:80px;
left:%;
position:absolute;
} .text
{ height:60px;
top:200px;
width:%;
left:%;
position:absolute; }
.shuru
{
border:#CF0 solid 3px ;
width:%; height:40px;
padding:5px;
font-size:30px;
font-family:'雅黑';
color: #FFF;
text-align:left;
} .stn
{ background:#;
border:#CCC solid 4px ;
font-size:33px ;
font:"雅黑";
margin-left:10px;
position: absolute; }
.xs
{
border:1px;
top:280px;
width:%;
left:%;
position:absolute;
z-index:; }
.list
{
width:;
margin-top:10px;
font:"雅黑";
font-style:oblique;
}
.jg
{
width:%;
top:500px;
position:absolute; }
#tb
{
border:#F00 solid 1px;
}
</style>
<script type="text/javascript" src="../../popwindow/jquery-1.11.2.min.js"></script>
</head> <body>
<div class="title" align="center" title="汽车搜索"><font color="#FF0000" size="50px" >易捷</font>汽车搜索</div>
<div class="text" align="center"><input title="请输入关键字" id="sr" class="shuru" /><input type="button" title="点击搜索" id='btn' class="stn" align="middle" value="搜索"/></div>
<div class="xs"></div>
<div class="jg"><table align="center" id="tb" > </table></div>
>
</body>
<script type="text/javascript" >
$(document).ready(function(e) {
//焦点事件
$("#sr").focus(function(e) {
$(this).css("background","#CC6"); });
$("#sr").blur(function(e) {
$(this).css("background","red");
});
//时时提交 $("#sr").keyup(function(e) { var nr=$(".shuru").val();
$.ajax({
async:false,
url:"chuli.php",
data:{nr:nr},
dataType:"TEXT",
type:"POST",
success: function(data){ var hang=data.split("|");
var str="";
for (var i=;i<hang.length;i++)
{
//var lie= hang[i].split("^");
str=str+"<div class='list'>"+hang[i]+"</div>";
}
$(".xs").html(str);
}
});
//移入移出改变颜色
$(".list").mouseover(function(e) {
$(this).css("background","#C0F");
});
$(".list").mouseout(function(e) {
$(this).css("background","#FFF");
});
$(".list").click(function(e) {
//选中内容显示到搜索框然后清除联想词
var xz=$(this).text();
$(".shuru").val(xz);
$(".xs").empty();
//清楚搜索结果
$("#tb").empty(); //显示选中内容的详细信息 var nr= $(".shuru").val();
$.ajax({
async:false,
url:"chuli1.php",
data:{nr:nr},
dataType:"TEXT",
type:"POST",
success: function(data){
var hang=data.trim().split("|");
var str="<tr><td>汽车名</td><td>系列</td><td>出厂日期</td><td>油耗</td><td>功率</td><td>排量</td><td>价格</td></tr>";
for (var i=;i<hang.length;i++)
{
var lie=hang[i].split("^");
str= str+"<tr><td>"+lie[]+"</td><td>"+lie[]+"</td><td>"+lie[]+"</td><td>"+lie[]+"</td><td>"+lie[]+"</td><td>"+lie[]+"</td><td>价格"+lie[]+"</td></tr>";
} $("#tb").html(str);
} }); });
}); //搜索钮搜索
$("#btn").click(function(e) { //根据·搜索框内容搜索
var nr= $("#sr").val();
$.ajax({
async:false,
url:"chuli.php",
data:{nr:nr},
dataType:"TEXT",
type:"POST",
success: function(data){ var hang=data.split("|");
var str="";
for (var i=;i<hang.length;i++)
{
//var lie= hang[i].split("^");
str=str+"<div class='list'>"+hang[i]+"</div>";
}
$(".xs").html(str);
} });
//移入移出改变颜色
$(".list").mouseover(function(e) {
$(this).css("background","#C0F");
});
$(".list").mouseout(function(e) {
$(this).css("background","#FFF");
});
$(".list").click(function(e) {
//选中内容显示到搜索框然后清除联想词
var xz=$(this).text();
$(".shuru").val(xz);
$(".xs").empty();
//清楚搜索结果
$("#tb").empty();
//选中内容显示到搜索框然后清除联想词
var xz=$(this).text();
$(".shuru").val(xz);
$(".xs").empty();
//清楚搜索结果
$("#tb").empty(); //显示选中内容的详细信息 var nr= $(".shuru").val();
$.ajax({
async:false,
url:"chuli1.php",
data:{nr:nr},
dataType:"TEXT",
type:"POST",
success: function(data){
var hang=data.trim().split("|");
var str="<tr><td>汽车名</td><td>系列</td><td>出厂日期</td><td>油耗</td><td>功率</td><td>排量</td><td>价格</td></tr>";
for (var i=;i<hang.length;i++)
{
var lie=hang[i].split("^");
str= str+"<tr><td>"+lie[]+"</td><td>"+lie[]+"</td><td>"+lie[]+"</td><td>"+lie[]+"</td><td>"+lie[]+"</td><td>"+lie[]+"</td><td>价格"+lie[]+"</td></tr>";
} $("#tb").html(str);
} }); }); }); }); </script>
</html>
处理页面一
<?php
$nr=$_POST["nr"];
include ("../DBDA.class.php");
$db=new DBDA();
if ($nr=="")
{
echo "";
}
else
{
$sql="select name from car where name like '%{$nr}%'";
$str=$db->StrQuery($sql);
echo $str;
}
处理页面二
<?php
$nr=$_POST["nr"];
include ("../DBDA.class.php");
$db=new DBDA();
$sql="select * from car where name='{$nr}'";
echo $db->StrQuery($sql);
ajax练习习题三搜索的更多相关文章
- 框架基础：关于ajax设计方案（三）---集成ajax上传技术
之前发布了ajax的通用解决方案,核心的ajax发布请求,以及集成了轮询.这次去外国网站逛逛,然后发现了ajax level2的上传文件,所以就有了把ajax的上传文件集成进去的想法,ajax方案的l ...
- Ajax制作智能提示搜索
一.效果图: 二.实现过程: 思路: 三.部分代码: html: <div id="searchbox"> <div><input type=&quo ...
- (转)JAVA AJAX教程第三章—AJAX详细讲解
现在开始深入AJAX,这里还是按老思路,理论和实践相结合.这章的内容主要是讲解AJAX步骤详解,下一张将会用一个AJAX技术实现页面提示效果的实例来说明AJAX的实现. 一.AJAX步骤详解 AJAX ...
- ASP.NET之Ajax系列（三）
我们通过前两篇文章的学习,已经大致掌握了Ajax的实现方法,同时也可以对比出两种方式的优劣.但是我们还是没有搞清楚真正的ajax的实现原理,以及最原始的,未经过封装的ajax是什么样的,今天我们一起来 ...
- Ajax学习（三）——XMLHttpRequest对象的五步使使用方法
Ajax的核心技术是XMLHttpRequest对象,它能够在不向server提交整个页面的情况下.实现局部更新网页.通过这个对象,Ajax能够像桌面应用程序那样仅仅与server进行数据层的 ...
- Ajax以及类似百度搜索框的demo
public class Ajax01 extends HttpServlet{ @Override protected void service(HttpServletRequest request ...
- 框架基础：ajax设计方案（三）---集成ajax上传技术
之前发布了ajax的通用解决方案,核心的ajax发布请求,以及集成了轮询.这次去外国网站逛逛,然后发现了ajax level2的上传文件,所以就有了把ajax的上传文件集成进去的想法,ajax方案的l ...
- 详解Ajax请求（三）——jQuery对Ajax的实现及serialize()函数对于表单域控件参数提交的使用技巧
原生的Ajax对于异步请求的实现并不好用,特别是不同的浏览器对于Ajax的实现并不完全相同,这就意味着你使用原生的Ajax做异步请求要兼顾浏览器的兼容性问题,对于java程序员来讲这是比较头疼的事情, ...
- AJAX学习必备三本书
<AJAX基础教程>AJAX必备图书之一.国内发行的第一本AJAX图书,也是目前最好的AJAX入门书,如果您是AJAX新手,此书是最好的入门图书.本书基本包括了实现Ajax需要了解的大部分 ...
随机推荐
- android webview开启html5支持
最近做的一个小项目需要用到webview.虽然只是一个简单的网页,但是由于以前用的都只是显示本地文件,没有显示网页文件.现在需要显示网页文件,发现许多网站的webapp做的挺不错的,无论是显示还是用户 ...
- 【转】oracle number与java中long、int的对应
Oracle数据库中number类型在hibernate的引用 1)如果不指定number的长度,或指定长度n>18 id number not null,转换为pojo类时,为java.mat ...
- C#使用Socket登陆WordPress源码
就在昨晚,在本屌丝刚刚发布屌丝与女神的回忆史<C#外挂QQ找茬辅助源码,早期开发>后,在苏飞大哥的技术讨论群有个群友提出一个问题.使用http协议模拟工具可以登录成功Wordpress但是 ...
- 【Integer To Roman】cpp
题目: Given an integer, convert it to a roman numeral. Input is guaranteed to be within the range from ...
- Using sql azure for Elmah
The MSDN docs contain the list of T-SQL that is either partially supported or not supported. For ex ...
- c++ dirname() basename()
http://linux.about.com/library/cmd/blcmdl3_dirname.htm #include <iostream> #include <libgen ...
- WebServices中使用Session
默认情况下,Asp.net使用cookie来管理会话状态.因此,Asp.net假设客户端存储了会话cookie并将它与每一个请求一并发回给客户端. /// <summary> /// Su ...
- 【BZOJ】【1028】【JSOI2007】麻将
暴力/模拟 $n\leq400$,嗯……这是一个很小的数据范围= = 判断一副牌是不是听牌并求出听什么牌太麻烦了,干脆我们直接判是不是胡牌好了~ 枚举胡的是哪张牌,然后判一下加上这张牌后是否能胡. 算 ...
- Matlab实现单变量线性回归
一.理论 二.数据集 6.1101,17.592 5.5277,9.1302 8.5186,13.662 7.0032,11.854 5.8598,6.8233 8.3829,11.886 7.476 ...
- [REFERENCE] Real-Time-Normal-Map-Dxt-Compression
DXT5N & 3Dc(aka BC5) compression in common code & SIMD: http://mrelusive.com/publications/pa ...