频道导航

Ajax下拉列表框

2020-06-05 Ajax 前端之家

前端之家收集整理的这篇文章主要介绍了Ajax下拉列表框，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

最近开始接触AJAX，最初以为是一种很新很时髦的技术，等学习了一段时间后，

发现不过是一些老技术的结合。最重要的就是XMLHttpRequest对象(JS)

正所谓学以致用，今天突发灵感，觉得百度的自动下拉提示框应该是用AJAX实现的，

于是心头一热，忙了大半个晚上，写了个简单的WEB程序。

下面给大家分享下自己的拙作，希望大家多点评下。

本网站前端采用的JSP，后台为Servlet模块。

数据库采用流行的MysqL。

在实现功能之前，应该了解一下基本的原理。

首先是要知道对表单的输入框的响应事件。

Javascript中有onpropertychange(IE支持)和oninput(FF等)

对于IE来说，可以这样来实现:

[javascript]view plaincopy 
   
 <scripttype="text/javascript">
 document.getElementById('myinput').attachEvent('onpropertychange',function(o){
 if(o.propertyName=='value'){
 //doSthex.alert(myinput.value);
 }
 });
 </script>

对于非IE浏览器，如Google Chrome,可以利用下面的代码:

copy 
    
   

document.getElementById('myinput').addEventListener("input",108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> //doSth

//ex.alert(myinput.value);

},false);

</script>

这样，我们就可以动态地取得用户输入的内容。通过AJAX的异步交互，将信息传递给Servlet处理，

Servlet连接数据库，得到匹配的信息,返回给页面。

在数据库中，可以这样模糊查询:

@H_502_198@ [sql] copy

*

FROM

table_name

WHERE

column_name=

'content%'

;

如果匹配多个字符则用"%"，单个字符用"_"。

**************************************************************************************

中文乱码问题

另外，由于我们是利用JS取得用户的数据，因此如果含有中文信息会乱码，

我们可以利用JS里的函数库来处理乱码内容:

encodeURI()或者 encodeURIComponent(uriComponent)

（调用一次还是会乱码，网上有人说要两次掉要该方法就可以解决问题，即encodeURI(encodeURI()))

在Servlet对得到的信息解码:

URLDecoder.decode(request.getParameter("msg","UTF-8"));

这样，我们就解决了中文乱码问题.

***************************************************************

整个流程大概如下：

下面给出一些关键代码:

首先是数据库:

创建数据库:

copy 
    
   

DATABASE

autoComplete;

接着创建表:

copy 
    
   

Table

:

TABLE

`hotwords`(

`id`int(11)NOTNULLAUTO_INCREMENT,
`msg`text,
PRIMARYKEY(`id`)
)ENGINE=InnoDBAUTO_INCREMENT=10DEFAULTCHARSET=utf8

再随机插入一些数据：

如图:

[plain]copy 
   

MysqL>select*fromhotwords;

+----+---------+
|id|msg|

|1|china|

|2|chinese|
|3|cake|
|4|cub|
|5|chaos|
|6|chicken|
|7|陈旭|
|8|陈龙|
|9|陈滟龙|

9rowsinset(0.00sec)

接下来是JSP页面:

index.jsp:

[html]copy 
   

<%@pagecontentType="text/html;charset=UTF-8"%>

