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()事件。
<script type="text/javascript">
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); }
</script>
<body>
失去焦点值：<input type="text" onclick="getAjax()" id="a" /></br>
userName:<input type="text" onblur="checkName()" id="userName" /><span class="tishi" id="span"></span></br>
password:<input type="text" onblur="checkPassWord()" id="password" /></br> <div align="center">
<!--搜索框事件，onkeyup-->
<input type="text" id="sousuo" onkeyup="doSearch()" /> <input type="button" value="搜索" /></br>
<input type="text" id="sousuoFhz" />
</div>
</body>
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代码
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
<servlet>
<servlet-name>getSearch</servlet-name>
<servlet-class>com.java1234.web.GetSearch</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>getSearch</servlet-name>
<url-pattern>/getSearch</url-pattern>
</servlet-mapping>
</web-app>
效果如下：界面很垃圾。
Ajax以及类似百度搜索框的demo的更多相关文章
- JavaScript实现模糊推荐的input框(类似百度搜索框)
如何用JS实现一个类似百度搜索框的输入框呢,再填充完失去焦点时,自动填充配置项,最终效果如下图: 实现很简单,但是易用性会上升一大截,需要用到的有jquery-ui的autocomplete,jque ...
- 使用DWR实现自动补全 类似百度搜索框的自动显示效果
使用DWR实现自动补全 自动补全:是指用户在文本框中输入前几个字母或汉字的时候,自动在存放数据的文件或数据库中将所有以这些字母或汉字开头的数据提示给用户供用户选择 在日常上网过程中,我们经常使用搜索引 ...
- Ajax跨域：Jsonp实例--百度搜索框下拉提示
Ajax跨域:Jsonp实例--百度搜索框下拉提示 一.总结 一句话总结:a.找好接口:b.用script标签的src引入文件(json数据):c.定义及实现上一步引入文件中的函数 1.如何找到一个网 ...
- js/jQuery实现类似百度搜索功能
一.页面代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...
- 使用 Vue.js 2.0+ Vue-resource 模仿百度搜索框
使用 Vue.js 2.0 模仿百度搜索框 <!DOCTYPE html> <html> <head> <meta charset="utf-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: <!doctype html> <html lang="en"> < ...
随机推荐
- servlet三种实现方式之一实现servlet接口
servlet有三种实现方式: 1.实现servlet接口 2.继承GenericServlet 3.通过继承HttpServlet开发servlet 第一种示例代码如下(已去掉包名): import ...
- android-适配Adapter
Adapter是把数据和用户界面视图绑定到一起的桥梁类,负责创建用来表示父视图中的每一个条目的子视图,并提供对底层数据的访问. public class MainActivity extends Ac ...
- 简识UML语言（转）
在学习过程中用到了一些框图,用于绘画框图的语言数不胜数,本篇将就学习中用的一款绘画框图的语言做个简单的介绍. 直奔主题,采用一种可视化的面向对象的建模语言---UML,UML使用一些标准的圆形元素直观 ...
- hdoj 1878 欧拉回路(无向图欧拉回路+并查集)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1878 思路分析:该问题给定一个无向图,要求判断该无向图是否存在欧拉回路:无向图判断存在欧拉回路的两个必 ...
- linux下笔记本有线网卡"未受管理"
前段时间因为在弄一个笔记双网卡共享上网的事情把笔记本的有线网卡弄环了,连接的时候一直出现如下情况: 1)有线网卡:未受管理 2)无线网卡:每次登录的时候必须把原来登录过的信息删除掉,然后重新输入密码, ...
- projecteuler---->problem=8----Largest product in a series
title: The four adjacent digits in the 1000-digit number that have the greatest product are 9 9 8 9 ...
- Cstyle的札记，Freertos内核具体解释，第0篇
Freertos是一个硬实时内核,支持众多的微处理器架构,我们能够从它的官网(www.freertos.ort)下载它的sourcecode,同一时候也能够看出它支持了几十种的微处理器架构,这 ...
- STL之使用vector排序
应用场景: 在内存中维持一个有序的vector: // VectorSort.cpp : Defines the entry point for the console application. #i ...
- STL之deque（双向队列）
deque双向队列是一种双向开口的连续线性空间,可以高效的在头尾两端插入和删除元素,deque在接口上和vector非常相似,下面列出deque的常用成员函数: deque在vector函数的基础上增 ...
- 条款20：宁以pass-by-reference-to-const替换pass-by-value
本条款的要点: 1.尽量以pass-by-reference-to-const替换pass-by-value.前者更高效且可以避免切割问题. 2.这条规则并不适用于内建类型及STL中的迭代器和函数对象 ...