如何在ASP.NET MVC中使用ajax

最新推荐文章于 2021-09-16 17:41:56 发布

遛狗的代码

最新推荐文章于 2021-09-16 17:41:56 发布

阅读量608

点赞数

分类专栏： Web前端文章标签： ASP.NET MVC ajax

本文链接：https://blog.csdn.net/Brave_Coder/article/details/51111862

版权

Web前端专栏收录该内容

29 篇文章 0 订阅

订阅专栏

由于原生ajax写起来比较麻烦，我未来省事就用的jquery的库。

HTML代码如下:

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-1.10.2.js"></script>
</head>
<body>
    <div>
        <button id="request"  type="button">1111</button>
    </div>
    <script>
        $(function () {

            $("#request").click(function () {

                $.ajax({
                    url: "/ajaxdemo/getData",
                    type:'post',
                    dataType: "json",
                    data: {
                        id: 10,
                        iCode: 1
                    },//传递给后台的值
                    success: function (data) {
                        console.log(data.iCode);
                    }
                });
            })
        })
    </script>
</body>
</html>

控制器中的代码如下:

using System.Web.Mvc;

namespace AngularJSandMVC.Controllers
{
    public class AjaxDemoController : Controller
    {
        // GET: AjaxDemo
        public ActionResult Index()
        {
            return View();
        }
        public ActionResult GetData(int id, int iCode)//用于接受前台传过来的值
        {
            return Json(new { Id=id,iCode=iCode});
        }
    }
}

在GetData方法中，接受两个参数，其实就是在前台传递过来的值，这是一种简单的写法，还可以写成 Request.Form["id"]，这就看个人的喜好了。在返回的时候，

return Json(object,JsonRequestBehavior.AllowGet),第二个参数为可选参数。这里Json是ActionResult的子类，这儿运用了多态。然后我们把视角切换回前台的回调函数，data就是返回的数据，回调函数可以有多个参数，我这儿写的是最简单的，其余的用法，w3也有demo。然后我们就可以进行相应的DOM操作实现页面的部分刷新。

遛狗的代码

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何在ASP.NET MVC中使用ajax

由于原生ajax写起来比较麻烦，我未来省事就用的jquery的库。HTML代码如下:@{ Layout = null;} Index 1111 $(function () { $("#request").click(function () {
复制链接

扫一扫

专栏目录