Отправка данных на сервер (ASP.NET MVC) с помощью Ajax (jQuery) через JSON

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, он / она не сможет использовать мое веб-приложение. Также нельзя позволить браузерам запоминать пароли.

Я слышал о сериализации форм с помощью 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 отключен, проверка будет по-прежнему на месте), а затем вы можете добавить соответствующую сторону клиента, если хотите.

Answer 2

Хороший вопрос, и вы говорите о «прогрессивном улучшении».

В основном форма должна работать в первую очередь с отключенными js.Если на клиенте включен js, вы можете подключить jQuery для захвата отправки формы, прикрепив событие к событию щелчка кнопки отправки или к событию отправки формы и отправив данные с помощью ajax.

Обычно это выглядит как1005 *

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

   //prevent default form postback

   ev.preventDefault();

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

   $.post( url, data, callbackFunction);

});

Ваш второй вопрос - у Скотта Гу есть хорошее пошаговое руководство , позволяющее вам пройти один из способов проверки на стороне сервера и на стороне клиента, чтобы получить одинаковый результат.