未获得 ASP 响应以使用 JQuery 自动完成

Question

这让我抓狂。我已经尝试解决这两天已经浏览了很多网页。

我想像 http://jqueryui.com/resources/demos/autocomplete/remote-jsonp.html 中的示例一样使用 jquery-ui 自动完成功能，但我需要调用而不是调用 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 设置为 jquery.com 的 search.php 时（跨域，从我的网络服务器到原始 [=63= 也使用的文件） ]) 它工作起来有点慢，但是很好
当我尝试使用从 SQL 读取数据的本地 ASP 文件时，它不起作用，尽管当我直接在浏览器中调用该文件时，它 returns 有效JSON 数据...我什至更改了 ASP 文件，只做一个 Response.Write 硬编码 JSON 数据
我也用 Response.ContentType = "application/json" 试过了，但这也没有用
然后我加载了一个自己的 search.php 文件，该文件再次仅对 https://softd4u.ch/search.php 的一些硬编码 JSON 数据执行 echo 并尝试调用它，但再次没有成功

我在 Internet 上找到了几个示例，其中 ASP 文件将作为源参数直接输入（通常是较旧的帖子）。我想这可能有效，但我认为通过 AJAX.

调用文件是有意义的

尝试调试 jquery-1.12.4.js 我至少发现有一个 'parseerror' 在某一时刻返回，但我不知道为什么以及我应该做些什么不同。在 function ajaxHandleResponses( s, jqXHR, responses ) 变量响应在它起作用的情况下是未定义的，但在它不起作用的情况下有内容。

我确定这些文件确实被调用了（检查日志等），但它们从未触发 AJAX 调用的成功函数。

有人知道我在这里遗漏了什么吗？

经典 asp 文件的来源 - 版本 1（数据库连接等在 inc 文件中处理）：

<!-- #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("]")

%>

经典 asp 文件的来源 - 版本 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""}]")
%>

Answer 1

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

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

当输入 2 个或更多字符时，GET 请求将发送到与 index.html 在同一服务器上的同一位置的 findbirds.asp。您可以模拟此购买导航至 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 代码，因此它不完全相同，但它的功能与您的代码应有的相同。

Answer 2

所以，这终于对我有用了。

带有搜索字段的表单：

<!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'

 <%@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 - 使用数据类型时相同的经典 ASP 响应：'jsonp'

<%@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%>。所以，我可能收到了缓存的响应，因为我总是使用类似的搜索词。

最后我主要是在为字符翻译问题苦苦挣扎，因为我使用的是德语表达方式，包括 Umlaute 等。当我尝试在 ASP 文件中使用 Server.HTMLEncode 和 Response.Write 时，它对我不起作用。最终帮助的是 Response.CharSet = "ISO-8859-1".

行

字符的第二个问题是，当我在搜索字段中键入元音变音时。显然 data: { term: request.term } 似乎会自动对术语进行 encodeURI，然后 ASP 文件无法再次对其进行正确解码。例如，字符 'ä' 被编码为 %C3%A4。当我改为使用 data: 'term=' + escape(request.term) 时，编码是正确的（'ä' 变为 %E4）。我知道，escape() 已被弃用，但同样，encodeURI 对我不起作用。

未获得 ASP 响应以使用 JQuery 自动完成

Not getting the ASP response to work with JQuery AutoComplete

ajax

jquery

jquery-ui

autocomplete

asp-classic