MVC中Ajax post 和Ajax Get—

HTTP 请求：GET vs. POST
两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。
GET - 从指定的资源请求数据
POST - 向指定的资源提交要处理的数据
GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

在MVC中用ajax的方式传送数据

先创建实体

using System.ComponentModel;

namespace ViewerWeb.Models

{

    public class UserInfo

    {

        [DisplayName("用户名：")]

        public string UserName { get; set; }

        [DisplayName("年  龄：")]

        public int Age { get; set; }

        [DisplayName("密  码：")]

        public string Description { get; set; }

    }

}

用BeginForm直接post提交数据

前台页面

@model ViewerWeb.Models.UserInfo

@{

    ViewBag.Title = "About";

}

<p>@ViewBag.Message.</p>

<div>

    @using (Html.BeginForm("Create", "Home", FormMethod.Post,

        new { id = "form1", @class = "form-horizontal" }))

    {

        <div class="form-group">

            @Html.LabelFor(model => model.UserName, new { @class = "col-sm-2 control-label" })

            <div class="col-sm-10">

                @Html.TextBoxFor(model => model.UserName, new { @class = "form-control" })

            </div>

        </div>

        <div class="form-group">

            @Html.LabelFor(model => model.Age, new { @class = "col-sm-2 control-label" })

            <div class="col-sm-10">

                @Html.TextBoxFor(model => model.Age, new { @class = "form-control" })

            </div>

        </div>

        <div class="form-group">

            @Html.LabelFor(model => model.Description, new { @class = "col-sm-2 control-label" })

            <div class="col-sm-10">

                @Html.TextBoxFor(model => model.Description, new { @class = "form-control" })

            </div>

        </div>

        <div class="form-group">

            <div class="col-sm-offset-2 col-sm-10">

                <button type="submit" class="btn btn-primary">OK</button>

            </div>

        </div>

    }

</div>

后台Controller

        [HttpPost]

        public ActionResult Create(UserInfo userInfo)

        {

            return View("PostPage", userInfo);

        }

Ajax Post提交和Ajax Get

@section scripts这个是模板页设置的写js的。

@model ViewerWeb.Models.UserInfo

@{

    ViewBag.Title = "AjaxPostPage";

}

<h2>@ViewBag.Message.</h2>

<div>

    <div class="form-horizontal" id="form1" data-post-url="@Url.Action("CreateUserByPost")"

         data-get-url="@Url.Action("CreateUserByGet")">

        <div class="form-group">

            @Html.LabelFor(model => model.UserName, new { @class = "col-sm-2 control-label" })

            <div class="col-sm-10">

                @Html.TextBoxFor(model => model.UserName, new { @class = "form-control" })

            </div>

        </div>

        <div class="form-group">

            @Html.LabelFor(model => model.Age, new { @class = "col-sm-2 control-label" })

            <div class="col-sm-10">

                @Html.TextBoxFor(model => model.Age, new { @class = "form-control" })

            </div>

        </div>

        <div class="form-group">

            @Html.LabelFor(model => model.Description, new { @class = "col-sm-2 control-label" })

            <div class="col-sm-10">

                @Html.TextBoxFor(model => model.Description, new { @class = "form-control" })

            </div>

        </div>

        <div class="form-group">

            <div class="col-sm-offset-2 col-sm-10">

                <button type="button" class="btn btn-primary" id="postButton">Post</button>

                <button type="button" class="btn btn-primary" id="getButton">Get</button>

            </div>

        </div>

    </div>

</div>

@section scripts{

    <script>

        $(document).ready(function () {

            $("#postButton").on("click", function () {

                $.ajax({

                    type: 'POST',

                    url: $("#form1").data("post-url"),

                    data: {

                        UserName: $("#UserName").val(),

                        Age: $("#Age").val(),

                        Description: $("#Description").val()

                    },

                    success: function (data) {

                        alert(data.message);

                    }

                });

            });

            $("#getButton").on("click", function () {

                $.ajax({

                    type: 'GET',

                    url: $("#form1").data("get-url"),

                    data: {

                        UserName: $("#UserName").val(),

                        Age: $("#Age").val(),

                        Description: $("#Description").val()

                    },

                    success: function (data) {

                        alert(data.message);

                    }

                });

            });

        });

    </script>

}

后台Controller

        [HttpPost]

        public JsonResult CreateUserByPost(UserInfo userInfo)

        {

            return Json(new { success = true, message = userInfo.UserName });

        }

        [HttpGet]

        public JsonResult CreateUserByGet(UserInfo userInfo)

        {

            return Json(new { success = true, message = userInfo.UserName }, JsonRequestBehavior.AllowGet);

        }

Ajax Post传输列表

@model ViewerWeb.Models.UserInfo

@{

    ViewBag.Title = "AjaxPostListPage";

}

<h2>@ViewBag.Message.</h2>

<div>

    <div class="form-horizontal" id="form1" data-post-url="@Url.Action("CreateUserList")">

        <div class="form-group">

            @Html.LabelFor(model => model.UserName, new { @class = "col-sm-2 control-label" })

            <div class="col-sm-10">

                @Html.TextBoxFor(model => model.UserName, new { @class = "form-control" })

            </div>

        </div>

        <div class="form-group">

            @Html.LabelFor(model => model.Age, new { @class = "col-sm-2 control-label" })

            <div class="col-sm-10">

                @Html.TextBoxFor(model => model.Age, new { @class = "form-control" })

            </div>

        </div>

        <div class="form-group">

            @Html.LabelFor(model => model.Description, new { @class = "col-sm-2 control-label" })

            <div class="col-sm-10">

                @Html.TextBoxFor(model => model.Description, new { @class = "form-control" })

            </div>

        </div>

        <div class="form-group">

            <div class="col-sm-offset-2 col-sm-10">

                <button type="button" class="btn btn-primary" id="postButton">Post</button>

            </div>

        </div>

    </div>

</div>

@section scripts{

    <script>

        $(document).ready(function () {

            var getData = function () {

                return {

                    UserName: $("#UserName").val(),

                    Age: $("#Age").val(),

                    Description: $("#Description").val()

                };

            };

            $("#postButton").on("click", function () {

                var param = [];

                param.push(getData());

                param.push(getData());

                $.ajax({

                    type: 'POST',

                    contentType: "application/json", //必须有

                    dataType: "json", //表示返回值类型，不必须

                    url: $("#form1").data("post-url"),

                    data: JSON.stringify(param),

                    success: function (data) {

                        alert(data.message);

                    }

                });

            });

        });

    </script>

}

后台

        [HttpPost]

        public ActionResult CreateUserList(IEnumerable<UserInfo> userInfos)

        {

            return Json(new { success = true, message = userInfos.FirstOrDefault().UserName });

        }

MVC和Api返回时间的问题Date

MVC和API返回的时间DateTime会变成{"success":true,"d":"\/Date(1563420643851)\/"}的解决办法，前端对时间做处理，把时间处理成想要的格式

            var date_reg = /\-?\d+/;

            function convertData(date) {

                var date_num = parseInt(date.match(date_reg));

                var d = new Date(date_num);

                if (date_num > 0) {

                    d.setHours(d.getHours() + 8);

                }

                return d.toJSON().slice(0, 16);

            }

巴特西

MVC中Ajax post 和Ajax Get——提交对象

MVC和Api返回时间的问题Date

最新文章

热门文章