美文网首页
jquery异步请求数据

jquery异步请求数据

作者: buguge | 来源:发表于2017-06-19 19:32 被阅读102次

    工具类语言真就是这样,当长时间不写,就忘的差不多了。 昨晚做了运营辅助的webform页面,兴致来了,通过ajax请求与后端交互,然后今天在一个小同学的帮助下,最终完成。
    由于生产环境数据量大,涉及到分页。不想再折腾了,还是改成同步的吧。
    我有怀旧情怀,在代码重构之前,做个小小记录~~

    asp.net webform view

    html:

    <body>
        <div id="Div1" class="tableExcel">
            <div id="Div2" class="input">
    
                订单号:<input type="text" id="orderNo" name="orderNo" />   
    
                日期:<input type="text" id="startTime" name="startTime" readonly="readonly" class="runcode" style="width:100px" />
    
                关键字:<input type="text" id="keyword" name="keyword" class="runcode" />   
    
                分类:<select id="logFlag" name="logFlag" class="runcode" style="width:120px;"/> 
    
                <input type="button" id="btnSearch" value="查询" class="icon" />
    
            </div>
            <div class="table">
                <table border="0" id="OrderList" cellspacing="0" cellpadding="0">
                    <tr class="th">
                        <th>时间
                        </th>
                        <th>logflag
                        </th>
                        <th>订单号
                        </th>
                        <th>duration</th>
                        <th>响应报文
                        </th>
                    </tr>
                </table>
            </div>
        </div>
    </body>
    

    js:

    <script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="../Scripts/lhgcalendar/lhgcore.lhgcalendar.min.js"></script>
    
    <script type="text/javascript">
        Date.prototype.Format = function (fmt) { //author: meizz 
            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;
        }
    
        $(function () {
            $("#startTime").val(new Date().Format("yyyy-MM-dd"));
    
            $("#startTime").bind("click", function () {
                $.calendar({ format: 'yyyy-MM-dd', noToday: false });
            });
    
            $.ajax({
                url: "RequestLog.aspx/GetItem",    //后台webservice里的方法名称  
                type: "post",
                dataType: "json",
                contentType: "text/json",
                traditional: true,
                success: function (data) {
                    var json = eval(data);
                    var optionstring = "";
                    for (var j = 0; j < json.length; j++) {
                        optionstring += "<option value=\"" + json[j] + "\" >" + json[j] + "</option>";
                    }
                    $("#logFlag").html("<option value=''>请选择...</option> " + optionstring);
    
                },
                //error: function (msg) {
                //    alert(msg);
                //}
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(textStatus);
                }
            });
    
            $("#btnSearch").click(function () {
                $.ajax({
                    type: "POST",
                    dataType: "text/html",
                    url: "RequestLog.aspx",
                    data: {
                        logFlag: $("#logFlag").val(),
                        orderNo: $("#orderNo").val(),
                        startTime: $("#startTime").val(),
                        keyword: $("#keyword").val()
                    },
                    success: function (result) {
                        $("#OrderList").find(".th").nextAll().remove();
                        $("#OrderList").children().append(result);
    
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(errorThrown);
                        return false;
                    }
                });
            });
        })
    </script>
    

    后台.cs代码:

    public partial class RequestLog : System.Web.UI.Page
    {
        PaycenterRequestsBLL bll = new PaycenterRequestsBLL();
        protected void Page_Load(object sender, EventArgs e)
        {
           
            //Response.Write(Request.Url.ToString());
            if (Request.Url.ToString().IndexOf("/GetItem") != -1)
            {
                Response.ContentType = "text/json";
                Response.Clear();
                string str = new PaycenterRequestsBLL().GetLogFlagJson();
                Response.Write(str);
                Response.End();
            }
    
            string keyword = Request.Form["keyword"];
            string logFlag = Request.Form["logFlag"];
            string orderNo = Request.Form["orderNo"];
            string startTime = Request.Form["startTime"];
    
            if (!string.IsNullOrEmpty(orderNo + keyword + logFlag + startTime))
            {
                var list = bll.GetList(DateTime.Parse(startTime), logFlag, orderNo, keyword);
                string htmlFormat = "<tr class=\"td\"><td>{0}</td><td>{1}</td><td>{2}</td><td align=right>{3}</td><td align=left>{4}</td></tr>";
                string html = "";
                if (!list.Any())
                {
                    html = "<tr><td colspan=5>no data</td></tr>";
                }
                else
                {
                    foreach (var item in list)
                    {
                        html += string.Format(htmlFormat, item.CreatedTime,
                          item.LogFlag,
                          item.OrderNo,
                          item.DurationMilliSeconds,
                          item.ResponseMsg);
                    }
                }
                Response.Write(html);
                Response.End();
            }
        }
    }

    相关文章

      网友评论

          本文标题:jquery异步请求数据

          本文链接:https://www.haomeiwen.com/subject/kurnqxtx.html