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需要了解的大部分 ...
随机推荐
- timersmanager 解析
最近在看crtmp源代码,看到timersmanager 模块时感觉很难理解,花了不少时间反复思考该模块 的逻辑,现在思考的结果记录下来,方便以后查阅. 构造函数中将处理时间方法传进来,将_lastT ...
- RobotFramework-关键字
地址:https://github.com/NitorCreations/RobotFramework-EclipseIDE/tree/master/plugin/robot-indices Coll ...
- SQL-行转列（PIVOT）实例1
--未旋转之前的查询结果 select s.Name ShiftName,h.BusinessEntityID,d.Name as DpartmentName from HumanResources. ...
- UVALive - 6575 Odd and Even Zeroes 数位dp+找规律
题目链接: http://acm.hust.edu.cn/vjudge/problem/48419 Odd and Even Zeroes Time Limit: 3000MS 问题描述 In mat ...
- 临时文档9--dfs
#include<iostream> #include<stdio.h> #include<math.h> #include<string.h> usi ...
- 设计模式之代理模式(Proxy)
只能指针是代理模式的一种: 智能指针实现需要注意的问题: 1.构造函数指明显示构造. 2.拷贝构造函数,先断开前一个指针,然后用之前指针的值初始化现在的指针. 3.赋值函数需要先断开之前的指针,然后释 ...
- 【BZOJ】【3172】【TJOI2013】单词
AC自动机 Orz zyf 玛雅一开始连题意都没看懂……意思就是给你一篇文章的N个单词,问每个单词在这篇文章中各出现了几次?(这篇文章=N个单词) 那么我们建个AC自动机……对于每个单词来说,它出现的 ...
- 序列化Color对象
如下: public class Class2 { [XmlIgnore] public Color Color1 { get { return color1; } set { color1 = va ...
- [Shoi2007]Bookcase 书柜的尺寸 dp
这道dp算是同类型dp中比较难的了,主要难点在于设置状态上: 如果像平时那样设置,必定爆空间没商量: 下面是一种思路: 先把输入进来的数据按h从大到小排序,这样就可以大大减少状态数, 然后设f[i][ ...
- 用boost共享内存实现进程通信的例子
发送端 #include "DBProc1.h" #include <string> #include <thread> #include <boos ...