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，验证失败返回false3、运行，输入网址http://localhost:6187/Home/LoginPagename为123，password为123，点击登录即可。如图所示，登录成功ajax与后台方法的交互大致如此。下一节讲解ASP.NET MVC3使用ADO.NET连接数据库。