Java Web 技术(JSP 和 servlet)中的 AJAX 自动完成文本框

Posted

技术标签:

【中文标题】Java Web 技术(JSP 和 servlet)中的 AJAX 自动完成文本框【英文标题】:AJAX autocomplete textbox in Java web technology (JSP and servlets) 【发布时间】:2013-10-19 19:00:24 【问题描述】:

关于如何使用 Java Web 技术(JSP、servlet 和 AJAX)使 html 输入文本元素像“Google 的 AJAX 搜索引擎”输入文本元素一样工作,我需要您的帮助。下拉列表中的数据将来自数据库表,例如 mysql 或 Microsoft SQL 数据库。

我研究了 NetBeans 教程,但该教程无法从下拉列表中选择一个值以显示在 HTML 输入文本元素中。这是link。

谢谢。

【问题讨论】:

你检查过这个link吗?您需要做的就是将您的数据库值作为一个列表并将其存储在该变量中。希望你能做到.. 来自 google 我能够很快找到一些教程 - 这是一个“实时搜索示例”blog.ninetofive.me/blog/… @Vinoth Kristnan...您的想法简单明了。假设我将 db 值检索到 servlet 中的数组中,我如何在 javascript 中使用该数组。谢谢。 @乔。谢谢。我正在尝试研究该链接中的 php 代码,看看是否可以使用 jsp 和 java servlet 实现相同的概念。 【参考方案1】:

Autocomplete-Java 中的 Jquery Ajax Json 示例(使用 Servlet)

这里使用 devbridge jquery api 来实现自动完成功能。 要求: Eclipse Mysql(或者你可以使用任何其他数据库,但在 lib 文件夹中你必须添加适当的驱动程序 对于该数据库) 获取国家/地区列表 对于 MySQL https://github.com/bharathirasa/demo/blob/master/mysql-country-list-codes.sql

对于甲骨文 https://github.com/bharathirasa/demo/blob/master/oracle-country-list.sql

HTML 代码 <input type="text" name="country" id="autocomplete" class="form-control" placeholder="Enter Country name" />

Jquery 代码

     $("#autocomplete").autocomplete(
                              //lookup: countries,
                              serviceUrl:'Auto', //tell the script where to send requests
                               width: 450, //set width
//callback just to show it's working
                              onSelect: function (suggestion) 
                              $('#selection').html('You selected: ' + suggestion.value + ', ' + suggestion.data);
                              ,
                              showNoSuggestionNotice: true,
                              noSuggestionNotice: 'Sorry, no matching results',
               );

Servlet 代码

                                     String q=request.getParameter("query");
                                     ArrayList<Country> o=CountryDao.getCountryName(q);
                                     Gson gson = new Gson();
                                     // convert java object to JSON format,
                                     // and returned as JSON formatted string
                                     String json = gson.toJson(o);
                                     //System.out.println(json);
                                     response.getWriter().write("\"suggestions\":"+json+"");

这里没有提到方法,所以所有的数据都将作为 GET 方法传递。如果您想通过 Jquery 中的帖子提及来传递数据,例如 type:'POST'。 嗨,实际上我使用 devbridge jquery api 在 java 中创建了一个自动完成功能

点击链接获取更多信息

http://pdfboxtutorial.blogspot.com/2015/03/autocomplete-jquery-ajax-json-example.html

【讨论】:

根据您的评论,我在@S.L.Barth 此处发布了代码【参考方案2】:

@user2870719 您可以尝试如下操作,在您的 jsp 页面中向 servlet/jsp 发送 ajax 请求,并将响应数据填充到 javascript 变量中。所以你可以得到我上面提到的jQuery自动完成文本框。

<%@page import="java.sql.*"%>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
 </script>
<script type="text/javascript">
function showData(value) 
$.ajax(
    url : "ur_servlet?name="+value,
    type : "POST",
    async : false,
    success : function(data) 
//Do something with the data here
    
);

</script>
</head>
<body>
<form name="employee">
<input type="text" name="name" id="name" onkeyup="showData(this.value);"><br>


</table>
</body>
</html>

在 servlet 中,

String name = request.getParameter("name");
String buffer="";  
try
   Class.forName("com.mysql.jdbc.Driver");
   Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/test","root", "root");
   Statement st=con.createStatement();
   ResultSet rs=st.executeQuery("select * from data where name like '"+name+"%'");
    while(rs.next())
    
    buffer=buffer+"'"+rs.getString("name")+"',";
    
response.getWriter().println(buffer);

 catch (Exception e) 
    e.printStackTrace();
 

最后将响应发送到jsp页面。让我知道这是否有帮助..

【讨论】:

这个link可能对你也有用。 附带说明:在request.getParameter("name").toString() 中调用toString() 是没有意义的,因为ServletRequest#getParameter(String) 已经返回字符串 @Vinoth Kristnan ....感谢您的链接...但我打算做很多 ajax 下拉列表,这意味着我将拥有如此多的 jsp 页面...这可能会导致代码维护问题。 ..感谢您的链接 @VinothKrishnan 仍在研究您在此处粘贴的代码...谢谢 @user2870719 很高兴您从帖子中获得了一些想法。这是一种实现方式。您需要找到解决问题的最佳方法。

以上是关于Java Web 技术(JSP 和 servlet)中的 AJAX 自动完成文本框的主要内容,如果未能解决你的问题,请参考以下文章

Java面试之Java Web

Java面试之Java Web

java web开发入门一(servlet和jsp)基于eclispe

Java Web-----JSP与Servlet

关于Javaweb的问题,Jsp和Servlet各自的应用场景?

java web 九大内置对象和四个作用域之间的关系是啥?