ajax 仿百度搜索框,Ajax以及类似百度搜索框的demo

public class Ajax01 extends HttpServlet{

@Override

protected void service(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

PrintWriter out = response.getWriter();

JSONObject jo = new JSONObject();

jo.put("mingzi", "chenchunqiu");

jo.put("age", 33);

out.print(jo);//把信息发送到前台，便于前台ajax对象XMLHttpRequest的resonpseText属性获取到jsonStr,即获取到json字符串

out.close();

}

}

function loadInfo(){

//步骤1.获取xml对象

var xhr ;//new XMLHttpRequest();

if(window.XMLHttpRequest){

xhr = new XMLHttpRequest();

}else{

xhr=new ActiveXObject("Microsoft.XMLHTTP");

}

//发送请求

xhr.open("get", "getAjax01", true);

xhr.onreadystatechange=function(){

if(xhr.readyState==4){

alert(xhr.responseText);//xhr.responseText()获取的是json字符串

//JSON.stringify(jsonobj); //可以将json对象转换成json对符串

var jsonObj = eval('(' + xhr.responseText + ')');//可以将json字符串转换成json对象,注意需要在json字符

//外包裹一对小括号,JSON.parse(jsonstr);这种方式也可以把json字符串转换成json对象。因为下面要

//用的.age这种.属性的方式访问属性值，所以需要转换成json对象。

alert("姓名："+jsonObj.mingzi);

alert("年龄："+jsonObj.age);

}

}

xhr.send(null);

}

扩展，类似百度搜索框风格的ajax实现。

百度搜索框绑定的js事件：onkeyup()事件。

function getXhr(){

var xhr;

if(window.XMLHttpRequest){

xhr = new XMLHttpRequest();

}else {

//ie浏览器

xhr = new ActiveXObject("Microsoft.XMLHttp");

}

return xhr;

}

/*

1.录入搜索内容

2.js中得到值，然后ajax中发送，service中进行查询，然后返回jsonStr,

3.ajax中转换为jsonObj,得到jsonObj的值。

*/

function doSearch(){

var xhr = getXhr();

var sousuo = document.getElementById("sousuo").value;//获取输入框的值

xhr.open("get","getSearch?sousuoValue="+sousuo+"",true);

xhr.onreadystatechange=function(){

if(xhr.readyState==4){

var jsonStr = xhr.responseText;

//var jsonObj = JSON.parse(jsonStr);这种方式在ie中不支持，chrome中可以正常使用

var jsonObj = eval('(' + jsonStr + ')');//这种转换方式在ie11，chrome中都可以正常使用。

//eval('(' + jsonstr + ')');

var keyValue = jsonObj.keyValue;//获取json对象的keyValue,属性。

//alert("keyValue:"+keyValue);

document.getElementById("sousuoFhz").value = keyValue;

document.getElementById("sousuo").focus();//使搜索框获得焦点

}

}

xhr.send(null);

}

失去焦点值：

userName:

password:

Java代码：

public class GetSearch extends HttpServlet{

@Override

protected void service(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

// TODO Auto-generated method stub

response.setCharacterEncoding("utf-8");

System.out.println("开始了。。。");

PrintWriter out = response.getWriter();

JSONObject jsonObj = new JSONObject();

//jsonObj.put("", value)

String sousuoValue = request.getParameter("sousuoValue");

DBUtil util = new DBUtil();

Connection conn= util.getConnection2();

PreparedStatement prep = null;

ResultSet rst = null;

String aac003 = "";

try {

prep = conn.prepareStatement("select aac003 from ac01 where aac002 like '%"+sousuoValue+"%'");

rst = prep.executeQuery();

if(rst.next()){

aac003 = rst.getString("aac003");

System.out.println("姓名："+aac003);

}

} catch (SQLException e) {

// TODO Auto-generated catch block

e.printStackTrace();

System.out.println("获取prep失败");

}

jsonObj.put("keyValue", aac003);

out.print(jsonObj);//向前台传递后台获取到的值

try {

rst.close();

prep.close();

conn.close();

} catch (SQLException e) {

// TODO Auto-generated catch block

e.printStackTrace();

}

}

}