<html>
headtitle>自动提示框</styletype="text/css" .mystyle
{background:whitenonerepeatscroll00;
border:1pxsolidblack;
cursor:default;
font-size:13px;
line-height:17px;
margin:0;
z-index:99;
width:150px;
left:10px;
top:10px;
visibility:hidden;
}
stylebody
imgsrc="pics/baidu_sylogo1.gif"/>
forminputtype="text"name="myinput"id="myinput"autocomplete="off"inputtype="submit"value="百度一下"
divid="aaa"class="mystyle">divscripttype="text/javascript" <!--
varxmlHttp;//XMLHttpRequest对象
//判断浏览器类型
functionisIE(){
if(navigator.userAgent.indexOf("MSIE")>0){
returntrue;

//定义表单内容改变事件

if(isIE()){
document.getElementById('myinput').attachEvent('onpropertychange',function(o){
if(o.propertyName=='value'){
varmsg=document.getElementById('myinput').value;//取得用户输入实时信息
getContent(msg);
});
}else{
document.getElementById('myinput').addEventListener("input",248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> varmsg=document.getElementById('myinput').value;//取得用户输入实时信息
getContent(msg);
},true);
//创建XMLHttpRequest对象
functioncreateXMLHttp(){
if(window.ActiveXObject)
xmlHttp=newActiveXObject("Msxml2.XMLHTTP");
else
xmlHttp=newXMLHttpRequest();
//向服务器取数据
functiongetContent(msg){
createXMLHttp();
varurl=encodeURI(encodeURI("query.do?msg="+msg));
xmlHttp.open("POST",url,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4){
if(xmlHttp.responseText=='')
document.getElementById("aaa").style.visibility='hidden';
else{
document.getElementById("aaa").style.visibility='visible';
document.getElementById("aaa").innerHTML=xmlHttp.responseText;

};

xmlHttp.send();
//--script>

再来是Servlet

QueryServlet.java:

[java]copy 
   

java.io.IOException;

importjava.io.PrintWriter;
importjava.net.URLDecoder;
importjava.sql.Connection;
importjava.sql.DriverManager;
importjava.sql.PreparedStatement;
importjava.sql.ResultSet;
importjava.sql.sqlException;
importjavax.servlet.ServletException;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
publicclassQueryServletextendsHttpServlet{
privatestaticfinallongserialVersionUID=1L;
voiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,IOException{
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
PrintWriterout=response.getWriter();
Stringmsg=request.getParameter("msg");
Stringdecoded_msg=URLDecoder.decode(msg,"UTF-8");
System.out.println(decoded_msg);
getContent(decoded_msg,out);
staticConnectiongetConnection(){
Connectionconn=null;
try{
Class.forName("com.MysqL.jdbc.Driver");

conn=DriverManager.getConnection(

"jdbc:MysqL://localhost:3306/autocomplete","root",108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> "yourpassword");
returnconn;
}catch(ClassNotFoundExceptioncnfe){
cnfe.printStackTrace();
returnnull;
}catch(sqlExceptione){
e.printStackTrace();
voidgetContent(Stringmsg,PrintWriterout){
Connectionconn= PreparedStatementpstmt= ResultSetrs=if(!msg.equals("")){
System.out.println(msg);
Stringsql="select*fromhotwordswheremsglike'"+msg+"%'";
System.out.println(sql);
conn=getConnection();
pstmt=conn.prepareStatement(sql);
rs=pstmt.executeQuery();
while(rs.next()){
out.print(rs.getString("msg")+"<br/>");
catch(sqlExceptione){
e.printStackTrace();
finally{
try{
if(rs!=null){
rs.close();
if(pstmt!=null){
pstmt.close();
if(conn!= conn.close();
//删除内容
booleandeleteContent(Stringmsg){

Stringsql="delete*fromhotwordswheremsg=?";

conn=getConnection();

pstmt=conn.prepareStatement(sql);
pstmt.setString(1,msg);
intn=pstmt.executeUpdate();
if(n>0){
true;
else{
false;
false;

pstmt.close();

conn.close();
}

最后贴一个web.xml:

copy 
    
   

xml

version

=

"1.0"

encoding

=

"UTF-8"

?>

web-appversion="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"display-nameservletservlet-name>QueryServletservlet-classservlet-mappingurl-pattern>/query.dowelcome-file-listwelcome-file>index.jspweb-app>

上一篇：Dwr 简易配置下一篇：ajax 结合struts实现跨域访问

猜你在找的Ajax相关文章

网页的异步请求（Ajax）

JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求兼容性问题利用iframe模拟ajax 实现表...

作者：前端之家时间：2021-01-14

手动实现AJAX

AJAX 每日更新前端基础，如果觉得不错，点个star吧 😃 https://github.com/Win...

作者：前端之家时间：2020-12-19

axios异步提交表单数据的不同形式

踩坑Axios提交form表单几种格式前后端分离的开发前后端, 前端使用的vue,后端的安全模块使...

作者：前端之家时间：2020-12-12

php的ajax简单实例

很早就听闻ajax的名声，但是却一直不知道怎么用，今天自己捣鼓了一下，竟然会用了，哈哈哈...

作者：前端之家时间：2020-11-11

Json与Ajax(注册实例）

需要在服务器上进行哈 jquery的ajax方法： // jquery请求 $.ajax({ url: "./serv...

作者：前端之家时间：2020-11-07

jSon和Ajax登录功能，ajax数据交互案例

ajax实例，检测用户与注册检测用户名是否被占用：在用户填写完用户名之后，ajax会异步向...

作者：前端之家时间：2020-11-07

关于AjaxControlToolkit的样式问题

网(LieHuo.Net)教程技术文章一直都是转载的,从来没有自创过.终于遇到AjaxControlToolkit,...

作者：前端之家时间：2020-11-04

一个简单的AJAX实现(HELLO AJAX)

客户端部分： <html> <head> <meta http-equiv="Content-Type" ...

作者：前端之家时间：2020-11-04

AJAX中文乱码的两类问题及解决之策

1）发送路径中的参数有中文，在服务器段接收参数值是乱码例如： var url=”a.jsp?na...

作者：前端之家时间：2020-11-04

实例：AJAX返回xml代码如何在网页中显示

建站学院（LieHuo.Net）文档今天来学习一篇实例代码教程：AJAX返回xml代码如何在网页中显...

作者：前端之家时间：2020-11-04

最新文章