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>