zoukankan      html  css  js  c++  java
  • 前台取得后台返回的json数据!

    1、传递的是单个对象类型

    先看后台action方法

    public ActionResult GetValue() 
    { 
    ChangePasswordModel model1 = new ChangePasswordModel(); 
    model1.OldPassword = "111"; 
    model1.NewPassword = "222";
    
       return this.Json(model1);//返回对象到前台
    
    }

    这样返回的model1对象就会传递到result中去,前台可以直接使用result.NewPassword来取值

    如下

    $.ajax( 
    { 
    url: "GetValue", //表示提交给的action 
    type: "post",   //提交方法 
    datatype: "json",//数据类型
    
    success: function (result) { //返回的结果自动放在resut里面了
    
    alert(result.NewPassword); 
    } 
    });

    2、传递的是对象数组也就是List集合,这里演示遍历数据,并异步刷新表格

    后台获取对象集合

    public ActionResult GetValue() 
    {
    
    StudentService studentservice = new StudentService(); 
    string studentlist= studentservice.SelectAll(); 
    return this.Json(studentlist);
    
    }

    前台获取数据并刷新表格

    <script type="text/javascript"> 
    function shuxin() {
    
    $.ajax( 
    { 
    url: "GetValue", 
    type: "post", 
    datatype: "json", 
    success: tableappend(result) //成功则执行表格刷新函数 
    }); 
    } 
     //动态刷新表格 
    function tableappend(result) { 
    var studentlist = eval(result);
    
     for (var i = 0; i < studentlist.length; i++) { 
    //创建tr对象 
     var addtr = document.createElement("tr");
    
    //行中创建三个td对象,并把studentlist中的值赋给它 
    var addtd1 = document.createElement("td"); 
    addtd1.innerHTML = studentlist[i].sanme; 
     var addtd2 = document.createElement("td"); 
     addtd2.innerHTML = studentlist[i].sage; 
     var addtd3 = document.createElement("td"); 
     addtd3.innerHTML = studentlist[i].sex;
    
     //把创建的td对象加入tr中去 
     addtr.appendChild(addtd1); 
     addtr.appendChild(addtd2); 
     addtr.appendChild(addtd3); 
    // 
    //把tr加入table中去 
     document.getElementById("retable").appendChild(addtr); 
     } 
     } 
    </script>

    3、参数传递(另外的代码例子说明)

    对于单个参数传递或者不同对象的参数可以直接使用{"key":value};的方式来传值

     
     $.ajax(
                         {
    
                             url: "update",
    
                             type: "post",
    
                             datatype: "json",
    
                             data:{"room_id":inputobj[0].innerText,"room_name":inputobj[1].innerText,"room_type":inputobj[2].innerText,
    
                                 "room_limittime": inputobj[3].innerText, "username": inputobj[4].innerText, "room_state": inputobj[5].innerText
    
                             }, 
    
                             success: function (result) { //返回的结果自动放在resut里面了
    
                                 if (result) {
    
                                    alter();
    
                                 }
    
                             }
    
                         });

    后台使用 FormContext对象来获得参数

    public ActionResult Update(FormCollection fc) 
    { 
    //获取前段传过来的参数 
    RoomModel room = new RoomModel(); 
    room.RId =Convert.ToInt32(fc["room_id".Trim()]); 
    room.RName = fc["room_name".Trim()]; 
    room.RType = fc["room_type".Trim()]; 
    room.RLendLimitTime = Convert.ToInt32(fc["room_limittime".Trim()]);
    }

    这里看到传递多个参数的时候,前台和后台都很麻烦,能不能像页面表单一样直接可以把model对象给传递回去Controller呢?

    当然这是可以的

    把这些值封装一下就可以了,例如

    <script type="text/javascript"> 
    function shuxin() {
    
    var  model =   { } ; 
    model.NewPassword =   "123" ; 
    model. OldPassword   =   "456" ;
    
    $.ajax( 
    { 
    url: "GetValue", 
    type: "post", 
    datatype: "json",
    
    data:model,//在把这个对象作为参数传过去就可以了 
    success: tableappend(result) //成功则执行表格刷新函数 
    }); 
    }

     在后台 直接把model作为参数 这样值就会都封装给了model对象 

    public ActionResult update(ChangePasswordModel model) 
    { 
      return View(); 
    }

    5、apsx和cshtml

    JS中对JSON的取值方式是一样

    1)mvc4 如何返回Json数据

    public static class ObjectExtentions
        {
            /// <summary>
            ///  为Oject对象增加ToJsonString方法(注意对项目添加Newtonsoft.Json.dll引用)
            /// </summary>
            /// <param name="obj"></param>
            /// <returns></returns>
            public static string ToJsonString(this Object obj)
            {
    
                JsonSerializerSettings jsSettings = new JsonSerializerSettings();
                jsSettings.ReferenceLoopHandling = ReferenceLoopHandling.Ignore;
                return JsonConvert.SerializeObject(obj, jsSettings);
            }
        }

     对你的结果集用一下 return Content(result.ToJsonString());

    2)前台中怎么取它后台返回的数据!

    //绑定数据  
    function BindData(userid) { if (userid != "") { $.getJSON("/System/User/BindUser", { id: userid, randnum: Math.floor(Math.random() * 1000000) }, function (data) { $("#userid").val(data.USERID); $("#txtLoginNo").val(data.LOGINNO); $("#txtPwd").val(data.PASSWORD); $("#txtRePwd").val(data.PASSWORD); $("#txtUserName").val(data.USERNAME); $("#cboGroup").combotree('setValue', data.GROUPID=='0'?'-99':data.GROUPID); $("#txtTel").val(data.TEL); $("#txtMobile").val(data.MOBILE); $("#txtEmail").val(data.EMAIL); $("#txtRemark").val(data.REMARK); $("#cboJobType").combobox('setValue', data.JOBTYPE == null ? '-99' : data.JOBTYPE); $("#cboUserStatus").combobox('setValue', data.USERSTATUS == '0' ? '-99' : data.USERSTATUS); }); } }

    使用淘宝api批量获取商品信息 http://api.taobao.com/apidoc/api.htm?spm=0.0.0.0.CWaYNg&path=cid:4-apiId:315 taobao.items.list.get 批量获取商品信息 淘宝返回的是Item[]类型 比如我需要批量获取到5个宝贝的信息(包含detail_url,num_iid,title3个属性) 如何将这5条数据,以json的格式输出到前台页面,比如输出到文本框中(类似淘宝测试工具中那种)

    获取到的数据用JavaScriptSerializer序列化丢给前台,用Jquery处理

    $.ajax({
     type: "GET",
     url: "http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",//利用ajax请求后台的并返回值
     // data: "json",
     success: function (result) {//result为后台返回的值,是json字符串的形式
     // alert(result);
     var obj = JSON.parse(result);//解析json字符串为json对象形式
     var trStr = '';//动态拼接table
     // var html = '';
     for (var i = 0; i < obj.length; i++) {//循环遍历出json对象中的每一个数据并显示在对应的td中
     trStr += '<tr class="example">';//拼接处规范的表格形式
     trStr += '<td width="15%" style="display:none" id="user">' + obj[i].NVFID + '</td>';//数据表的主键值
     trStr += '<td width="15%">' + obj[i].USERCODE + '</td>';//对应数组表的字段值
     trStr += '<td width="15%">' + obj[i].USERNAME + '</td>';
     trStr += '<td width="15%">' + obj[i].USERPWD + '</td>';
     trStr += '<td>' + obj[i].PHONEIMEI + '</td>';
     trStr += '<td>' + obj[i].BMMC + '</td>';
     /*经典之处,要将主键对应的值以json的形式进行传递,才能在后台使用*/
     trStr += "<td><a href='#'style='text-decoration:none' onclick='Delete("" + obj[i].NVFID + "")'>删除</a><td>";
     trStr += '</tr>';  
     } 
     $("#tbody").html(trStr);//运用html方法将拼接的table添加到tbody中return;
     },
     error: function (error) {
     alert(error);
     }
     });

    或者

    $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?", function(data){
    $.each(data.items, function(i,item){
    $("<img/>").attr("src", item.media.m).appendTo("#images");
    if ( i == 3 ) return false;
    });
    });   

    循环可以用 jQuery .tmpl()

  • 相关阅读:
    JQuery实现1024小游戏
    Windows Server2008 R2安装wampserver缺少api-ms-win-crt-runtime-l1-1-0.dll解决方案
    ASP.NET MVC 邮件发送的功能(微软邮箱发送)。
    浅谈撞库防御策略
    极验高并发验证服务背后的技术实现
    2015年国内数据安全事件盘点
    转载——验证码的昨天、今天和明天
    转载——最近百度云盘不提供搜索,闲来无事,玩玩python爬虫,爬一下百度云盘的资源
    SQL 查询语句
    SQL Server 目录
  • 原文地址:https://www.cnblogs.com/netalen/p/6688526.html
Copyright © 2011-2022 走看看