在做考试系统中，遇到最头疼的问题，就是前台与后台的交互。对于使用easyui来说，刚接触不久，有点陌生。

   查着文档，看着Demo。做起来着实有点头疼。

   首先，前台使用的是MVC+Easyui，后台使用的WCF提供服务。那么前台的数据，是如何与后台进行交互的呢？

   页面上的所有事件都是通过js来调用的。那么就必须是 js里面写事件，然后把前台的数据，传到Controller里面，然后利用Controller去调用后台提供的WCF服务。

JS向后台提交数据方法：

   利用js向后台提供数据。无非两种方法，一种Get传值，一种POST传值。

   使用GET传值，传递的数据需要一个个的去写，而且传递的值都写在url上了。除非进行加密，否则这种传值方式安全性很难保证。

   使用POST传值，传递的内容比较安全。而且也可以提交整个表单。这样后台可以根据表单，来获取自己需要的内容。简单的来说就是，把前台的一堆数据都提交给后台，后台挑着用。

   POST向后台传值，也可以传递一个JSON串给后台使用。

   在页面的事件中，不需要刷新页面，所以需要使用ajax来进行数据的交互。以下代码，引用的是jquery.easyui.min.js

   里面的方法，已经被封装好了。直接用就可以了

<script src=http://www.mamicode.com/Content/jquery-easyui-1.3.2/jquery.easyui.min.js"></script>

POST向后台传递JSON串：

//模糊查询 利用ajax提交JSOn数据function doSearch(value) {    var flag=(value != "");    if (flag) {        var grid = $('#dg');        var options = grid.datagrid('getPager').data("pagination").options;        var curr = options.pageNumber;        var pageSize = options.pageSize;        $.ajax({            type: "POST", //提交数据的类型 分为POST和GET            async: false,            url: "/QuestionType/FuzzyQueryQuestionType",  //提交url 注意url必须小写            data: { "SearchContent": value, "pageSize": pageSize, "pageIndex": curr },            success: function (data) {                var jsondata = http://www.mamicode.com/eval(data);>

提交数据的时候：url里面写  /控制器名称/Action方法名。
POST向后台提交表单：
//进行查询function doSearch(value) {    var flag=(value != "");    if (flag) {        //提交查询表单    	$('#searchContent').form({        	url: "/QuestionType/FuzzyQueryQuestionType",        	onSubmit: function () {            	//进行表单验证            	//如果返回false阻止提交        	},        	success: function (data) {            	//var jsondata = http://www.mamicode.com/JSON.parse(data); //必须转换成json对象，否则异常！ rows is undefined>

 
表单内容：
<form id="searchContent" method="post">    @*  1、 加载搜索框*@    @{Html.RenderPartial("../../Views/ControlsPartial/SearchboxPartial");}    @*速度慢不用@Html.Partial("../../Views/ControlsPartial/SearchboxPartial")*@    <div id="ContentAreas" /></form>

Controller接受数据：
public ActionResult FuzzyQueryQuestionType()        {            int pageSize = int.Parse(Request.Form["pageSize"]); //10;// int.Parse(Request.Params["rows"].ToString());            //第几页            int pageIndex = int.Parse(Request.Form["pageIndex"]); //1;// int.Parse(Request.Params["page"].ToString());            int total = 0;                        //1、具体操作-调用后台方法，接收从后台传过来的--赋值            string strLike = Request.Form["SearchContent"];            //2、调用后台 查询题型的服务            List<ExamQuestionTypeEntity> listData = http://www.mamicode.com/questionTypeService.FuzzyQueryQuestionType(strLike,pageSize,pageIndex,out total);>

后台返回类型为JSON串，前台需要根据返回值 在刷新自己的表格。
所以用到了loadData 和load方法。
 
前台在利用后台传回的json串的时候，有可能出现以下错。
 
easyui里面的gridview控件。
刷新数据，有两种方式。
   第一种方法 ： $(‘#dg‘).datagrid("load", "/QuestionType/QueryQuestionTypeData"); 
       第二个参数为url，所以这个刷新 需要重新去后台查询。
 
   第二种方法：$(‘#dg‘).datagrid("loadData",jsonData);
       第二个参数，是后台传回来的JSON串，可以直接利用该数据 绑定到表格。
 
   这里需要注意一点，gridview重新加载数据的时候，使用的JSON数据格式的数据，而不是JSON格式的字符串。
前台和后台跑通一条线，就容易多了。
 
js与mvc 数据的交互