通過JSON通過Ajax（jQuery）發送數據到服務器（ASP.NET MVC）

在瞭解了jQuery和整個AJAX的事情之後，我非常興奮。我決定完全只用輸入字段替換我的表單。當'<'輸入類型=「按鈕」/'>'被點擊時，數據被髮送到服務器。通過JSON通過Ajax（jQuery）發送數據到服務器（ASP.NET MVC）

// 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的表單時能夠使用這些奇特的紅色警報？

所以基本上我想擁有相同的功能，但與形式。

來源

2010-07-02 Alex

我不會像你在代碼中那樣去除「表單」，而是用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被禁用，您的驗證仍然會在適當位置），然後就可以如果你願意，可以添加相應的客戶端。

來源

2010-07-02 13:46:55

謝謝！我會在我的代碼中進行一些更改。 – Alex 2010-07-02 19:41:37

好問題，你說的是'漸進式增強'。

基本上，形式應該首先與js殘疾人一起工作。如果客戶端啓用了js，那麼您可以通過將一個事件附加到提交按鈕單擊事件或表單提交事件並使用ajax發送數據來連接一些jQuery來劫持表單提交。

通常，這看起來像

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

    //prevent default form postback 

    ev.preventDefault(); 

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

    $.post(url, data, callbackFunction); 

});

你的第二個問題 - 斯科特谷具有良好的walkthrough帶你通過一個方法來做到這兩個服務器&客戶端驗證，以產生相同的結果。

來源

2010-07-02 11:44:38 redsquare

通過JSON通過Ajax（jQuery）發送數據到服務器（ASP.NET MVC）

回答

相關問題