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"> < ...
随机推荐
- 技术是容易学会的(Copy)
1)自信第一.自信这东西很是奇怪,人有可能一开始会莫明其妙的自信,但一切都从这开始的.你觉得自己行你就一定会变得行,反之,如果觉得自已不行,那一定会不行.信心是我们转动飞轮的第一步,有了这一步我们的能 ...
- linq to entity asp.net mvc 多字段排序
字段1 降序 字段2 降序 var str = db.xxx.OrderByDescending(p=>p.字段1).ThenByDescending(p=>p.字段2) ThenBy - ...
- sql语法复习：增删查改,各种数据库对象创建和函数使用
推荐工具:机子配置较低的话,可以装Gsql这个工具获得sql执行环境(可作为手册查看内置数据类型 函数和存储过程等) --之前数据库的东西接触不多,虽然基本的语法是了解,但不是很熟悉--最近项目一直在 ...
- 使用HISTCONTROL强制history忽略某条特定命令
http://www.linuxnote.org/mandatory-use-of-histcontrol-ignore-a-certain-specific-command-history.html ...
- mysql基本总结
创建数据库 creat table test( #整数通常使用int test_id int, #小数通常使用decimal test_price decimal, #普通文本通常使用,并使用Defa ...
- JS中onload的各种使用
1.最简单的调用方式 直接写到html的body标签里面,如: <html> <body onload="func()"> </body> &l ...
- JavaScript中cookie的路径(path)和域(domain)
cookie虽然是由一个网页所创建,但并不只是创建cookie的网页才能读 取该cookie.在默认情况下,与创建cookie的网页在同一目录或子目录下的所有网页都可以读取该cookie.但如果在这个 ...
- 记载abp中Dbcontext的疑问
q:abp中httpcontext如何在一次请求中保证获取的是相同的实例. 大牛的原话: LifestylePerWebRequest does not works good with async. ...
- Android中图片处理相关问题
在Android的开发中,我们经常回去处理一些图片相关的问题,比如当加载图片到内存中产生的OOM(OutOfMemory)异常.图片加载到内存中占多大内存的问题.jpg png两种常见的图片的原理及区 ...
- Lowest Common Multiple Plus
Lowest Common Multiple Plus Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java ...