通过get方法实现AJax请求

View

<script type="text/javascript">
    function GetTime() {
        $.get("Home/GetTime", function (response) {
            $("#myPnl").html(response);
        }); return false;
    } </script>
<div id="myPnl" style="width: 300px; height: 30px; border: 1px dotted silver;">
</div>
<a href="#" onclick="return GetTime();">Click Me</a>

Controller

public ActionResult GetTime()
{ return Content(DateTime.Now.ToString());
}

通过post方法实现Form的Ajax提交

View

@model MvcAjax.Models.UserModel @{  ViewBag.Title = "AjaxForm"; } <script type="text/javascript"> $(document).ready(function () {
        $("form[action$='SaveUser']").submit(function () {
            $.post($(this).attr("action"), $(this).serialize(), function (response) {
                $("#myPnl").html(response);
            }); return false;
        });
    }); </script>
<div id="myPnl" style="width: 300px; height: 30px; border: 1px dotted silver;">
</div> @using (Html.BeginForm("SaveUser", "Home"))
{ <table>
        <tr>
            <td> @Html.LabelFor(m => m.UserName) </td>
            <td> @Html.TextBoxFor(m => m.UserName) </td>
        </tr>
        <tr>
            <td> @Html.LabelFor(m => m.Email) </td>
            <td> @Html.TextBoxFor(m => m.Email) </td>
        </tr>
        <tr>
            <td> @Html.LabelFor(m => m.Desc) </td>
            <td> @Html.TextBoxFor(m => m.Desc) </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="submit" value="Submit" />
            </td>
        </tr>
    </table> }

Model

using System.ComponentModel.DataAnnotations; namespace MvcAjax.Models
{ public class UserModel {
        [Display(Name = "Username")] public string UserName { get; set; }

        [Display(Name = "Email")] public string Email { get; set; }

        [Display(Name = "Description")] public string Desc { get; set; }
    }
}

Controller

[HttpPost] public ActionResult SaveUser(UserModel userModel)
{ //Save User Code Here
    //...... return Content("Save Complete!");
}

以上代码实现了Jquery POST提交数据的方法。

通过查看以上两种Jquery方式的Ajax实现方法，和之前AJax HTML Helper比较可以发现其实Controller都是相同的。

采用Jquery方式提交数据的的主要实现方案就是通过Jquery的get或者post方法，发送请求到MVC的controller中，然后处理获取的response，更新到页面中。

注意点：

无论是使用超链接和form方式来提交请求，javascript的方法始终都有一个返回值false，用来防止超链接的跳转或者是form的实际提交。

这个地方就会出现一个疑问：

如果针对该页面禁止了Javascript脚本，那么该页面就是跳转或者是form就是提交，返回的ActionResult处理就会出现问题了。

这个时候就需要在Controller中判断该请求是否是Ajax请求，根据不同的情况返回不同的ActionResult：

[HttpPost] public ActionResult SaveUser(UserModel userModel)
{ //Save User Code Here
    //...... if (Request.IsAjaxRequest()) return Content("Save Complete!"); else
        return View();
}

　企业性质分类

MVC Ajax Helpers　

判断浏览器是否兼容position:sticky属性,并实现jQuery兼容所有浏览器 c# winform中使用NPOI，实现excel导入导出功能 jquery.tmplate模板引擎使用心得 Nginx的使用（一）Nginx+IIS实现一个网站绑定多个https域名 C#使用OpenCV剪切图片中的人物头像的实现方法 C# 使用 Dapper 实现 SQLite 增删改查使用Python获取建筑网站数据，进行可视化分析，并实现网站JS解密 asp.net mvc和.net core动态路由cms经常用到 jquery.ajax()操作默认为异步调用 .net core mvc 响应结果类型 Ok(),BadRequest(),NotFound()

柏港建站平台

柏港 MVC

MVC 使用Jquery实现AJax

通过get方法实现AJax请求

通过post方法实现Form的Ajax提交

柏港为您推荐了一些相关资讯