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"> < ...
随机推荐
- Hibernate的搭建及使用
1.创建普通的java项目. 因为Hibernate是一个轻量级的框架,不像servlet,还必须需要tomcat的支持,Hibernate只要jdk支持即可. 2.引入jar包. 可以在项目中直接引 ...
- [置顶] 两主机搭建MySQL主从复制后，show slave status显示：Last_IO_Error: error connecting to master ……
两台主机A.B搭建mysql主从复制关系(A为master,B为slave)后,在slave上执行show slave status,结果中显示Last_IO_Error: error connect ...
- 盛希泰：办公室就像男人的春药——人的一生的精力是有限的，你把有限的时间分配给谁决定你的成败——你有N多选择，你人生的积累就是N多选择加起来的结果
欢迎关注“创事记”的微信订阅号:sinachuangshiji 创事记注:12月22日晚上,盛希泰在清华大学旧经管报告厅面对清华师生讲了一堂<创业引导课>.本文由洪泰帮根据课堂录音整理完成 ...
- 如何给变量取个简短且无歧义的名字（转） good
湾区日报上分享的一篇文章,文章的作者在Google设计Dart语言,就变量命名方面给了4点建议,文中也列出了好变量名.坏变量名的对比.不管作者的看法与你实际中的命名习惯是否一致,看完这篇文章,相信可以 ...
- Mark Russinovich 的博客：Windows Azure 主机更新：原因、时间和方式
Mark Russinovich的技术博客涵盖 Windows故障排除.技术和安全等主题. Windows Azure主机更新:原因.时间和方式 Windows Azure的计算平台(其中包括 ...
- 【转】 IE6 IE7 IE8 css bug兼容性解决方法总结归纳
1:li边距“无故”增加 任何事情都是有原因的,li边距也不例外. 先描述一下具体状况:有些时候li边距会突然增 加很多,值也不固定(只在IE6/IE7有这种现象),让人摸不着头脑,仔细“研究”发现是 ...
- 关于android源码中的APP编译时引用隐藏的API出现的问题
今天在编译android源码中的计算器APP时发现,竟然无法使用系统隐藏的API,比如android.os.ServiceManager中的API,引用这个类时提示错误,记忆中在android源码中的 ...
- 小编辑 Java 中十进制和十六进制的相互转换
1 2 3 4 5 // 十进制转化为十六进制,结果为C8. Integer.toHexString(200); // 十六进制转化为十进制,结果140. Integer.parseInt(&qu ...
- (译)Node.js的全局变量
原文标题:Global Variables in Node.js 原文链接:http://www.hacksparrow.com/global-variables-in-node-js.html 你可 ...
- asp.net连接ORACLE数据库
这段时间维护客户的一个系统,该系统使用的是ORACLE数据库,之前开发的时候用的都是MSSQL,并没有使用过ORACLE.这两种数据库虽然都是关系型数据库,但是具体的操作大有不同,这里作下记录. 连接 ...