ajaxのurlを変数にしたい

Question

AjaxでURLを指定する際に、そのURLを変数にしたいのですが、うまくいかず悩んでいます。

テキストに入力した値を使用してＵＲＬを組み立てたいのですが、
autocompleteメソッドの中で、変数を設定する方法がわかりませんでした。

以下のように、URLを固定で設定した場合は、動作確認できました。

<script type="text/javascript">
    $(function () {

        var pUrl = '/api/aaaaa/ABCDE';

        $('#txtKeywd').autocomplete({
            source: pUrl,
            type: "GET",
            autoFocus: true,
            delay: 500,
            minLength: 1,
            select: function (e, ui) {
                if (ui.item) {
                    alert(JSON.stringify(ui.item));
                }
            }
        });

テキストボックス　$('#txtKeywd')　で入力されている値を、Ajaxのパラメータであるsourceに渡したいのです。
例えばテキストボックスに'あいうえお'と入力したら、'/api/aaaaa/あいうえお'にしたいです。

以下のようにしてみたのですが、サーバー側に届きませんでした。

        $('#txtKeywd').autocomplete({
            source: '/api/aaaaa/' + $('#txtKeywd').val(),

サーバー側には　'/api/aaaaa'　のコントローラーが待機しています。
'/api/aaaaa/あいうえお'の　あいうえお　の部分をパラメータで受け取るようにしています。

sourceに変数を渡す方法を教えていただきたいです。
よろしくお願いします。

追記：ネットワーク覗きました。

[1]以下の場合　
・source: '/api/aaaaa/abcde'　
・テキスト入力値を hhhhh　にした場合
⇒https://localhost/api/aaaaa/abcde?term=hhhhh

[2]　・source: '/api/aaaaa'　・テキスト入力値を hhhhh　にした場合
https://localhost/api/aaaaa?term=hhhhh

でした。仕様もわからず使ってました・・・m(__)m

追記：実現できました。ありがとうございました。参考までにソースを記載します。

#クライアント側

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- jQuery UI -->
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<script>
        $('#txtKeywd').autocomplete({
            source: '/api/aaaaa',
            autoFocus: true,
            delay: 500,
            minLength: 1,
            select: function (e, ui) {
                if (ui.item) {
                    alert($('#txtKeywd').val());
                    alert(JSON.stringify(ui.item));
                    $('#detail').html(ui.item.detail);
                }
            }
        });
</script>



<input id="txtKeywd" type="search" size="20" maxlengh="50" />
<span id="detail"></span>

#サーバー側

    [Route("api/[controller]")]
    [ApiController]
    public class AaaaaController : ControllerBase
    {
        // GET: api/aaaaa　★こっちで受け取る
        [HttpGet]
        public string Get()
        {
            string aaa = Request.Query["term"];
            Debug.WriteLine(aaa);
            ・・・・・

　　　　　　 //　戻り値はjson文字列
　　　　　　return "[{"label":"LABEL1","value":"VALUE1","detail":"DETAIL1"},{"label":"LABEL2","value":"VALUE2","detail":"DETAIL2"},{"label":"LABEL3","value":"VALUE3","detail":"DETAIL3"}]";
            
        }


        // GET: api/aaaaa/5
        [HttpGet("{abcde}", Name = "Get")]
        public string Get(string abcde)
        {
            Debug.WriteLine(abcde);
            ・・・・・
        }
     }

#ネットワークのなかみ
　　https://localhost/api/aaaaa?term=hhhhh

Answer 1

以下のようにしてみたのですが、サーバー側に届きませんでした。

まずは、どこまでできているのか切り分ける必要があります。ブラウザの開発ツールの「Network」のようなタブを見てみましょう。

• リクエストがそもそも飛んでいない
• リクエストは生成しているけど、意図したものではない
• 意図通りのリクエストをサーバに送信できてはいるけど、応答が正しくない
• サーバは正しく応答しているけど、受け取っての処理がうまくいっていない

どれかによって、やるべきことは変わってきます。

Comments

[maisumakun]

「URLを固定で設定した場合」はアルファベットになっていますが、「テキストボックスに'あいうえお'と入力したら、'/api/aaaaa/あいうえお'にしたいです」というように、入力は日本語になっています。

アルファベットの場合はきちんと通るか確認するのも、必要かもしれません。

[ryu_k]

ありがとうございます。
'/api/aaaaa/あいうえお'　'/api/aaaaa/ccccc'　
どちらでもサーバ―側のコントローラーは　あいうえお　ccccc どちらも取得できました。
固定文字列であれば問題ないと思っています。

Answer 2

「サーバーに届かない」のであれば、あくまでサーバー側の定義や設定、コードの問題ではないでしょうか。
URLといっても単なる文字列です。作りたい文字列が作れているのなら、サーバー側がその情報を受け取るような仕組みになっていないということ。

・・・というか、サーバー側の仕組みにあわせてURL文字列を構成するべきなので、そちらの設定なり定義なりコードなり確認してください。

追記

イベントの発生タイミングの問題もあるのでは。
「入力した後」にイベントが発生するように調整してください。
そこは作る側の仕様なので決めてください。

Comments

[maisumakun]

> イベントの発生タイミングの問題もあるのでは。

ですね、これだとユーザーが入力する前の状態で固定されてしまいますね。

[m.ts10806]

仕様をコードから読み取るしかないのがつらいですね。
サジェストリストを出したいのかなと思いますが、autocomplete()だと無理なんじゃないかなと思ってみたり（そもそもautocompleteのイベントあるんだって今回初めて知った）

[maisumakun]

> そもそもautocompleteのイベントあるんだって今回初めて知った

何かしらのプラグインなのではないでしょうか？

[m.ts10806]

https://jqueryui.com/autocomplete/

jQueryUIですね。

[ryu_k]

はい、jQueryUIで、入力値に対する候補をサーバーから取得してセットしたい、という仕様です。
言葉不足でお時間いただいていしまってスイマセン。

[m.ts10806]

onkeyup()とかでAjaxで取りに行った返りを配列にしてautocomplete()を毎回セットすればできそうに思うのですが、どうなんでしょう。

[ryu_k]

ありがとうございます！サーバー側に入力値がとどきました！

C#のコントローラーで、デフォルトで以下のGetメソッドサンプルが用意されていました。
/api/aaaaa/
/api/aaaaa/5
ですので、後者イメージで入力値をURLに渡せればいい、という考えですすんでいたのですが、
UIの仕様をよく読んで方向転換するべきでした。
ありがとうございます。

役に立たないかもしれませんが、参考までにソースを追記します。