JQueryオートコンプリートで動作するASPレスポンスが得られません

これは私をナットにしています。私はすでにこの2日間、多くのWebページをブラウズして解決しようとしました。JQueryオートコンプリートで動作するASPレスポンスが得られません

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>

さて、私は（私のウェブサーバから元のHTMLでも使用されているファイルへのクロスドメイン、）jquery.comのsearch.phpにURLを設定するとき
SQLからデータを読み込んでいるローカルのASPファイルで試してみると、ブラウザでファイルを直接呼び出すと有効なJSONデータが返されますが...ハードコードされたJSONデータのあるResponse.Writeだけを処理するようにASPファイルを変更しました。
私もResponse.ContentType = "application/json"でそれを試してみましたが、これは
のいずれかを助けなかったそれから私はもう一度だけ、再びhttps://softd4u.ch/search.phpにいくつかのハードコーディングされたJSONデータのechoを行い、これを呼び出すしようとしましたが、自分の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'をキャッチオールとして含めようとしましたか？ Ref [jqXHRオブジェクト]（http://api.jquery.com/jQuery.ajax/#jqXHR）。 – Lankymart

ASPまたはPHP要素は単なるサーバーサイドスクリプトです。 jQuery UI Autocompleteは、定義された 'url'に' GET'を介して 'term 'を送ります。したがって、ASPだけでなくPHPでもうまく動作します。あなたの投稿を編集し、あなたのASPコードを含めてください。それで、スクリプトが送信されたテキストと、AJAX呼び出しに返されているデータについて知ることができます。 – Twisty

これはやっと私のために働いた。検索フィールドと

フォーム：

<!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応答データ型を使用して： '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%>を指定していなかったため、私が元々持っていた問題のいくつかがあったかもしれません。だから私はいつも似たような検索用語を使っていたので、キャッシュされた応答を受け取ったかもしれません。私は、ASPファイル内Response.Writeと一緒Server.HTMLEncodeを使用しようとしたとき、私は主に文字変換の問題でstruggelingた終わり

、私はウムラウトを含むドイツ語の表現を使用していますので、などそれは私のために動作しませんでした。最終的に助けになったのは、Response.CharSet = "ISO-8859-1"という行でした。

文字の2番目の問題は、検索フィールドにUmlauteと入力したときです。明らかにdata: { term: request.term }は自動的にencodeURIのように見えますが、それはASPファイルによって再度正しくデコードされません。文字 'ä'は％C3％A4としてエンコードされています。代わりにdata: 'term=' + escape(request.term)を使用すると、エンコードが正しく行われます（ 'ä'は％E4になります）。エスケープ（）は廃止されましたが、もう一度、encodeURIは私のためには機能しません。

出典

2017-03-30 09:08:59

あなたの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文字以上入力すると、同じサーバー上のfindbirds.aspに、index.htmlと同じ場所にGETリクエストが送信されます。この購入をエミュレートしてfindbirds.asp?term=whiteに移動すると、ASPスクリプトが返すものを確認できます。あなたのASPコードでは、この行：

search = Request.QueryString("term")

は "白"で表示されます。例の鳥のデータを使用して、これが生じるはずである：

[{ 
    "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

サポートとサンプルについてもう一度感謝します... 私にはまだ答えられていない1つのことは、私はajaxを使用するか、直接aspファイルを呼び出した場合の違い...上のコードは直接呼び出す、jsfiddle.netの例ではajaxを使用している –

それは少し違いがあります。 Ajaxを使用する場合は、送信されるデータとその方法をより詳細に制御できます。 – Twisty

JQueryオートコンプリートで動作するASPレスポンスが得られません

答えて

関連する問題