没有得到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一起工作

回答

相关问题