如何在jsp中使用ajax制作jquery自动完成ui答案

【问题标题】：how to make jquery autocomplete ui using ajax in jsp如何在jsp中使用ajax制作jquery自动完成ui
【发布时间】：2018-07-23 22:32:10
【问题描述】：

我的问题是 jQuery UI AutoComplete 在我的 JSP 中无法使用 AJAX。我找到了很多指南，但我找不到解决问题的方法。

在这种情况下我能做什么？

<%-- 
    Document   : Auto
    Created on : Feb 13, 2018, 4:24:31 PM
    Author     : Lenovo
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <link rel="stylesheet" href="/resources/demos/style.css">
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <title>JSP Page</title>
    </head>
    <body>


        <div class="ui-widget">
            <input type="text" id="auto"/>  
        </div>


        <script type="text/javascript">
           $(function()
           {
            $('#auto').autocomplete(
            {
            source:function(request,response)
            {
            //Fetch data
            $.ajax({
                url:"Fetch.jsp",
                method:"post",
                dataType:'json',
                data:{search:request.term},
                success:function(data)
                {
                    response(data.name);
                }
            });
            }
            });   
           }); 
        </script>

    </body>
</html>

这是我的 Fetch.jsp 文件：

<%@page import="org.json.JSONArray"%>
<%@page import="org.json.JSONObject"%>
<%@ page contentType="text/html; charset=iso-8859-1" language="java"%>
<%@page language="java" %>
<%@page import="java.sql.*" %>
<%
    try
    {
        String query = (String)request.getParameter("search");

        JSONObject json=new JSONObject();


        Class.forName("com.mysql.jdbc.Driver");
        Connection con=DriverManager.getConnection("jdbc:mysql://localhost:3306/sample","root","root");
        Statement st=con.createStatement();
        ResultSet rs;

        rs=st.executeQuery("select name from user2 where name like '"+query+"%'");
       while(rs.next())
       {
         json.put("name",rs.getString("name"));
         out.print(json.toString());   
       }

      }
      catch(Exception e1)
      {
      out.println(e1);
      }
%>

【问题讨论】：

标签： javascript jquery ajax jsp jquery-ui

【解决方案1】：

Fetch.jsp 应该打印一个 json 数组，而不是一个对象。您实际上不是在打印有效的 json，而是按顺序打印 json 对象。您应该打印从数据库中获得的字符串数组。

变化：

JSONObject json=new JSONObject();

到

JSONArray json=new JSONArray();

还有变化

while(rs.next())
{
     json.put("name",rs.getString("name"));
     out.print(json.toString());   
}

到

while(rs.next())
{
     json.put(rs.getString("name"));
}
out.print(json.toString());

最后在你的 js 中：

success:function(data)
{
    response(data);
}

来自文档：

response 回调，它需要一个参数：向用户建议的数据。应根据提供的术语过滤此数据...在提供自定义源回调时，处理请求期间的错误很重要。即使遇到错误，您也必须始终调用响应回调。这可确保小部件始终具有正确的状态。

参考文献

Jquery UI Autocomplete API source: array, string or callback

【讨论】：