ASP.NET MVC3入门教程之ajax交互

本文转载自:http://www.youarebug.com/forum.php?mod=viewthread&tid=100&extra=page%3D1

随着web技术的不断发展与进步,在web2.0时代,ajax技术作为新宠,越来越受到网页设计人员、网页开发人员的重视。使用ajax技术,可以构建动态、响应灵敏的web应用程序,这方法的关键在于浏览器的javascript、DHTML和服务器进行异步通信,它直接从浏览器与后端服务器进行通信,掐当地使用它,可以是网页更加自然,提高网页的灵敏度,提升用户体验。
ajax技术,它使浏览器为用户提供自然的浏览体验,在ajax之前,web应用程序强制用户进行提交、等待等操作。ajax提供与服务器异步通信的能力,从而使用户从浏览器的请求-响应中得到解脱。使用ajax可以在用户单击按钮是,使用javascript和DHTML立即更新网页UI,而不需要强制刷新网页,并且在更新网页的同时,向服务器发出异步请求,执行相关增删改查操作。用户甚至都觉察不到浏览器与Web服务器之间的通信。Ajax的核心工作原理是使用javascript的XmlHttpRequest对象,在此,我们就不详细解释ajax的原理了。下面讲解ASP.NET MVC3与js完成ajax通信。还是在前面的基础上进行。今天我们把上一节的登录操作使用ajax完成。
1、在LoginPage.cshtml中增加代码,代码如下

 

@{
    ViewBag.Title = "LoginPage";
}

<h2>用户登录</h2>
<h3>Post方法举例</h3>
<form action="/Home/LoginForPost" method="post">
    <input type="text" name="name" />
    <input type="password" name="password"  />
    <input type="submit" value="登录" />
</form>
<h3>Get方法举例</h3>
<form action="/Home/LoginForGet" method="get">
    <input type="text" name="name" />
    <input type="password" name="password"  />
    <input type="submit" value="登录" />
</form>
<!--ajax登录-->
<h3>ajax登录举例</h3>
<div>
    <input type="text" name="name" id="name" />
    <input type="password" name="password" id="password" />
    <input type="button" value="登录" id="loginbtn" />
</div>
<script type="text/javascript">
    $(function () {
        $("#loginbtn").click(function () {
            Login();
        });
    });
    function Login() {
        var name = $.trim($("#name").val());
        var password = $.trim($("#password").val());
        $.ajax({
            url: "/Home/LoginForAjax",
            data: name= + escape(name) + &password= + escape(password),
            type: "POST",
            dataType: "text",
            success: function (text) {
                if (text == "true") {
                    alert(登录成功);
                } else {
                    alert(登录失败);
                }
            }
        });
    }

</script>

 

上述代码的javascript部分是使用jquery获取输入的name和password,然后通过ajax方法与Home控制器下的LoginForAjax进行通信。
2、在Home控制器中添加接受Ajax响应的方法
LoginForAjax

 

public string LoginForAjax(string name, string password)
        {
            if (name == "123" && password == "123")
            {
                return "true";
            }
            else
            {
                return "false";
            }
        }

 

我们假设name为123,password为123时表示验证成功,验证成功返回true,验证失败返回false
3、运行,输入网址
http://localhost:6187/Home/LoginPage name为123,password为123,点击登录即可。如图所示,登录成功
 

ajax与后台方法的交互大致如此。
下一节讲解ASP.NET MVC3使用ADO.NET连接数据库。

ASP.NET MVC3入门教程之ajax交互,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。