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 下载图片出现SkImageDecoder::Factory returned null，BitmapFactory.Options压缩
网上有很多说是因为没有采用HttpClient造成的,尼玛,我改成了HttpClient 请求图片之后还是会出现SkImageDecoder::Factory returned null, 但是直接使 ...
- HDU 5568 sequence2 区间dp+大数
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5568 题意: 求所有长度为k的严格升序子序列的个数. 题解: 令dp[i][k]表示以i结尾的长度为 ...
- BZOJ1500 维修数列
AC通道:http://www.lydsy.com/JudgeOnline/problem.php?id=1500 [前言] 据说没打这题就相当于没打过Splay,这题简直就是让你内心崩溃的... 这 ...
- DPI 导致的问题
SetProcessDPIAware https://msdn.microsoft.com/en-us/library/windows/desktop/ms633543(v=vs.85).aspx & ...
- tomcat错误：@HandlesTypes annotation of one or more ServletContentInitializers
项目在别人的机器上运行正常,但是在自己机器上运行出现该错误,所以判断应该是环境配置的问题,通过更换eclipse.更换jdk.更换maven.更换tomcat的不同版本,最终确认是tomcat的问题. ...
- AS3之正则表达式讲解
限制输入内容 (一).my_txt.restrict = "A-Z 0-9"; 仅允许在文本字段中输入大写字符.空格和数字 (二).my_txt.res ...
- Codeforces Round #263 (Div. 2)
吐槽:一辈子要在DIV 2混了. A,B,C都是简单题,看AC人数就知道了. A:如果我们定义数组为N*N的话就不用考虑边界了 #include<iostream> #include &l ...
- ios设备突破微信小视频6S限制的方法
刷微信朋友圈只发文字和图片怎能意犹未竟,微信小视频是一个很好的补充,音视频到位,流行流行最流行.但小视频时长不能超过6S,没有滤镜等是很大的遗憾.but有人突破限制玩出了花样,用ios设备在朋友圈晒出 ...
- mybatis insert 如何返回主键
在使用ibatis插入数据进数据库的时候,会用到一些sequence的数据,有些情况下,在插入完成之后还需要将sequence的值返回,然后才能进行下一步的操作. 使用ibatis的sel ...
- ipa上传到APP store
原地址:http://blog.csdn.net/akun1103/article/details/8632651 在itunes中创建程序 该部分内容继续以雪豹系统为例 打开https://itun ...