上学期在工作室学的是.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牛逼。截止写这篇文章，对数据的处理还没写完。