zoukankan      html  css  js  c++  java
  • ASP.NET 前端Ajax获取数据并刷新

    控制器中↓

            /// <summary>
            /// 根据ID来进行展示数据
            /// </summary>
            /// <param name="instru_id"></param>
            /// <returns></returns>
            public ActionResult About(int instru_id)
            {
                ViewBag.Message = "Your application description page.";
    
                using (DBEntities db = new DBEntities())
                {
                    List<T_Instrument> instru_data_list =
                        (from db_instru in db.T_Tablewhere db_instru.ID == instru_idselect db_instru).Take(50).Skip(0).ToList();
                    if (instru_data_list.Count > 0)
                    {
                        ViewBag.old_id = instru_data_list[0].InstrumentDataID;
                        ViewBag.channel_index = instru_data_list[0].ChannelIndex;
                    }
                    ViewBag.instru_id = instru_id;
                    ViewData["instru_data_list"] = instru_data_list;
                }
                return View();
            }
            /// <summary>
            /// Ajax查询数据
            /// </summary>
            /// <param name="instru_id"></param>
            /// <returns></returns>
            public JsonResult GetData(int instru_id)
            {
                using (StationMonitoringDBEntities db = new StationMonitoringDBEntities())
                {
                    List<T_Instrument> instru_data_list =
                        (from db_instru in db.T_Instrumentwhere db_instru.ID == instru_idselect db_instru).Take(1).Skip(0).ToList();
                    if (instru_data_list.Count > 0)
                    {
                        ViewBag.channel_index = instru_data_list[0].ChannelIndex;
                    }
                    return Json(instru_data_list);
                }
            }

    视图中↓

    @using Domain;//引用的实体类的命名空间
    @{
        ViewBag.Title = "About";
    }
    
    
    @Scripts.Render("~/bundles/jquery")<input type="button" id="btnBegin" name="btnBegin" value="连接数据库<针对实际项目,其它项目不需要这部分>" />
    <input type="text" disabled id="begin_state" value="" />
    <br />
    <input type="text" id="id_msg" name="id_msg" value="要发送的字符串...根据这个字符串会向数据库添加数据 @ViewBag.channel_index" style="display:none;" />
    <input type="button" id="btnSub" name="btnSub" value="数据库添加数据" />
    <input type="text" disabled id="id_send_state" value="" style="display:none;" />
    <input style="display:none;" id="hid_id" value="@ViewBag.old_id" /><table id="_table" border="1" width="960" height="50" align="center" style="text-align:center;font-size:15px;">
        <thead>
            <tr>
                <td>ID</td>
                <td>名称</td>
            </tr>
        </thead>
        <tbody id="_tbody">
            @foreach (JoinInstrumentData jid in ViewData["instru_data_list"] as IEnumerable<JoinInstrumentData>)
            {
                <tr>
                    <td>@jid.ID</td>
                    <td>@jid.Name</td>
                </tr>
            }
        </tbody>
    </table>
    
    
    
    <script type="text/javascript">
    
        $(document).ready(function () {
            Date.prototype.format = function(fmt) { 
                var o = { 
                    "M+" : this.getMonth()+1,                 //月份 
                    "d+" : this.getDate(),                    //
                    "h+" : this.getHours(),                   //小时 
                    "m+" : this.getMinutes(),                 //
                    "s+" : this.getSeconds(),                 //
                    "q+" : Math.floor((this.getMonth()+3)/3), //季度 
                    "S"  : this.getMilliseconds()             //毫秒 
                }; 
                if(/(y+)/.test(fmt)) {
                    fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length)); 
                }
                for(var k in o) {
                    if(new RegExp("("+ k +")").test(fmt)){
                        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
                    }
                }
                return fmt; 
            }
    
    
    
            var interval_id=0;
            //表格用到的变量
            var _table = document.getElementById("_table");
            var _tbody = document.getElementById("_tbody");
    
            //这是一些操作,然后向数据库中添加数据...
            $("#btnSub").click(function () {
                get_data();
                var msg = $("#id_msg").val();
                $.ajax({
                    type: "POST",
                    url: "/Home/sendbutton_Click",
                    data: {
                        "id": "xxxxxx",
                        "msg_send": msg
                    },
                    success: function (sesponseTest) {
                        //alert(sesponseTest);
                        alert("开始添加数据.");
                        $("#id_send_state").val(sesponseTest);
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        $("#id_send_state").val(errorThrown);
                        alert("保存失败:" + errorThrown);
                    }
                });
            });
    
            function get_data() {
                interval_id= setInterval(start_get, 10000);
                //alert(interval_id);
            }
    
            function start_get() {
                //alert("55");
                $.ajax({
                    type: "POST",
                    url: "/Home/GetData",
                    data: {
                        "instru_id": @ViewBag.instru_id,
                    },
                    success: function (json_data) {
    
                        json_data[0].CreateTime = eval('new ' + (json_data[0].CreateTime.replace(///g, '')));
                        json_data[0].CreateTime=new Date(json_data[0].CreateTime).format("yyyy/MM/dd hh:mm:ss");
                        //判断返回的id,如果一致,销毁这个定时器clearInterval(interval_id);
                        var id = json_data[0].InstrumentDataID;
                        var old_id = $("#hid_id").val();
                        //alert("old_id"+old_id);
                        //alert("new_id"+id);
                        if (id != old_id) {
    
                            var _tr = document.createElement("tr");
                            var _td = document.createElement("td");
                            ////var _tab_len =_table.rows.length;
                            _td.appendChild(document.createTextNode(json_data[0].InstrumentTypeName));
                            var row;
                            row=_table.insertRow(1);
                            var cell = row.insertCell(0);
                            var e = document.createElement("tr");
                            cell.appendChild(document.createTextNode(json_data[0].InstrumentTypeName));
                            cell.appendChild(e);
                            //---有待优化...!!!!
                            cell = row.insertCell(1);
                            cell.appendChild(document.createTextNode(json_data[0].InstrumentCode));
                            cell.appendChild(e);
                            clearInterval(interval_id);//销毁定时器
                            $("#hid_id").val(id);
                        }else
                        {
    
                        }
                        //alert(sesponseTest);
                        //$("#id_send_state").val(sesponseTest);
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        //$("#id_send_state").val(errorThrown);
                        alert("保存失败:" + errorThrown);
                    }
                });
            }
    
    
            //连接
            $("#btnBegin").click(function () {
                $.ajax({
                    type: "POST",
                    url: "/Home/conbtn_Click",
                    success: function (sesponseTest) {
                        //alert(sesponseTest);
                        $("#begin_state").val(sesponseTest);
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        //$("#txt1").val(errorThrown);
                        alert("保存失败:" + errorThrown);
                    }
                });
            });
    
    
    
        });
    
    
    </script>
  • 相关阅读:
    error:Unterminated &lt;form:form tag
    error:org.springframework.web.util.NestedServletException: Request processing failed; nested exception is java.lang.NullPointerException
    mvc-dispatchar-servlet.xml文件报错
    修改MySQL密码
    Injection of autowired dependencies failed
    IDEA jsp模板
    jstl的表达式不能解析
    前端学习的小窍门
    Git的使用
    MySql数据库表的查询操作
  • 原文地址:https://www.cnblogs.com/love-zf/p/6558964.html
Copyright © 2011-2022 走看看