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