部署到服务器后jQuery和AJAX无法正常工作

Question

我有一个在我的本地计算机上运行良好的项目,但在部署到服务器后,无法正常工作.如果我在javascript中放置断点它会触及它们并通过代码,但不会执行它应该执行的操作(jquery autocomplete).我甚至确保我需要的脚本文件存储在服务器上.有什么东西我在看吗？

需要运行的代码:

<script type="text/javascript">
    $(document).ready(function () {
        $("input.autocomplete").autocomplete({
            appendTo: '.container',
            source: function (request, response) {
                $.ajax({
                    url: '/Home/GetUsers',
                    type: "POST",
                    dataType: "json",
                    data: { query: request.term },
                    success: function (data) {
                        response($.map(data, function (item) {
                            return { label: item, value: item };
                        }));
                    }
                });
            }
        });
    })
</script>

包含jquery的_Layout.cshtml页面:

@Styles.Render("~/Content/css")
@Styles.Render("~/Content/themes/base/jquery-ui.css")
@Styles.Render("~/Content/themes/base/jquery-ui.autocomplete.css")
@Scripts.Render("~/bundles/modernizr")

<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-ui-1.8.20.js")"></script>

Answer 1

我也在我的mvc项目中面对这个问题....

我通过以下步骤解决了这个问题.

1)将它放在脚本部分的布局页面中

<script type="text/javascript">
var RootUrl = '@Url.Content("~/")';
</script>

2)在ajax url中添加"RootUrl"变量.(它也是你的Js文件,你在你的ajax网址之前添加"RootUrl")

 url: RootUrl +'Home/GetUsers';

它对我来说是完美的,但任何人都有其他解决方案然后发布我

Answer 2

我需要将 url 更改为在服务器上有效的 URL。我的最终代码如下所示：

<script type="text/javascript">
$(document).ready(function () {
    $("input.autocomplete").autocomplete({
        appendTo: '.container',
        source: function (request, response) {
            $.ajax({
                url: '/Lookup/Home/GetUsers',
                type: "POST",
                dataType: "json",
                data: { query: request.term },
                success: function (data) {
                    response($.map(data, function (item) {
                        return { label: item, value: item };
                    }));
                }
            });
        }
    });
})
</script>