Question

在了解了jQuery和整个AJAX之后，我非常兴奋。我决定完全用输入字段替换我的表单。当'＆lt;'输入type =“button”/'＆gt;'时，数据将被发送到服务器点击。

// 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

好问题，你在谈论'渐进增强'。

基本上，表单首先应该禁用js。如果客户端启用了js，则可以通过将事件附加到提交按钮单击事件或表单提交事件并使用ajax发送数据来连接一些jQuery以劫持表单提交。

通常这看起来像

$('#someSubmitButton').click( function(ev){

   //prevent default form postback

   ev.preventDefault();

   var data = $(this.form).serialize();

   $.post( url, data, callbackFunction);

});

你的第二个问题 - Scott Gu有一个很好的walkthrough带你通过一种方式来做服务器＆amp;客户端验证产生相同的结果。

Answer 2

我不会像你在代码中那样删除“表单” - 而是用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被禁用，您的验证仍然存在），然后您可以根据需要添加相应的客户端。

使用Ajax（jQuery）通过JSON将数据发送到服务器（ASP.NET MVC）

2 个答案: