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需要了解的大部分 ...
随机推荐
- Struts2中的ModelDriven机制及其运用(转)
所谓ModelDriven,意思是直接把实体类当成页面数据的收集对象.比如,有实体类User如下: package cn.com.leadfar.struts2.actions; public cla ...
- 三分--Football Goal（面积最大）
B - Football Goal Time Limit:500MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64u Su ...
- Basic knowledge of html (keep for myself)
1. 通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用. 2. 在 <head>元素中你可以插入脚 ...
- ZOJ Monthly, July 2015
B http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=5552 输入n,表示有n个数1到n.A先拿,B后拿,依次拿,每次可以拿任意一 ...
- Build Simple HTTP server
1. The server just support POST&PUT method 2. It is a Python server, and save upload files in sp ...
- 使用命令行进行 VS单元测试 MSTest
测试 指定的方法 "D:\Program Files (x86)\Microsoft Visual Studio 9.0\Common7\IDE\MSTest.exe" /test ...
- 学习NAnt Build .CS+Solution+MSBuild+SVN+NUnit+NUnitReport
NAnt help:http://nant.sourceforge.net/release/latest/help/tasks/NAntContrib help:http://nantcontrib. ...
- 2014年03月09日攻击百度贴吧的XSS蠕虫源码
var n=PageData.user.user_forum_list.info.length; var num=0; var config = { titles: ["\u4f60\u76 ...
- ***百度统计图表Echarts的php实现类，支持柱形图、线形图、饼形图
/** * 百度数据统计图表echart的PHP实现类 * * 原作者: * @author: chenliujin <liujin.chen@qq.com> * @since 2013- ...
- （转）Android: NDK编程入门笔记
转自: http://www.cnblogs.com/hibraincol/archive/2011/05/30/2063847.html 为何要用到NDK? 概括来说主要分为以下几种情况: 1. 代 ...