如何在jsp中使用ajax制作jquery自动完成ui
Posted
技术标签:
【中文标题】如何在jsp中使用ajax制作jquery自动完成ui【英文标题】：how to make jquery autocomplete ui using ajax in jsp 【发布时间】：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);
%>
【问题讨论】：
【参考方案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【讨论】：
以上是关于如何在jsp中使用ajax制作jquery自动完成ui的主要内容，如果未能解决你的问题，请参考以下文章
如何在 JQuery UI 自动完成中使用 source:function()... 和 AJAX
如何在使用 Jquery Autocomplete 和 JSP 时设置自动完成输入框的值
如何在带有 ADO.NET 的 ASP.NET Core MVC 中使用 jQuery Ajax 自动完成