沒有得到ASP響應與JQuery AutoComplete一起工作

這讓我感到非常緊張。我試着解決這兩天已經瀏覽了很多網頁。沒有得到ASP響應與JQuery AutoComplete一起工作

我想使用jquery-ui自動完成功能，正如http://jqueryui.com/resources/demos/autocomplete/remote-jsonp.html中的示例一樣，但不是調用search.php，而是需要調用ASP文件（Microsoft IIS環境）。因此，我創建了上述HTML文件的本地副本，並僅調整了URL。

$(function() { 
 
    function log(message) { 
 
    $("<div>").text(message).prependTo("#log"); 
 
    $("#log").scrollTop(0); 
 
    } 
 

 
    $("#birds").autocomplete({ 
 
    source: function(request, response) { 
 
     $.ajax({ 
 
     url: "http://jqueryui.com/resources/demos/autocomplete/search.php", 
 
     dataType: "jsonp", 
 
     data: { 
 
      term: request.term 
 
     }, 
 
     success: function(data) { 
 
      response(data); 
 
     } 
 
     }); 
 
    }, 
 
    minLength: 2, 
 
    select: function(event, ui) { 
 
     log("Selected: " + ui.item.value + " aka " + ui.item.id); 
 
    } 
 
    }); 
 
});

.ui-autocomplete-loading { 
 
    background: white url("http://jqueryui.com/resources/demos/autocomplete/images/ui-anim_basic_16x16.gif") right center no-repeat; 
 
}

<meta charset="utf-8"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<title>jQuery UI Autocomplete - Remote JSONP datasource</title> 
 
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
<link rel="stylesheet" href="http://jqueryui.com/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> 
 

 
<body> 
 

 
    <div class="ui-widget"> 
 
    <label for="birds">Birds: </label> 
 
    <input id="birds"> 
 
    </div> 
 

 
    <div class="ui-widget" style="margin-top:2em; font-family:Arial"> 
 
    Result: 
 
    <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div> 
 
    </div> 
 

 

 
</body>

現在，當我設置的URL的search.php中jquery.com（跨域，從我的Web服務器的文件，該文件也被原來的HTML）它工作有點慢，但很好
當我嘗試用我的本地ASP文件從SQL中讀取數據時，它不起作用，儘管當我直接在瀏覽器中調用該文件時，它將返回有效的JSON數據... I甚至改變了ASP文件，只做了一個Response.Write和硬編碼的JSON數據
我也Response.ContentType = "application/json"試了一下，但這並沒有幫助
然後我裝一個自己的search.php文件，該文件也只做一些硬編碼的JSON數據echo到https://softd4u.ch/search.php並試圖調用此方法，但同樣沒有成功

我在互聯網上發現了幾個樣本，ASP文件將直接作爲源參數（通常是較舊的帖子）輸入。我想這可能會起作用，但我認爲通過AJAX調用該文件是有道理的。

試圖調試jquery-1.12.4.js我至少發現有一個'parseerror'在某一點返回，但我不知道爲什麼和我應該做什麼不同。在function ajaxHandleResponses(s, jqXHR, responses)變量響應是不確定的，但它有效的情況下，但它沒有工作時的情況下。

我確定文件實際上被調用（檢查日誌等），但他們從未觸發AJAX調用的成功功能。

有沒有人有一個想法，我在這裏失蹤？經典asp文件的

源 - 版本1（DB連接等在INC文件處理）：傳統的ASP文件的

<!-- #INCLUDE FILE="includes/general.inc" --> 

<% 
Dim errortextInternal, rs, search, sql 
Dim coma 

search = Request.QueryString("term") 
sql = "SELECT TOP 20 itmId, itmNo, itmDescr1, itmDescr2, itmInact, CASE WHEN itsuSupId1 IS NULL THEN '' ELSE itsuSupId1 END AS SupId1, " & _ 
     "CASE WHEN itsuSupId2 IS NULL THEN '' ELSE itsuSupId2 END AS SupId2, " & _ 
     "CASE WHEN itsuSupId3 IS NULL THEN '' ELSE itsuSupId3 END AS SupId3 " & _ 
     "FROM Items LEFT JOIN ItemsSuppl ON itmId = itsuItmId WHERE " 
