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

时间：2022-09-27 19:59:27
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

Ajax以及类似百度搜索框的demo的更多相关文章

  1. JavaScript实现模糊推荐的input框&lpar;类似百度搜索框&rpar;

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

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

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

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

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

  4. js&sol;jQuery实现类似百度搜索功能

    一.页面代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...

  5. 使用 Vue&period;js 2&period;0&plus; Vue-resource 模仿百度搜索框

    使用 Vue.js 2.0 模仿百度搜索框 <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...

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

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

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

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

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

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

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

    watch监听方法,watch可以监听多个变量,具体使用方法看代码: HTML: <!doctype html> <html lang="en"> < ...

随机推荐

  1. 【译】Spring 4 自动装配、自动检测、组件扫描示例

    前言 译文链接:http://websystique.com/spring/spring-auto-detection-autowire-component-scanning-example-with ...

  2. monkeyrunner之控件ID不存在或重复

    我们在用monkeyrunner进行Android自动化时,通过获取坐标点或控件ID进行一系列操作.由于使用坐标点时,屏幕分辨率一旦更改,则代码中用到坐标的地方都要修改,这样导致代码的复用率较低.因此 ...

  3. MySQL主从复制数据不一致问题【自增主键】

    前言: 今天遇到主从表不一致的情况,很奇怪为什么会出现不一致的情况,因为复制状态一直都是正常的.最后检查出现不一致的数据都是主键,原来是当时初始化数据的时候导致的.现在分析记录下这个问题,避免以后再遇 ...

  4. &period;net 中读取自定义Config文件

    今天做一个windows插件式服务程序,插件有时要读取配置文件的设置,但是服务是动态加载到服务上的,没有办法作到动态修改服务的配置文件(app.config).在.net 2.0中有一个Configu ...

  5. 101、使用ContentProvider在应用间传递数据

    [ContentWriter] package com.jikexueyuan.contentwriter; import android.content.ContentProvider; impor ...

  6. ActiveMQ入门实例&lpar;转&rpar;

    1.下载ActiveMQ 去官方网站下载:http://activemq.apache.org/ 2.运行ActiveMQ 解压缩apache-activemq-5.5.1-bin.zip,然后双击a ...

  7. VC&sol;MFC 下 递归遍历目录下的所有子目录及文件

    在MFC下要实现文件夹的递归遍历,可用CFileFind类,依次读取文件夹下的子文件夹和文件,并判断通过判断是文件夹还是文件来决定递归遍历.递归遍历代码如下: /******************* ...

  8. Java开源生鲜电商平台-搜索模块的设计与架构&lpar;源码可下载）

    Java开源生鲜电商平台-搜索模块的设计与架构(源码可下载) 说明:搜索模块针对的是买家用户,在找菜品找的很费劲下的一种查询方面.目前也是快速的检索商品. 对于移动端的APP买家用户而言,要求的速度在 ...

  9. 【转载】curl 模拟 GET&bsol;POST 请求，curl查看响应头 以及 curl post 上传文件

    补充说明:curl查看响应头 curl -I "http://www.baidu.com"HTTP/1.1 200 OK #HTTP协议 HTTP 返回码Server: Tengi ...

  10. Git初始化及配置

    >>>>Git简介 >>>>官网下载Git >>>>安装,一路next 安装成功后,鼠标右键里就有Git bash here和G ...

相关文章