js与mvc 数据的交互

原创 2014年12月28日 19:45:36

   在做考试系统中,遇到最头疼的问题,就是前台与后台的交互。对于使用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="../../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 = eval(data);
                //var jsData = (new Function("", "return " + data))();
                $('#dg').datagrid('loadData', data);
            }
        });
        return;
    }
    //如果查询框里面没有内容  则重新加载表格
    $('#dg').datagrid("load", "/QuestionType/QueryQuestionTypeData");

}


提交数据的时候:url里面写  /控制器名称/Action方法名。

POST向后台提交表单:

//进行查询
function doSearch(value) {
    var flag=(value != "");
    if (flag) {
        //提交查询表单
    	$('#searchContent').form({
        	url: "/QuestionType/FuzzyQueryQuestionType",
        	onSubmit: function () {
            	//进行表单验证
            	//如果返回false阻止提交
        	},
        	success: function (data) {
            	//var jsondata = JSON.parse(data); //必须转换成json对象,否则异常! rows is undefined
            	var jsondata = eval(data);
       	     	$('#dg').datagrid("loadData", jsondata);
         	//$('#dg').datagrid("reload");
        	}
    	});
    	//提交表单
    	$('#searchContent').submit();
    }
    //如果查询框里面没有内容  则重新加载表格
    $('#dg').datagrid("load", "/QuestionType/QueryQuestionTypeData");
}


 

表单内容:

<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 = questionTypeService.FuzzyQueryQuestionType(strLike,pageSize,pageIndex,out total);

            var data = new
            {
                total,
                rows = listData
            };
            return Json(data, JsonRequestBehavior.AllowGet);

        } 


后台返回类型为JSON串,前台需要根据返回值 在刷新自己的表格。

所以用到了loadData 和load方法。

 

前台在利用后台传回的json串的时候,有可能出现以下错。

 

easyui里面的gridview控件。

刷新数据,有两种方式。

   第一种方法 : $('#dg').datagrid("load", "/QuestionType/QueryQuestionTypeData"); 

       第二个参数为url,所以这个刷新 需要重新去后台查询。

 

   第二种方法:$('#dg').datagrid("loadData", jsonData);

       第二个参数,是后台传回来的JSON串,可以直接利用该数据 绑定到表格。

 

   这里需要注意一点,gridview重新加载数据的时候,使用的JSON数据格式的数据,而不是JSON格式的字符串。

前台和后台跑通一条线,就容易多了。

 

版权声明:本文为博主原创文章,未经博主允许不得转载。

【MongoDB 可视化工具Robomongo】下载与安装

Robomongo是mongoDB数据库的可视化工具。 下载地址:http://www.newasp.net/soft/75669.html#downloaded,如下在不到可以留言找我要。 ...

React学习之进阶ref的必要性(十三)

在一般的数据流中也就是从上而下的单向数据流中,我们一般都是父组件要影响控制子组件必须要通过props来处理,即便是之前讲过this.state,但是那个东西也是针对自己的,而不是增对其它组件的,组件之...

Spring MVC 前后台数据交互

服务端数据到客户端 返回页面,Controller中方法返回String,String对应的是view的位置,如果需要携带数据通过model(相当于一个Map)传递到view, view中使用jst...

android和js的交互,互相传递数据

  • 2016年12月29日 11:17
  • 98KB
  • 下载

纯手工js数据交互

  • 2014年09月05日 10:59
  • 15.72MB
  • 下载

Spring MVC - 上傳圖片, JSON数据交互 ,RESTful 支持

1.上传图片        springmvc中对多部件(multipart)类型解析,在页面from中提交enctype="multipart/form-data" 的数据时,需要springmv...

NEJ & Spring MVC 前后端数据交互

GET:@RequestMapping(value = "/searchinnercat", method = RequestMethod.GET) @ResponseBody pub...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js与mvc 数据的交互
举报原因:
原因补充:

(最多只允许输入30个字)