栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

带有servlet的jQuery自动完成UI不返回任何数据

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

带有servlet的jQuery自动完成UI不返回任何数据

servlet的 应该返回自动完成数据作为JSON。有几个选项,我选择了一个包含带有标签/值属性的对象的数组:

@WebServlet("/autocomplete/*")public class AutoCompleteServlet extends HttpServlet {    @Override    protected void doPost(final HttpServletRequest request, final HttpServletResponse response) throws ServletException, IOException {        final List<String> countryList = new ArrayList<String>();        countryList.add("USA");        countryList.add("Pakistan");        countryList.add("Britain");        countryList.add("India");        countryList.add("Italy");        countryList.add("Ireland");        countryList.add("Bangladesh");        countryList.add("Brazil");        countryList.add("United Arab Emirates");        Collections.sort(countryList);        // Map real data into JSON        response.setContentType("application/json");        final String param = request.getParameter("term");        final List<AutoCompleteData> result = new ArrayList<AutoCompleteData>();        for (final String country : countryList) { if (country.toLowerCase().startsWith(param.toLowerCase())) {     result.add(new AutoCompleteData(country, country)); }        }        response.getWriter().write(new Gson().toJson(result));    }}

要返回自动完成数据,可以使用以下帮助程序类:

class AutoCompleteData {    private final String label;    private final String value;    public AutoCompleteData(String _label, String _value) {        super();        this.label = _label;        this.value = _value;    }    public final String getLabel() {        return this.label;    }    public final String getValue() {        return this.value;    }}

因此在servlet中,实际数据被映射为适合jQuery自动完成的形式。我选择了Google GSON将结果序列化为JSON。

有关:

  • 使用AJAX源代码和appendTo了解并实现Jquery自动完成功能

对于 HTML文档 (在.jsp中实现),请选择正确的库,样式表和样式:

<html>    <head>        <script type="text/javascript" src="http://pre.jquery.com/jquery-1.10.2.js"> </script>        <script type="text/javascript" src="http://pre.jquery.com/ui/1.10.3/jquery-ui.js"> </script>        <link rel="stylesheet" href="http://pre.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />        <script type="text/javascript" src="autoComplete.js"> </script>    </head>    <body>        <form> <div >     <label for="country">Country: </label>     <input id="country" /> </div>        </form>    </body></html>

相关:jQuery自动完成演示


我把 Javascript函数 放在一个单独的文件中

autoComplete.js

$(document).ready(function() {    $(function() {        $("#country").autocomplete({ source: function(request, response) {     $.ajax({         url: "/your_webapp_context_here/autocomplete/",         type: "POST",         data: { term: request.term },         dataType: "json",         success: function(data) {  response(data);         }    });    }});    });});

自动完成功能使用AJAX请求来调用servlet。由于servlet是合适的,因此它可以原样用于响应。

有关:

  • jQuery自动完成小部件
  • jQuery ajax函数


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/463540.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号