sql = sql & " (itmNo LIKE '%" & search & "%' OR itmDescr1 LIKE '%" & search & "%' OR itmDescr2 LIKE '%" & search & "%' OR EXISTS " & _ 
      "(SELECT * FROM ItemsSuppl AS sub WHERE sub.itsuItmId = itmId AND (itsuSupId1 LIKE '%" & search & "%' OR itsuSupId2 LIKE '%" & search & "%' OR itsuSupId3 LIKE '%" & search & "%'))) ORDER BY itmNo, itmDescr1 " 

'Response.ContentType = "application/json" 
Response.Write("[") 
coma = "" 

Success = SelectDbRecords(errortextInternal, rs, sql) 

If Success Then 

    Do While Not rs.EOF 
     Response.Write(coma & "{""id"":""" & rs("itmId") & """,""label"":""" & Server.HTMLEncode(rs("itmNo") & " - " & Trim(Trim(rs("itmDescr1")) & " " & Trim(rs("itmDescr2")))) & """,""value"":""" & Server.HTMLEncode(rs("itmNo") & " - " & Trim(Trim(rs("itmDescr1")) & " " & Trim(rs("itmDescr2")))) & """}") 
     If coma = "" Then 
      coma = "," 
     End If 
     rs.MoveNext 
    Loop 
    rs.ActiveConnection.Close 

Else 
    Response.Write("Fehler!") 
End If 

Response.Write("]") 

%>

源 - 版本2（用於測試目的的硬編碼響應;無需檢索查詢字符串）：

<%@LANGUAGE="VBSCRIPT"%> 
<% 
Response.Write("[{""id"":""Nycticorax nycticorax"",""label"":""Black-crowned Night Heron"",""value"":""Black-crowned Night Heron""},{""id"":""Ardea purpurea"",""label"":""Purple Heron"",""value"":""Purple Heron""},{""id"":""Tetrao tetrix"",""label"":""Black Grouse"",""value"":""Black Grouse""},{""id"":""Caprimulgus europaeus"",""label"":""European Nightjar"",""value"":""European Nightjar""},{""id"":""Picus viridis"",""label"":""European Green Woodpecker"",""value"":""European Green Woodpecker""},{""id"":""Saxicola rubicola"",""label"":""European Stonechat"",""value"":""European Stonechat""},{""id"":""Luscinia svecica"",""label"":""Bluethroat"",""value"":""Bluethroat""},{""id"":""Ardea cinerea"",""label"":""Grey Heron"",""value"":""Grey Heron""},{""id"":""Corvus cornix"",""label"":""Hooded Crow"",""value"":""Hooded Crow""},{""id"":""Sylvia curruca"",""label"":""Lesser Whitethroat"",""value"":""Lesser Whitethroat""},{""id"":""Pluvialis apricaria"",""label"":""European Golden Plover"",""value"":""European Golden Plover""},{""id"":""Sylvia communis"",""label"":""Common Whitethroat"",""value"":""Common Whitethroat""}]") 
%>

來源

2017-03-17 Stefan Müller

我建議把jquery ui autosuggest換成更輕的解決方案，你可以自己調整。如果你喜歡，我可以發佈一個包含樣本的答案。 –

該示例使用[JSONP]（http://stackoverflow.com/a/3840118/692942），你確定這是你想要做的嗎？如果是這樣，這裏是如何發送回調 - [使用CLASSIC ASP將數據返回給jsonp調用]（http://stackoverflow.com/a/33498470/692942）。可能是目前JQuery沒有從你的頁面得到正確的響應，所以永遠不會觸及'success'處理程序，你是否嘗試過包括一個'fail'處理程序，甚至是'done'作爲一個catch-all？ Ref [The jqXHR Object]（http://api.jquery.com/jQuery.ajax/#jqXHR）。 – Lankymart

ASP或PHP元素只是一個服務器端腳本。 jQuery UI自動完成將通過'GET'發送一個'term'到定義的'url'。所以它和ASP以及PHP一起工作良好。請編輯您的帖子幷包含您的ASP代碼，以便我們瞭解腳本對發送給它的文本的處理方式，以及它返回給您的AJAX呼叫的數據。 – Twisty

所以，這終於爲我工作。使用數據類型時，同樣經典的ASP響應 - 'JSON'

<%@LANGUAGE="VBSCRIPT"%> 
<%response.Expires=-1%> 

<!-- #INCLUDE FILE="includes/global.inc" --> 

<% 
Dim errortextInternal, rs, con, search, sql 
Dim coma, retVal, label 

Set con = Server.CreateObject("ADODB.Connection") 
Set rs = Server.CreateObject("ADODB.Recordset") 

con.Open odbcname 

search = Request.QueryString("term") 
sql = "SELECT TOP 20 itmId, itmNo, itmDescr1, itmDescr2, itmInact, CASE WHEN itsuSupId1 IS NULL THEN '' ELSE itsuSupId1 END AS SupId1, " & _ 
     "CASE WHEN itsuSupId2 IS NULL THEN '' ELSE itsuSupId2 END AS SupId2, " & _ 
     "CASE WHEN itsuSupId3 IS NULL THEN '' ELSE itsuSupId3 END AS SupId3 " & _ 
     "FROM Items LEFT JOIN ItemsSuppl ON itmId = itsuItmId WHERE " 
sql = sql & " (itmNo LIKE '%" & search & "%' OR itmDescr1 LIKE '%" & search & "%' OR itmDescr2 LIKE '%" & search & "%' OR EXISTS " & _ 
      "(SELECT * FROM ItemsSuppl AS sub WHERE sub.itsuItmId = itmId AND (itsuSupId1 LIKE '%" & search & "%' OR itsuSupId2 LIKE '%" & search & "%' OR itsuSupId3 LIKE '%" & search & "%'))) ORDER BY itmNo, itmDescr1 " 

Response.CharSet = "ISO-8859-1" 
Response.Write("[") 
coma = "" 
retVal = "" 

rs.Open sql, con, 3, 3 

Do While Not rs.EOF 
    label = rs("itmNo") & " - " & Trim(Trim(rs("itmDescr1")) & " " & Trim(rs("itmDescr2"))) 
    retVal = retVal & coma & "{""id"":""" & rs("itmId") & """,""label"":""" & label & """,""value"":""" & label & """}" 
    If coma = "" Then 
     coma = "," 
    End If 
    rs.MoveNext 
Loop 

Response.Write(retVal) 
Response.Write("]") 

%>

itemSearchAj2.asp - ：

形式搜索領域

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>jQuery UI Autocomplete - Remote JSONP datasource</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
    <style> 
    .ui-autocomplete-loading { 
     background: white url("https://jqueryui.com/resources/demos/autocomplete/images/ui-anim_basic_16x16.gif") right center no-repeat; 
    } 
    </style> 
    <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> 
    <script> 
    $(function() { 
     function log(message) { 
      $("<div>").text(message).prependTo("#log"); 
      $("#log").scrollTop(0); 
     } 
     $("#article").autocomplete({ 
      source: function(request, response) { 
       $.ajax({ 
        url: "itemSearchAj2.asp", 
        dataType: "json", 
        data: 'term=' + escape(request.term), 
        success: function(data) { 
         console.log("Data: ", data) 
         response(data); 
        } 
       }); 
      }, 
      minLength: 2, 
      select: function(event, ui) { 
       log("Selected: " + ui.item.value + " aka " + ui.item.id); 
      } 
     }); 
    }); 
    </script> 
</head> 
<body> 

<div class="ui-widget"> 
    <label for="article">Article: </label> 
    <input id="article"> 
</div> 

<div class="ui-widget" style="margin-top:2em; font-family:Arial"> 
    Result: 
    <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div> 
</div> 

</body> 
</html>

itemSearchAj2.asp經典的ASP響應使用的數據類型時： 'JSON p'

<%@LANGUAGE="VBSCRIPT"%> 
<%response.Expires=-1%> 

<!-- #INCLUDE FILE="includes/global.inc" --> 

<% 
Dim errortextInternal, rs, con, search, sql 
Dim coma, retVal, label 

Set con = Server.CreateObject("ADODB.Connection") 
Set rs = Server.CreateObject("ADODB.Recordset") 

con.Open odbcname 

search = Request.QueryString("term") 
sql = "SELECT TOP 20 itmId, itmNo, itmDescr1, itmDescr2, itmInact, CASE WHEN itsuSupId1 IS NULL THEN '' ELSE itsuSupId1 END AS SupId1, " & _ 
     "CASE WHEN itsuSupId2 IS NULL THEN '' ELSE itsuSupId2 END AS SupId2, " & _ 
     "CASE WHEN itsuSupId3 IS NULL THEN '' ELSE itsuSupId3 END AS SupId3 " & _ 
     "FROM Items LEFT JOIN ItemsSuppl ON itmId = itsuItmId WHERE " 
sql = sql & " (itmNo LIKE '%" & search & "%' OR itmDescr1 LIKE '%" & search & "%' OR itmDescr2 LIKE '%" & search & "%' OR EXISTS " & _ 
      "(SELECT * FROM ItemsSuppl AS sub WHERE sub.itsuItmId = itmId AND (itsuSupId1 LIKE '%" & search & "%' OR itsuSupId2 LIKE '%" & search & "%' OR itsuSupId3 LIKE '%" & search & "%'))) ORDER BY itmNo, itmDescr1 " 

Response.CharSet = "ISO-8859-1" 
Response.ContentType = "application/javascript" 
Response.Write(Request.QueryString("callback") & "([") 
coma = "" 
retVal = "" 

rs.Open sql, con, 3, 3 

Do While Not rs.EOF 
    label = rs("itmNo") & " - " & Trim(Trim(rs("itmDescr1")) & " " & Trim(rs("itmDescr2"))) 
    retVal = retVal & coma & "{""id"":""" & rs("itmId") & """,""label"":""" & label & """,""value"":""" & label & """}" 
    If coma = "" Then 
     coma = "," 
    End If 
    rs.MoveNext 
Loop 

Response.Write(retVal) 
Response.Write("])") 

%>

我原來的一些問題也可能是因爲我沒有在開始時在ASP文件中指定<%response.Expires=-1%>。所以，我可能會收到緩存的回覆，因爲我總是使用類似的搜索條件。

最後我主要是用struggeling字符翻譯的問題，因爲我用德語表達，包括Umlaute等它沒有爲我工作，當我試圖使用Server.HTMLEncode在ASP文件Response.Write在一起。終於在那裏得到了幫助的線路是Response.CharSet = "ISO-8859-1"。

字符的第二個問題是，當我在搜索字段中輸入Umlaute時。顯然data: { term: request.term }似乎自動encodeURI的術語，然後再由ASP文件再次正確解碼。字符'ä'例如編碼爲％C3％A4。當我改用data: 'term=' + escape(request.term)時，編碼是正確的（'ä'變成％E4）。我知道，escape（）已被棄用，但encodeURI再次不適用於我。

來源

2017-03-30 09:08:59

如果你的ASP被調用，findbirds.aps，例如，可以使用下面的JavaScript代碼在index.html：

$("#birds").autocomplete({ 
    source: "findbirds.asp", 
    minLength: 2, 
    select: function(event, ui) { 
     log("Selected: " + ui.item.value + " aka " + ui.item.id); 
    } 
    });

當輸入2個或更多字符時，GET請求將被髮送到findbirds.asp在同一個服務器上，位置與index.html相同。您可以模擬此購買導航到findbirds.asp?term=white，您可以看到ASP腳本將發回。在你的ASP代碼中，這行代碼如下：

search = Request.QueryString("term")

現在應該用「white」填充search。使用示例鳥數據，這將導致：

[{ 
    "id":"Sylvia curruca", 
    "label":"Lesser Whitethroat", 
    "value":"Lesser Whitethroat" 
},{ 
    "id":"Sylvia communis", 
    "label":"Common Whitethroat", 
    "value":"Common Whitethroat" 
}]

這裏你可以看到一個類似的例子：https://jsfiddle.net/Twisty/99427m8d/

這個例子並不能訪問你的ASP代碼，所以它不是完全一樣的，但它的功能與代碼應該一樣。

來源

2017-03-21 00:00:16 Twisty

再次感謝你的支持和例子... 有一件事情對我來說仍然沒有回答，不管它是否使任何不同的是，如果我使用ajax或直接調用asp文件...上面的代碼直接調用它，jsfiddle.net中的示例使用ajax –

它沒什麼區別，不同的是，如果直接調用它，它使用GET如果使用Ajax，則可以更好地控制發送的數據和方式。 – Twisty

沒有得到ASP響應與JQuery AutoComplete一起工作

回答

相關問題