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

时间 2019-11-29

标签 mvc 使用 jquery 方式进行异步求和自带请求栏目 JQuery 繁體版

原文原文链接

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

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

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

因为在最新的VS中（笔者用的是13版的），当咱们建立一个MVC项目时，VS会自动向项目中添加JQuery库，因此咱们只须要将相应的库引入到咱们的项目中便可。jquery

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

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

二、建立一个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();
        }
    }

三、在对应的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就能够用异步请求的方式来获取服务器端数据。函数

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

一、建立一个Action，取名为MvcModel，并为其建立一个视图，示例代码：spa

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中的异步请求有必定的了解。