Question

我正在尝试在.ascx页面中使用jquery与webservice通信，以便检查数据库中是否存在提供的用户名。但由于某种原因，jquery函数没有加载，我尝试使用它上面的调试器进行检查。我可以在.aspx页面中使用相同的代码执行此操作，但不能使用.ascx。我是jquery的新手，请帮忙。

我正在使用的代码是：

script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<style type="text/css">
    .available
    {
        color: Green;
    }
    .used
    {
        color: Red;
    }
    .required
    {
        color: Red;
    }
    .hide
    {
        display:none;
    }
</style>

<script type="text/javascript">
    var emptyUserNameMessage = 'Please enter the username';
    var progressUserNameMessage = 'Checking...';
    var availableUserNameMessage = 'Username is available';
    var usedUserNameMessage = 'Username has been taken';


    $(function() {
        var userNameAvailabilityLabel = $('#<%= UserNameAvailabilityLabel.ClientID %>');

        $('#<%= UserNameAvailabilityButton.ClientID %>').click(function() {
            var userNameTextBox = $('#<%= UserNameTextBox.ClientID %>');
            var userName = userNameTextBox.val();
            if ($.trim(userName) == '') {
                userNameAvailabilityLabel
                        .removeClass()
                        .addClass('required')
                        .html(emptyUserNameMessage);
            }
            else {
                userNameAvailabilityLabel.html('');
                $('#ProgressDiv').show();

                $.ajax({
                    type: 'POST',
                    url: 'Sample.asmx/CheckUserNameAvailability',
                    data: '{userName: \'' + userNameTextBox.val() + '\'}',
                    contentType: 'application/json; charset=utf-8',
                    dataType: 'json',
                    success: OnCheckUserNameAvailabilitySuccess,
                    error: OnCheckUserNameAvailabilityError
                });
            }
            return false; //Prevent postback
        });

        function OnCheckUserNameAvailabilitySuccess(response) {
            $('#ProgressDiv').hide();
            if (response != null && response.d != null) {
                var data = response.d;
                switch (data) {
                    case 0:
                        userNameAvailabilityLabel
                        .removeClass()
                        .addClass('available')
                        .html(availableUserNameMessage);

                        break;
                    case 1:
                        userNameAvailabilityLabel
                        .removeClass()
                        .addClass('used')
                        .html(usedUserNameMessage);
                        break;
                }
            }
        }
        function OnCheckUserNameAvailabilityError(xhr, ajaxOptions, thrownError) {
            alert(xhr.statusText);
        }
    });

</script>

Answer 1

所有jquery都必须存在于这段代码中。

 $(document).ready(function(){


});

修改

Antony提出了一个很好的观点。

以下是执行准备的三个版本。我在他的代码中没有注意到。

$(document).ready(handler) $().ready(handler) (this is not recommended) $(handler)

Answer 2

我认为告诉用户您的页面/控件是否有用户名不是一个好主意，这是一个潜在的安全漏洞。你基本上告诉攻击者什么用户名有效/无效，而他们根本不需要知道密码。

Answer 3

我同意Cubicle。不要忘记在.ready()中包装您的JQuery代码。

您可能还想尝试使用Firebug来检查客户端脚本错误。只需运行一些测试即可查看出现的错误。

Jquery函数在.ascx页面中不起作用

3 个答案: