分享js与mvc数据的交互实例教程

时间：2014-12-29 编辑：简简单单来源：一聚教程网

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

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

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

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

JS向后台提交数据方法：

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

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

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

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

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

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

代码如下	复制代码

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");
}

表单内容：

代码如下	复制代码
@* 1、加载搜索框@ @{Html.RenderPartial("../../Views/ControlsPartial/SearchboxPartial");} @速度慢不用@Html.Partial("../../Views/ControlsPartial/SearchboxPartial")*@

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 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格式的字符串。

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

上一个： jquery中AJAX提交from表单的例子
下一个：分享PHPCMS出现无法登录、注册解决办法

推荐专题

最新下载

热门教程

分享js与mvc数据的交互实例教程

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程