如何用jQuery访问后台API，实现真正的前后端分离

最新推荐文章于 2024-06-26 08:15:00 发布

置顶

刘一笔(公众号同名)

最新推荐文章于 2024-06-26 08:15:00 发布

阅读量7.9k

点赞数 1

文章标签：前端 AJax .NET 获取数据

本文链接：https://blog.csdn.net/samt327/article/details/80386937

版权

本文介绍如何利用jQuery的Ajax技术与后端API进行数据交互，以实现前后端分离。在.NET MVC环境下，针对年级和学科的下拉框需求，通过Ajax请求获取并展示年级对应的学科数据。后端需返回JSON格式的数据，前端则通过jQuery的Ajax方法进行GET请求，解决可能遇到的安全问题和数据格式问题。

摘要由CSDN通过智能技术生成

上学期在工作室学的是.NET WebForm技术，那会才知道完整的网站开发是这个模样，不过范围还是在.Net 平台上。但头疼之处也是从这里开始，由于控件的加入，完整的项目开发并不像写纯前端页面那样纯粹。但从对于新手友好度来说，我觉得还是不错的，毕竟拖个控件就OK了。这个学期的mvc技术，使得视图层和后台代码分开而不是像WebForm那样紧密结合，从而让负责不同端的开发人员可以更好的编写代码。这篇文章粗略描绘下如何使用jQuery库的Ajax技术向后端API请求数据。

描述下我的业务需求，是在首页有两个分别为年级和学科的下拉框，点击年级会展示对应的学科。年级的数据是早已渲染好的，现在要实现的是后半部分，即展示相应年级的学科。先前有粗略想过客户端筛选，即先把所有科目数据渲染到前端，在前端点击年级的时候进行科目筛选，但也没有细想如何实现。也想过的还有，写一个专门的方法负责年级对应科目的查询，但是没想明白如何在不用jQuery的情况下就在点击的瞬间完成查询且将数据渲染到前端。

所以将要分享的方法是用jQuery实现访问后台API获取数据的。

后端代码

public ActionResult getsubject(int id)
        {
            var sub= subjectSer.getsubject(id);
            return Json(sub,JsonRequestBehavior.AllowGet);
        }

这里因为采用了三层结构，所以后端代码较简单，一条代码查数据，另一条代码是返回查询到的数据，这里有几个坑要说下，因为前端是用Ajax请求的数据ÿ