jquery - 使用 Ajax(jQuery) 通过 JSON 将数据发送到服务器 (ASP.NET MVC)

Question

了解 jQuery 和整个 AJAX 后，我感到非常兴奋。我决定用输入字段完全替换我的表单。当点击'<'input type="button"/'>'时，数据被发送到服务器。

// JavaScript
function submit() {
removeInfo();

btn = $('#button');

$('#button').replaceWith('<img id="theimage" src="/images/ajax-loader.gif" />');

$.post('/jlogin',
        {
            username: $('#username').val(),
            password: $('#password').val(),
            captcha: $('#captcha').val()
        },
        function (data) {
            if (data.status == 'SUCCESS') {
                window.location = '/successfullogin';
            }
            else {
                $(data.errorInput).addClass('inputerror');
                $(data.errorInput).focus();
                $('#spanFailed').text(data.info);
                appear('#divFailed');
                if (data.errorInput == '#captcha') {
                    captchaimage.src = '/captcha?i=2' + Math.floor(Math.random() * 11);
                }
                $('#theimage').replaceWith(btn);
            }                
        },
        'json'
);
}


<!-- HTML -->
<div id="divFailed" class="error" style="display:none; width:250px; height:25px;">
            <span id="spanFailed" class="spanerror">

            </span>
            <br />
        </div>    

        <br /> 


        Username:

        <input type="text" id="username"  />

        <!-- and other inputs here -->

        <input type="button" id="button" onclick="submit()" value="Login" >

所以问题是，如果用户没有启用 JavaScript，他/她将无法使用我的 Web 应用程序。而且也不可能让浏览器记住密码。

我听说过使用 JavaScript 序列化表单。但是，当我使用没有 JavaScript 的表单时，如何才能使用这些花哨的红色警报呢？

所以基本上我希望拥有相同的功能，但带有表单。

Answer 1

我不会像您在代码中所做的那样删除“表单” - 而是用 jQuery/AJAX/等对其进行补充。因此，在禁用 javascript 的情况下，您的登录功能仍然可以使用。

<div id="LoginArea">
    <div class="message"><%:Html.ValidationSummary(true)%></div>
    <% using (Html.BeginForm("/MyController/MyLogin", FormMethod.Post, 
        new { id = "LoginForm", name = "LoginForm" })) { %>
    <input type="text" id="username"  />
    <!-- and other inputs here -->
    <input type="submit" id="button" value="Login" >
    <%}%>
</div>

然后使用 jQuery 创建一个提交拦截器:

<script type="text/javascript">
$(document).ready(function () {
    $("#LoginForm").submit(function () {
        var f = $("#LoginForm");
        var action = f.attr("action");
        var serializedForm = f.serialize();
        $.ajax({
            type: 'POST',
            url: action,
            data: serializedForm,
            success: function (data, textStatus, request) {
                if (data.status == 'SUCCESS') {
                    window.location = '/successfullogin';
                }
                else {                   
                    $("#LoginArea").html(data);
                    $("#LoginArea").show(speed);                        
                }
            }
        });
        return false;
    });
});
</script>

然后至少在服务器端进行错误处理(因此，如果禁用了 javascript，您的验证仍然有效)，然后您可以根据需要添加相应的客户端。