Razor 页面 jQuery 自动完成什么都不做

Question

我已经按照以下格式实现了 JQuery 自动完成功能： AddApplication.cshtml

@page

@model AddApplicationModel

@{

}

<div>

    <form>

        <div>

            <input type="text" name="appName" placeholder="Enter Application Name">

            <select asp-items="Model.ministryItems">

                <option>Select Ministry</option>

            </select>

        </div>

        <div>

            <input type="text" name="url" id="url" placeholder="Search for a URL" autocomplete="on">

        </div>

    </form>

</div>

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/start/jquery-ui.css">

<script src="//code.jquery.com/jquery-1.10.2.js"></script>

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

    <script type="text/javascript">

        $(function () {

            $("#url").autocomplete({

                source: function (request, response) {

                    console.log("in funct");

                    $.ajax({

                            url: "@Url.Action("GetURL","AddApplication")",

                            data: ({ term: request.term}),

                            dataType: "json",

                            type: "GET",

                            contentType: "application/json; charset=utf-8",

                            success: function (data) {

                            Console.log("success");

                            response($.map(data, function (item) {

                                Console.log("response"+item)

                                return item;

                            }))

                            }

                    });

                },

                select: function (e, i) {

                    $("#url").val(i.item.val);

                },

                minLength: 0

            }).focus(function () {

                $(this).autocomplete("search");

            });

        });

    </script>

当我在文本框中输入内容时，什么也没有发生。经过一些调试后，我知道函数$("url").autocomplete正在被调用，但success: function()data{}没有被击中

Answer 1

修改ajax请求以正确包含查询字符串参数：$.ajax({&nbsp; &nbsp; &nbsp; &nbsp; url: "AddApplication/GetURL",&nbsp; &nbsp; &nbsp; &nbsp; data: ({ term: request.term}),&nbsp; &nbsp; &nbsp; &nbsp; dataType: "json",&nbsp; &nbsp; &nbsp; &nbsp; type: "GET",&nbsp; &nbsp; &nbsp; &nbsp; success: function (data) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;response($.map(data, function (item) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;return item;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Console.log("response"+item)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}))&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}});

Answer 2

经过更多搜索，我终于能够让它工作。添加防伪标记可能是根本问题，因为我之前没有添加它。请注意 URL，根据多个来源，这是在 razor 中引用 URL 的正确方法。虽然由于某种原因它只调用完成的函数，但它永远不会成功。目前这不会引起问题。AddApplication.cshtml<script>&nbsp; &nbsp; $(document).ready(function(){&nbsp; &nbsp; &nbsp; &nbsp; $("#UrlQueBtn").click(function(e)&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var url = $('#urlSelect').val();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(url);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: "AddApplication?handler=AddUrlToQue",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: "POST",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dataType: "json",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: { urlSelect: url },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; beforeSend: function (xhr) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; xhr.setRequestHeader("XSRF-TOKEN",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('input:hidden[name="__RequestVerificationToken"]').val());&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success: function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert("success");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; complete: function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert("complete")&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; failure: function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert("failure");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; });</script>需要在启动类中加入防伪令牌 startup.cs在配置服务下 services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN");