通过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）

回答

相关问题