zoukankan      html  css  js  c++  java
  • MVC使用ajax取得JSon数据

        为了在view中获取模型中的数据,用ajax异步模式读取数据,再用json返回的view中。

    1.controller中:

    [HttpPost]
            public ActionResult GetAjaxData()
            {
                List<ADDaAn> daList = new List<ADDaAn>();
                daList = db.ADDaAns.ToList();
    
                return this.Json(daList);
            }

    2.View中jquery:

    <script type="text/javascript">
        $(function(){
           $("#div1").hide(); //先让div隐藏
           $("#span1").click(function(){
               $("#div1").fadeIn("slow");//淡入淡出效果 显示div
               $.ajax({
                   type: "POST",
                   contentType: "application/json",
                   url: "GetAjaxData",
                   data: "{}",
                   dataType: 'json',
                   success: function (result) {
                       var jlist = eval(result)
                       for (var i = 0; i < jlist.length; i++) {
                           //将返回数据添加到页面表格中  
                           //行中创建三个td对象,并把studentlist中的值赋给它
                           var addtr = document.createElement("tr");
                           var addtd1 = document.createElement("td");
                           addtd1.innerHTML = jlist[i].daXiaoTi;
                           var addtd2 = document.createElement("td");
                           addtd2.innerHTML = jlist[i].daContent;
    
                           //把创建的td对象加入tr中去
                           addtr.appendChild(addtd1);
                           addtr.appendChild(addtd2);
                           // 
                           //把tr加入table中去
                           document.getElementById("datable").appendChild(addtr);
                       }
                   }
               });
    
           });
           $("#span2").click(function(){
              $("#div1").fadeOut("slow");//淡入淡出效果 隐藏div
           })
        });
    </script>

    3.View中 html部分:

           <tr><td>
                 <table id="datable"></table>
               </td>
            </tr>
  • 相关阅读:
    CSS揭秘三(形状)
    CSS揭秘(二背景与边框)
    js数组去重
    Iterator
    ES6数据结构set
    JS浏览器对象(BOM)
    JS 数据类型转换
    js的cookie,localStorage,sessionStorage
    (html+css)云道首页
    蓝桥杯-基础练习 01字串-C语言-5层循环法
  • 原文地址:https://www.cnblogs.com/KKSoft/p/7155711.html
Copyright © 2011-2022 走看看