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>
  • 相关阅读:
    剑指 Offer 05. 替换空格
    28. 实现 strStr()
    67. 二进制求和
    排序算法之二快速排序
    排序算法之一冒泡排序
    将本地文件上传到GitHub
    spring data jpa 操作pipelinedb 的continuous view 与stream
    pipelinedb学习笔记
    PostgreSQL 、springboot 、spring data jpa 集成
    pipelineDB学习笔记-2. Stream (流)
  • 原文地址:https://www.cnblogs.com/KKSoft/p/7155711.html
Copyright © 2011-2022 走看看