加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 （https://www.lidatong.com.cn/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 百科 > 正文

Ajax下拉列表框

发布时间：2020-12-16 02:05:49 所属栏目：百科 来源：网络整理
导读：最近开始接触AJAX，最初以为是一种很新很时髦的技术，等学习了一段时间后， 发现不过是一些老技术的结合。 最重要的就是XMLHttpRequest对象(JS) 正所谓学以致用，今天突发灵感，觉得百度的自动下拉提示框应该是用AJAX实现的， 于是心头一热，忙了大半个晚上

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

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

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

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

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

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

数据库采用流行的MySQL。

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


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

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

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

[javascript] view plain copy
  1. <scripttype="text/javascript">
  2. document.getElementById('myinput').attachEvent('onpropertychange',function(o){
  3. if(o.propertyName=='value'){
  4. //doSthex.alert(myinput.value);
  5. }
  6. });
  7. </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
  1. //ex.alert(myinput.value);
  2. },false);
  3. </script>

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

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


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

[sql] copy
    SELECT*FROMtable_nameWHEREcolumn_name='content%';

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


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

中文乱码问题

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

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

encodeURI()或者 encodeURIComponent(uriComponent)

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

在Servlet对得到的信息解码:

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


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

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

整个流程大概如下：

下面给出一些关键代码:


首先是数据库:

创建数据库:

copy
    CREATEDATABASEautoComplete;

接着创建表:

copy
    CreateTable:TABLE`hotwords`(
  1. `id`int(11)NOTNULLAUTO_INCREMENT,
  2. `msg`text,
  3. PRIMARYKEY(`id`)
  4. )ENGINE=InnoDBAUTO_INCREMENT=10DEFAULTCHARSET=utf8

再随机插入一些数据：

如图:

[plain] copy
    mysql>select*fromhotwords;
  1. +----+---------+
  2. |id|msg|
  3. |1|china|
  4. |2|chinese|
  5. |3|cake|
  6. |4|cub|
  7. |5|chaos|
  8. |6|chicken|
  9. |7|陈旭|
  10. |8|陈龙|
  11. |9|陈滟龙|
  12. 9rowsinset(0.00sec)

接下来是JSP页面:

index.jsp:

