Loading

MVC中使用JQuery方式进行异步请求和使用自带方式进行异步请求

在MCV中使用异步请求可以很很高效地进行前台和后台的数据传递,在这里,笔者为初学者介绍两种在MVC中常用的异步请求处理方式。

在这里,我们通过在一个页面中放置一个按钮来异步获取当前服务器端的系统时间为例进行讲述。

第一种:使用JQuery方式进行异步请求

 由于在最新的VS中(笔者用的是13版的),当我们创建一个MVC项目时,VS会自动向项目中添加JQuery库,所以我们只需要将相应的库引入到我们的项目中即可。

1、创建一个MVC4的基本项目,使用Razor视图引擎。然后创建一个Controller,取名为Home,并在Home.cs中添加一个Action来模拟从服务器端获取系统时间,示例代码:

public ActionResult GetDate()
{
       System.Threading.Thread.Sleep(1000);
       return Content(DateTime.Now.ToString());
}

2、创建一个Controller,取名为HomeController,并创建一个Action和一个视图和一个用来模拟从服务器获取数据的Action,示例代码:

public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            return View();
        }

        public ActionResult GetDate()
        {
            //模拟延迟发送数据
            System.Threading.Thread.Sleep(1000);
            return Content(DateTime.Now.ToString());
        }

        public ActionResult JQueryModel()
        {
            return View();
        }
    }

3、在对应的JQueryModel.cshtml文件中进行异步请求,示例代码:

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>JQueryModel</title>

    <script src="../../Scripts/jquery-1.8.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //方法1:
            $("#btn").click(function() {
                $.get("/Home/GetDate",              //格式:/Controller/Action
                    null,                           //传递过去的数据
                    function (data) {               //请求成功后的回调函数
                        alert(data);
                    }
                );
                //方式2:
                $.ajax({
                    url: "/Home/GetDate",           //请求的地址(格式):/Control/Action
                    type: "POST",                   //发送请求的方式
                    success: function(data) {       //发送成功后的回调函数
                        alert(data);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <div>
        <input type="button" id="btn" value="获取服务器端系统时间"/>
    </div>
</body>
</html>

通过上面提供的两种JQuery就可以用异步请求的方式来获取服务器端数据。

第二种:使用自带方式进行异步请求

1、创建一个Action,取名为MvcModel,并为其创建一个视图,示例代码:

public ActionResult MvcModel()
{
     return View();
}
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>MvcModel</title>

    <script src="../../Scripts/jquery-1.8.2.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.unobtrusive-ajax.min.js"></script>

    <script type="text/javascript">
        function success(data) {
            alert(data);
        }
    </script>

</head>
<body>
    <div>
        @using (Ajax.BeginForm("GetDate", "Home",new AjaxOptions()
        {
            HttpMethod = "POST",
            OnSuccess = "success"
        }))
        {
            <div>
                <input type="submit" id="btn" value="获取服务器端系统时间" />
            </div>
        }
    </div>
</body>
</html>

通过这个方法,我们依然可以获取到服务器端系统时间。

笔者认为,这两种方法并没有什么优劣之分,关键是需要看开发中具体情况使用较为方便的方法,通过以上的实例,希望新手可以对MVC中的异步请求有一定的了解。

 

posted @ 2015-05-10 10:32  hippieZhou  阅读(791)  评论(0编辑  收藏  举报