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

上学期在工作室学的是.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请求的数据，所以控制器返回的应该是JSON格式的数据，这样就应该在return后加上JSON，使得能够创建一个JSON对象返回到前端。第二个坑是“此请求已被阻止，因为当在用GET请求中时，会将敏感信息透露....请将JSONRequestBehavior设置为AllowGet”，Json方法有一个重构是protected internal JsonResult Json(object data,JsonRequestBehavior behavior),现在需要把行为设置为允许访问。三层中具体获取数据的代码在这里略去不表。

再看前端的Ajax请求，

    $("#choosegrade ul li span").click(function(){var grade_id = $("#choosegrade ul li span").attr("data-id");$.get("/Index/getsubject/" + grade_id, function (data, status) {alert(data + status);})})

第一行是找到鼠标点击对应的年级，然后是获取点击年级的对应ID（在这里因为前端没有对年级ID的渲染需求，所以这里把ID放到了可自定义的属性data-*中），再就是用jQuery的AJax方法获取数据了，jQuery牛逼。截止写这篇文章，对数据的处理还没写完。

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

开发一个大型后台管理系统，应该用前后端分离的技术方案吗？
话说这天,我们团队开会讨论了一个问题,不,与其说"讨论",不如说"争吵"更合适. 背景是这样的: 我们要开发一个 xxx 后台管理系统,这个系统业务复杂.功能又 ...
api权限管理系统与前后端分离实践
https://segmentfault.com/a/1190000014368885 转载于:https://www.cnblogs.com/java-le/p/9759679.html
【官方推荐】Laravel7 + Vue2.0前后端分离框架通用后台源码
laravel7 + vue + element-ui的后台极速开发框架,采用前后端分离架构,安全性 (JWT 校验.中间件.验证器.路由.异常处理.权限控制) 网址:http://139.155.4 ...
开发一个大型后台管理系统，真的需要用前后端分离的技术方案吗？
话说这天,我们团队开会讨论了一个问题,不,与其说"讨论",不如说"争吵"更合适. 背景是这样的: 我们要开发一个 xxx 后台管理系统,这个系统业务复杂.功能又 ...
Thinkphp 6 + Vue 2 + ElementUI + Vxe-table 前后端分离的，一键生成代码和API接口的，通用后台管理系统快速开发框架，开发小程序和APP的推荐框架！
Thinkphp 6 + Vue 2 + ElementUI + Vxe-table 前后端分离的,一键生成代码和API接口的,通用后台管理系统快速开发框架,开发小程序和APP的推荐框架! 概述 R ...
若依前后端分离版源码分析-前端头像上传后传递到后台以及在服务器上存储和数据库存储设计
场景使用若依前后端分离版本时,分析其头像上传机制. 可作为续参考学习. 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号霸道的程序猿获 ...
基于springboot2.0跟layui构建的前后端分离后台管理系统
Active4j-boot是基于SpingBoot2.0轻量级的java快速开发框架.以Spring Framework为核心容器,Spring MVC为模型视图控制器,Mybatis Plus为数据 ...
开发SpringBoot+Jwt+Vue的前后端分离后台管理系统VueAdmin - 前端笔记
1. 前言而接下来,我们即将开发一个前后端分离的后台管理系统VueAdmin.权限框架采用spring security,然后相对来说权限模块开发就多点代码,也仅此而已了.对了前端的系统界面也是我们 ...
react 访问后端_React框架学习(二)——前后端分离，整合，部署
前后端分离前端与后端分离开发,主要为了解耦与提升效率.基于react框架的特殊性,出现了一个本地后台,来支持前端开发,并且页面通过该本地后端访问,数据则通过访问后端提供获取数据的API来获取. 整合 ...
Vue前后端分离的电商后台管理系统项目的概述
(1)该项目是基于前后端分离的开发模式,基于Vue技术栈的SPA单页面项目, 后端主要操作数据库并向前端暴露一些API接口前端主要负责绘制页面同时,利用Ajax调用后端提供的接口. 这样的开发模式使 ...

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

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

最新文章

热门文章