[html] copy
    <%@pagecontentType="text/html;charset=UTF-8"%>
  1. <html>
  2. headtitle>自动提示框</styletype="text/css" .mystyle
  3. {background:whitenonerepeatscroll00;
  4. border:1pxsolidblack;
  5. cursor:default;
  6. font-size:13px;
  7. line-height:17px;
  8. margin:0;
  9. z-index:99;
  10. width:150px;
  11. left:10px;
  12. top:10px;
  13. visibility:hidden;
  14. }
  15. stylebody
  16. imgsrc="pics/baidu_sylogo1.gif"/>
  17. forminputtype="text"name="myinput"id="myinput"autocomplete="off"inputtype="submit"value="百度一下"
  18. divid="aaa"class="mystyle">divscripttype="text/javascript" <!--
  19. varxmlHttp;//XMLHttpRequest对象
  20. //判断浏览器类型
  21. functionisIE(){
  22. if(navigator.userAgent.indexOf("MSIE")>0){
  23. returntrue;
  24. //定义表单内容改变事件
  25. if(isIE()){
  26. document.getElementById('myinput').attachEvent('onpropertychange',function(o){
  27. if(o.propertyName=='value'){
  28. varmsg=document.getElementById('myinput').value;//取得用户输入实时信息
  29. getContent(msg);
  30. });
  31. }else{
  32. document.getElementById('myinput').addEventListener("input",248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> varmsg=document.getElementById('myinput').value;//取得用户输入实时信息
  33. getContent(msg);
  34. },true);
  35. //创建XMLHttpRequest对象
  36. functioncreateXMLHttp(){
  37. if(window.ActiveXObject)
  38. xmlHttp=newActiveXObject("Msxml2.XMLHTTP");
  39. else
  40. xmlHttp=newXMLHttpRequest();
  41. //向服务器取数据
  42. functiongetContent(msg){
  43. createXMLHttp();
  44. varurl=encodeURI(encodeURI("query.do?msg="+msg));
  45. 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(){
  46. if(xmlHttp.readyState==4){
  47. if(xmlHttp.responseText=='')
  48. document.getElementById("aaa").style.visibility='hidden';
  49. else{
  50. document.getElementById("aaa").style.visibility='visible';
  51. document.getElementById("aaa").innerHTML=xmlHttp.responseText;
  52. };
  53. xmlHttp.send();
  54. //--script>

再来是Servlet

QueryServlet.java:


[java] copy
    importjava.io.IOException;
  1. importjava.io.PrintWriter;
  2. importjava.net.URLDecoder;
  3. importjava.sql.Connection;
  4. importjava.sql.DriverManager;
  5. importjava.sql.PreparedStatement;
  6. importjava.sql.ResultSet;
  7. importjava.sql.SQLException;
  8. importjavax.servlet.ServletException;
  9. importjavax.servlet.http.HttpServlet;
  10. importjavax.servlet.http.HttpServletRequest;
  11. importjavax.servlet.http.HttpServletResponse;
  12. publicclassQueryServletextendsHttpServlet{
  13. privatestaticfinallongserialVersionUID=1L;
  14. voiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)
  15. throwsServletException,IOException{
  16. request.setCharacterEncoding("UTF-8");
  17. response.setContentType("text/html;charset=UTF-8");
  18. PrintWriterout=response.getWriter();
  19. Stringmsg=request.getParameter("msg");
  20. Stringdecoded_msg=URLDecoder.decode(msg,"UTF-8");
  21. System.out.println(decoded_msg);
  22. getContent(decoded_msg,out);
  23. staticConnectiongetConnection(){
  24. Connectionconn=null;
  25. try{
  26. Class.forName("com.mysql.jdbc.Driver");
  27. conn=DriverManager.getConnection(
  28. "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");
  29. returnconn;
  30. }catch(ClassNotFoundExceptioncnfe){
  31. cnfe.printStackTrace();
  32. returnnull;
  33. }catch(SQLExceptione){
  34. e.printStackTrace();
  35. voidgetContent(Stringmsg,PrintWriterout){
  36. Connectionconn= PreparedStatementpstmt= ResultSetrs=if(!msg.equals("")){
  37. System.out.println(msg);
  38. Stringsql="select*fromhotwordswheremsglike'"+msg+"%'";
  39. System.out.println(sql);
  40. conn=getConnection();
  41. pstmt=conn.prepareStatement(sql);
  42. rs=pstmt.executeQuery();
  43. while(rs.next()){
  44. out.print(rs.getString("msg")+"<br/>");
  45. catch(SQLExceptione){
  46. e.printStackTrace();
  47. finally{
  48. try{
  49. if(rs!=null){
  50. rs.close();
  51. if(pstmt!=null){
  52. pstmt.close();
  53. if(conn!= conn.close();
  54. //删除内容
  55. booleandeleteContent(Stringmsg){
  56. Stringsql="delete*fromhotwordswheremsg=?";
  57. conn=getConnection();
  58. pstmt=conn.prepareStatement(sql);
  59. pstmt.setString(1,msg);
  60. intn=pstmt.executeUpdate();
  61. if(n>0){
  62. true;
  63. else{
  64. false;
  65. false;
  66. pstmt.close();
  67. conn.close();
  68. }

最后贴一个web.xml:


copy
    <?xmlversion="1.0"encoding="UTF-8"?>
  1. web-appversion="2.5"
  2. xmlns="http://java.sun.com/xml/ns/javaee"
  3. xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  4. xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
  5. 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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
    相关内容
      推荐文章
        站长推荐
        热点阅读

          【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

          建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果

          Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同