1、Autocomplete獲取后臺數據

首先引入css和js文件，以及對應的HTML代碼如下：

<link href="../css/jquery-ui.css" rel="stylesheet" /> <script type="text/javascript" src="../js/jquery-1.9.1.min.js" ></script> <script type="text/javascript" src="../js/jquery-ui.js" ></script><label for="language">搜索：</lable> <input id="language" name="language" type="text">

對應的js代碼如下：

//直接請求后端返回json數據，然后顯示出來$("#language").autocomplete({source: "/Autocomplete.html"});

對應的后臺java代碼：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doPost(request, response);}protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//前端發送的參數String param= request.getParameter("term");response.setHeader("Access-Control-Allow-Origin", "*");response.setHeader("Access-Control-Allow-Methods", "*");response.setHeader("Access-Control-Allow-Headers", "x-requested-with,content-type"); response.setCharacterEncoding("utf-8");response.setContentType("text/html;charset=utf-8");List<String > namelist=new ArrayList<>();namelist.add("a");namelist.add("b");namelist.add("c");namelist.add("d");String[] arr={"Chinese", "English", "Spanish", "Russian", "French", "Japanese", "Korean", "German"};//將數組或者集合對象轉換成json返回到前端PrintWriter printWriter=response.getWriter();printWriter.print(JSONArray.toJSON(arr));printWriter.flush();}

當你在輸入框中輸入字符時，會默認發生get請求并把字符當做參數傳到后端。此時我們可以根據傳來的參數過濾所需的數據返回到前端顯示，如：當輸入c時會發生如下請求到服務器

返回的數據如下：

然后在輸入框中顯示，因為這里沒有進行過濾，所以會把全部數據返回到前端

?

?2、Autocomplete通過方法來獲取數據

HTML和后臺代碼不變,對應的js代碼如下：

$("#language").autocomplete({// 通過函數來獲取并處理數據源source: function(request, response){// request對象只有一個term屬性，對應用戶輸入的文本// response是一個函數，在你自行處理并獲取數據后，將JSON數據交給該函數處理，以便于autocomplete根據數據顯示列表 $.ajax({type: "POST",url: "/Autocomplete.html",data : {"term" : request.term},success: function(result){//將json轉為字符串//response(JSON.stringify(result)); //將字符串轉為json response(JSON.parse(result));},error: function(HttpRequest){}})}});

此時通過ajax發送請求到后端，然后將返回的結果轉換成json通過response(JSON.parse(result));將數據顯示出來。通過?request.term獲取輸入框的參數傳遞到后端。對應的效果與第一種相同。

?

轉載于:https://www.cnblogs.com/zhangjinru123/p/7231616.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的JQuery UI之Autocomplete(2)后端获取数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。