DBUtil代码

/**

* 返回一个Connection,非空

* add by weiyongle 0113

* @return

*/

public Connection getConnection2(){

String driverName = "oracle.jdbc.driver.OracleDriver";

String url = "jdbc:oracle:thin:@10.162.128.131:1521/ybrsjhk";

String username = "dgsbkf_ggyw";

String pwd = "aa";

try {

Class.forName(driverName);

conn = DriverManager.getConnection(url,username,pwd);

} catch (ClassNotFoundException e) {

// TODO Auto-generated catch block

e.printStackTrace();

} catch (SQLException e) {

// TODO Auto-generated catch block

e.printStackTrace();

}

return conn;

}

web.xml代码

getSearch

com.java1234.web.GetSearch

getSearch

/getSearch

效果如下：界面很垃圾。

JavaScript实现模糊推荐的input框(类似百度搜索框)

如何用JS实现一个类似百度搜索框的输入框呢,再填充完失去焦点时,自动填充配置项,最终效果如下图: 实现很简单,但是易用性会上升一大截,需要用到的有jquery-ui的autocomplete,jque ...

使用DWR实现自动补全 类似百度搜索框的自动显示效果

使用DWR实现自动补全 自动补全:是指用户在文本框中输入前几个字母或汉字的时候,自动在存放数据的文件或数据库中将所有以这些字母或汉字开头的数据提示给用户供用户选择 在日常上网过程中,我们经常使用搜索引 ...

Ajax跨域：Jsonp实例--百度搜索框下拉提示

Ajax跨域:Jsonp实例--百度搜索框下拉提示 一.总结 一句话总结:a.找好接口:b.用script标签的src引入文件(json数据):c.定义及实现上一步引入文件中的函数 1.如何找到一个网 ...

js/jQuery实现类似百度搜索功能

一.页面代码:tf-8&q ...

React实现最完整的百度搜索框

import React,{Component} from 'react' import ReactDOM,{render} from 'react-dom' import 'bootstrap/di ...

window系统谷歌浏览器百度搜索框光标不能输入并且不显示光标----自制bug以及解决

--------------------bug无处不在------------------------- 今天在搞代码的时候,保存文件无意中犯了个致命错误,文件名称写入非法字符,可能与Windows系 ...

JS---DOM---案例：模拟百度搜索框

模拟百度搜索框 我的思路整理: 1. 注册文本框抬起事件(onkeyup) 2. 处理函数: --->创建临时数组,循环遍历文本框键入的文字内容和keywords数组,用keyWords[i]. ...

vue 使用watch监听实现类似百度搜索功能

watch监听方法,watch可以监听多个变量,具体使用方法看代码: HTML: < ...

随机推荐

Asp&period;Net Web API 2第七课——Web API异常处理

前言 阅读本文之前,您也可以到Asp.Net Web API 2 系列导航进行查看 http://www.cnblogs.com/aehyok/p/3446289.html 本文主要来讲解Asp.Ne ...

&lbrack;原创&rsqb;spring学习笔记：关于springsource-tool-suite插件的安装

1.首先我们得确定自己使用的eclipes的版本,具体方式:打开eclipes > help > About Eclipes > 点击eclipes的logo > 查看ecli ...

PHP 实现下载文件的方法

方法一: header('Content-Description: File Transfer'); header('Content-Type: application/octet-stream'); ...

iOS之应用内跳转系统设置相关界面

在iOS开发中,有时会有跳转系统设置界面的需求,例如提示用户打开蓝牙或者WIFI,提醒用户打开推送或者位置权限等.在iOS6之后,第三方应用需要跳转系统设置界面,需要在URL type中添加一个pre ...

Android开发艺术探索(一)——Activity的生命周期和启动模式

Activity的生命周期和启动模式 生命周期有? 1.典型情况下的生命周期—>指有用户参与的情况下,Activity所经过的生命周期改变 2.异常情况下的生命周期—>指Activity被 ...

通过OC实现简单的冒泡排序

NSMutableArray *arr = [@["] mutableCopy]; ; i

PHP之运用CI用钩子实现URL权限控制————————【Badboy】