Ajax实现无刷新的获取数据并绑定到GridView,以及无刷新更新数据
首先是获得数据并绑定好GridView
客户端javascript代码:
1
function GetPersonnelKPIStep()
2
{
3
4
var sId=GetParam("c_id");
5
6
document.getElementById("hId").value=sId;
7
8
var xmlhttp = new ActiveXObject("MSXML2.XMLHTTP");
9
xmlhttp.Open("post","FmPersonnelKPIData.aspx?MethodName=GetPersonnelKPIStep&c_id="+sId+"&c_sort=",false);
10
xmlhttp.Send();
11
var sGridContent=xmlhttp.responseText;
12
13
var iStart=sGridContent.indexOf("<table");
14
var iEnd=sGridContent.indexOf("</table>");
15
document.getElementById("divStep").innerHTML= sGridContent.substring(iStart,iEnd+8);
16
}
因为GirdView最后会翻译成Table在浏览器上显示,所以我只要获得返回流中的Table并将其赋给div的innerHTML属性即可![](/Images/OutliningIndicators/None.gif)
2
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
3
![](/Images/OutliningIndicators/InBlock.gif)
4
![](/Images/OutliningIndicators/InBlock.gif)
5
![](/Images/OutliningIndicators/InBlock.gif)
6
![](/Images/OutliningIndicators/InBlock.gif)
7
![](/Images/OutliningIndicators/InBlock.gif)
8
![](/Images/OutliningIndicators/InBlock.gif)
9
![](/Images/OutliningIndicators/InBlock.gif)
10
![](/Images/OutliningIndicators/InBlock.gif)
11
![](/Images/OutliningIndicators/InBlock.gif)
12
![](/Images/OutliningIndicators/InBlock.gif)
13
![](/Images/OutliningIndicators/InBlock.gif)
14
![](/Images/OutliningIndicators/InBlock.gif)
15
![](/Images/OutliningIndicators/InBlock.gif)
16
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
服务端代码:
1
protected void Page_Load(object sender, EventArgs e)
2
{
3
if (!IsPostBack)
4
{
5
if (sMethodName == "GetPersonnelKPIStep")
6
{
7
GetPersonnelKPIStep(sId, Request.QueryString["c_sort"].ToString());
8
}
9
}
![](/Images/OutliningIndicators/None.gif)
2
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
3
![](/Images/OutliningIndicators/InBlock.gif)
4
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
5
![](/Images/OutliningIndicators/InBlock.gif)
6
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
7
![](/Images/OutliningIndicators/InBlock.gif)
8
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
9
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
1
public void GetPersonnelKPIStep(string sId, string sSort)
2
{
3
CWSHr cwsHr = new CWSHr();
4
_DateNum = cwsHr.GetPersonnelKPIDateNum(sId);
5
_kpiDatetime = cwsHr.GetPersonnelKPIDateTime(sId);
6
if (_kpiDatetime == null || _kpiDatetime.Length != 2)
7
return;
8![](/Images/OutliningIndicators/InBlock.gif)
9
_StartDate = Convert.ToDateTime(_kpiDatetime[0]);
10![](/Images/OutliningIndicators/InBlock.gif)
11
DataSet ds= cwsHr.GetPersonnelKPIStep(sId,sSort);
12
GV_Step.DataSource = ds.Tables[0].DefaultView;
13
GV_Step.DataBind();
14
}
在服务端获得并绑定数据到GridView![](/Images/OutliningIndicators/None.gif)
2
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
3
![](/Images/OutliningIndicators/InBlock.gif)
4
![](/Images/OutliningIndicators/InBlock.gif)
5
![](/Images/OutliningIndicators/InBlock.gif)
6
![](/Images/OutliningIndicators/InBlock.gif)
7
![](/Images/OutliningIndicators/InBlock.gif)
8
![](/Images/OutliningIndicators/InBlock.gif)
9
![](/Images/OutliningIndicators/InBlock.gif)
10
![](/Images/OutliningIndicators/InBlock.gif)
11
![](/Images/OutliningIndicators/InBlock.gif)
12
![](/Images/OutliningIndicators/InBlock.gif)
13
![](/Images/OutliningIndicators/InBlock.gif)
14
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
获得xml格式的数据:
服务端代码:
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
客户端代码:
1
var xmlhttp = new ActiveXObject("MSXML2.XMLHTTP");
2
xmlhttp.Open("post","FmPersonnelKPIData.aspx?MethodName=GetPersonnelKPIStepOne&c_id="+sId+"&c_sort="+sSort,false);
3
xmlhttp.Send();
4
var sGridContent=xmlhttp.responseText;
5
6
//alert(sGridContent);
7
var xmlDom=new ActiveXObject("MSXML2.DOMDocument");
8
xmlDom.loadXML(xmlhttp.responseText);
9
var nodes=xmlDom.selectSingleNode("//NewDataSet/Table").childNodes;
10
if (nodes != null)
11
{
12
for (var i=0;i<nodes.length;i++)
13
{
14
if (nodes[i].nodeName=="c_sort")
15
document.getElementById("ETBSort").value=nodes[i].text;
16
else if (nodes[i].nodeName=="c_type")
17
document.getElementById("ETBType").value=nodes[i].text;
18
else if (nodes[i].nodeName=="c_item")
19
document.getElementById("ETBKpi").value=nodes[i].text;
20
else if (nodes[i].nodeName=="c_st_dt")
21
document.getElementById("ETB_StDt").value=nodes[i].text.substring(0,nodes[i].text.indexOf("T"));
22
else if (nodes[i].nodeName=="c_en_dt")
23
document.getElementById("ETB_EnDt").value=nodes[i].text.substring(0,nodes[i].text.indexOf("T"));
24
else if (nodes[i].nodeName=="c_st_dt_fact")
25
document.getElementById("ETB_StFDt").value=nodes[i].text.substring(0,nodes[i].text.indexOf("T"));
26
else if (nodes[i].nodeName=="c_en_dt_fact")
27
document.getElementById("ETB_EnFDt").value=nodes[i].text.substring(0,nodes[i].text.indexOf("T"));
28
else if (nodes[i].nodeName=="c_result")
29
document.getElementById("ETBFact").value=nodes[i].text;
30
else if (nodes[i].nodeName=="c_propotion")
31
document.getElementById("ETBPropotion").value=nodes[i].text;
32
else if (nodes[i].nodeName=="c_score")
33
document.getElementById("ETBScore").value=nodes[i].text;
34
35
}
36
}
注意以上获取时间中日期部分的处理![](/Images/OutliningIndicators/None.gif)
2
![](/Images/OutliningIndicators/None.gif)
3
![](/Images/OutliningIndicators/None.gif)
4
![](/Images/OutliningIndicators/None.gif)
5
![](/Images/OutliningIndicators/None.gif)
6
![](/Images/OutliningIndicators/None.gif)
7
![](/Images/OutliningIndicators/None.gif)
8
![](/Images/OutliningIndicators/None.gif)
9
![](/Images/OutliningIndicators/None.gif)
10
![](/Images/OutliningIndicators/None.gif)
11
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
12
![](/Images/OutliningIndicators/InBlock.gif)
13
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
14
![](/Images/OutliningIndicators/InBlock.gif)
15
![](/Images/OutliningIndicators/InBlock.gif)
16
![](/Images/OutliningIndicators/InBlock.gif)
17
![](/Images/OutliningIndicators/InBlock.gif)
18
![](/Images/OutliningIndicators/InBlock.gif)
19
![](/Images/OutliningIndicators/InBlock.gif)
20
![](/Images/OutliningIndicators/InBlock.gif)
21
![](/Images/OutliningIndicators/InBlock.gif)
22
![](/Images/OutliningIndicators/InBlock.gif)
23
![](/Images/OutliningIndicators/InBlock.gif)
24
![](/Images/OutliningIndicators/InBlock.gif)
25
![](/Images/OutliningIndicators/InBlock.gif)
26
![](/Images/OutliningIndicators/InBlock.gif)
27
![](/Images/OutliningIndicators/InBlock.gif)
28
![](/Images/OutliningIndicators/InBlock.gif)
29
![](/Images/OutliningIndicators/InBlock.gif)
30
![](/Images/OutliningIndicators/InBlock.gif)
31
![](/Images/OutliningIndicators/InBlock.gif)
32
![](/Images/OutliningIndicators/InBlock.gif)
33
![](/Images/OutliningIndicators/InBlock.gif)
34
![](/Images/OutliningIndicators/InBlock.gif)
35
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
36
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
无刷新更新数据:
1
var xmldoc = new ActiveXObject("MSXML2.DOMDocument");
2
var xmlhttp = new ActiveXObject("MSXML2.XMLHTTP");
3
xmldoc.loadXML("");
4
5
newNode1 = xmldoc.createElement("NewDataSet");
6
xmldoc.appendChild(newNode1);
7
newNode2 = xmldoc.createElement("tb_o_k_task");
8
newNode1.appendChild(newNode2);
9
10
newNode = xmldoc.createElement("c_id");
11
newNode.text = document.getElementById('hId').value;
12
newNode2.appendChild(newNode);
13
14
newNode = xmldoc.createElement("c_sort");
15
newNode.text = document.getElementById('ETBSort').value;
16
newNode2.appendChild(newNode);
17
18
newNode = xmldoc.createElement("c_item");
19
newNode.text = document.getElementById('ETBKpi').value;
20
newNode2.appendChild(newNode);
21
22
newNode = xmldoc.createElement("c_type");
23
newNode.text = document.getElementById('ETBType').value;
24
newNode2.appendChild(newNode);
25![](/Images/OutliningIndicators/None.gif)
26
newNode = xmldoc.createElement("c_st_dt");
27
newNode.text = document.getElementById('ETB_StDt').value;
28
newNode2.appendChild(newNode);
29
30
newNode = xmldoc.createElement("c_en_dt");
31
newNode.text = document.getElementById('ETB_EnDt').value;
32
newNode2.appendChild(newNode);
33
34
newNode = xmldoc.createElement("c_st_dt_fact");
35
newNode.text = document.getElementById('ETB_StFDt').value;
36
newNode2.appendChild(newNode);
37
38
newNode = xmldoc.createElement("c_en_dt_fact");
39
newNode.text = document.getElementById('ETB_EnFDt').value;
40
newNode2.appendChild(newNode);
41
42
newNode = xmldoc.createElement("c_propotion");
43
newNode.text = document.getElementById('ETBPropotion').value;
44
newNode2.appendChild(newNode);
45
46
newNode = xmldoc.createElement("c_result");
47
newNode.text = document.getElementById('ETBFact').value;
48
newNode2.appendChild(newNode);
49
50
newNode = xmldoc.createElement("c_score");
51
newNode.text = document.getElementById('ETBScore').value;
52
newNode2.appendChild(newNode);
53
54
xmlhttp.Open("post", "FmPersonnelKPIData.aspx?MethodName=SavePersonnelKPIStep"+"&sAct="+escape(sAct), false);
55
xmlhttp.setRequestHeader("Content-Type","text/xml");
56
xmlhttp.send(xmldoc.xml);
57![](/Images/OutliningIndicators/None.gif)
首先将要更新的数据构造成一个xml对象,再将这个xml对象做为xmlhttp.send()的参数传给服务端![](/Images/OutliningIndicators/None.gif)
2
![](/Images/OutliningIndicators/None.gif)
3
![](/Images/OutliningIndicators/None.gif)
4
![](/Images/OutliningIndicators/None.gif)
5
![](/Images/OutliningIndicators/None.gif)
6
![](/Images/OutliningIndicators/None.gif)
7
![](/Images/OutliningIndicators/None.gif)
8
![](/Images/OutliningIndicators/None.gif)
9
![](/Images/OutliningIndicators/None.gif)
10
![](/Images/OutliningIndicators/None.gif)
11
![](/Images/OutliningIndicators/None.gif)
12
![](/Images/OutliningIndicators/None.gif)
13
![](/Images/OutliningIndicators/None.gif)
14
![](/Images/OutliningIndicators/None.gif)
15
![](/Images/OutliningIndicators/None.gif)
16
![](/Images/OutliningIndicators/None.gif)
17
![](/Images/OutliningIndicators/None.gif)
18
![](/Images/OutliningIndicators/None.gif)
19
![](/Images/OutliningIndicators/None.gif)
20
![](/Images/OutliningIndicators/None.gif)
21
![](/Images/OutliningIndicators/None.gif)
22
![](/Images/OutliningIndicators/None.gif)
23
![](/Images/OutliningIndicators/None.gif)
24
![](/Images/OutliningIndicators/None.gif)
25
![](/Images/OutliningIndicators/None.gif)
26
![](/Images/OutliningIndicators/None.gif)
27
![](/Images/OutliningIndicators/None.gif)
28
![](/Images/OutliningIndicators/None.gif)
29
![](/Images/OutliningIndicators/None.gif)
30
![](/Images/OutliningIndicators/None.gif)
31
![](/Images/OutliningIndicators/None.gif)
32
![](/Images/OutliningIndicators/None.gif)
33
![](/Images/OutliningIndicators/None.gif)
34
![](/Images/OutliningIndicators/None.gif)
35
![](/Images/OutliningIndicators/None.gif)
36
![](/Images/OutliningIndicators/None.gif)
37
![](/Images/OutliningIndicators/None.gif)
38
![](/Images/OutliningIndicators/None.gif)
39
![](/Images/OutliningIndicators/None.gif)
40
![](/Images/OutliningIndicators/None.gif)
41
![](/Images/OutliningIndicators/None.gif)
42
![](/Images/OutliningIndicators/None.gif)
43
![](/Images/OutliningIndicators/None.gif)
44
![](/Images/OutliningIndicators/None.gif)
45
![](/Images/OutliningIndicators/None.gif)
46
![](/Images/OutliningIndicators/None.gif)
47
![](/Images/OutliningIndicators/None.gif)
48
![](/Images/OutliningIndicators/None.gif)
49
![](/Images/OutliningIndicators/None.gif)
50
![](/Images/OutliningIndicators/None.gif)
51
![](/Images/OutliningIndicators/None.gif)
52
![](/Images/OutliningIndicators/None.gif)
53
![](/Images/OutliningIndicators/None.gif)
54
![](/Images/OutliningIndicators/None.gif)
55
![](/Images/OutliningIndicators/None.gif)
56
![](/Images/OutliningIndicators/None.gif)
57
![](/Images/OutliningIndicators/None.gif)
服务端代码:
1
public void SavePersonnelKPIStep(string sAct)
2
{
3
System.IO.Stream instream = Page.Request.InputStream;
4
BinaryReader br = new BinaryReader(instream, System.Text.Encoding.UTF8);
5
byte[] byt = br.ReadBytes((int)instream.Length);
6
string sXml = System.Text.Encoding.UTF8.GetString(byt);
7![](/Images/OutliningIndicators/InBlock.gif)
8
System.Xml.XmlDocument xmlDoc = new System.Xml.XmlDocument();
9
xmlDoc.LoadXml(sXml);
10![](/Images/OutliningIndicators/InBlock.gif)
11
string sid = xmlDoc.SelectSingleNode("//NewDataSet/tb_o_k_task/c_id").InnerText;
12
string ssort = xmlDoc.SelectSingleNode("//NewDataSet/tb_o_k_task/c_sort").InnerText;
13
string sitem = xmlDoc.SelectSingleNode("//NewDataSet/tb_o_k_task/c_item").InnerText;
14
string stype = xmlDoc.SelectSingleNode("//NewDataSet/tb_o_k_task/c_type").InnerText;
15
string sstdt = xmlDoc.SelectSingleNode("//NewDataSet/tb_o_k_task/c_st_dt").InnerText;
16
string sendt = xmlDoc.SelectSingleNode("//NewDataSet/tb_o_k_task/c_en_dt").InnerText;
17
string sstfdt = xmlDoc.SelectSingleNode("//NewDataSet/tb_o_k_task/c_st_dt_fact").InnerText;
18
string senfdt = xmlDoc.SelectSingleNode("//NewDataSet/tb_o_k_task/c_en_dt_fact").InnerText;
19
string spropotion = xmlDoc.SelectSingleNode("//NewDataSet/tb_o_k_task/c_propotion").InnerText;
20
string sresult = xmlDoc.SelectSingleNode("//NewDataSet/tb_o_k_task/c_result").InnerText;
21
string sScore = xmlDoc.SelectSingleNode("//NewDataSet/tb_o_k_task/c_score").InnerText;
22![](/Images/OutliningIndicators/InBlock.gif)
23
spropotion = (spropotion == "" ? "1" : spropotion);
24![](/Images/OutliningIndicators/InBlock.gif)
25
CWSHr cwsHr = new CWSHr();
26![](/Images/OutliningIndicators/InBlock.gif)
27
if (sAct == "修改")
28
{
29
string soldsort = xmlDoc.SelectSingleNode("//NewDataSet/tb_o_k_task/c_oldsort").InnerText;
30
cwsHr.UpdatePersonnelKPIStep(sid, soldsort, ssort, sitem, stype, sstdt,sendt,sstfdt,senfdt, spropotion, sresult,sScore);
31
}
32
else if (sAct == "新增")
33
{
34
cwsHr.SaveNewPersonnelKPIStep(sid, ssort, sitem, stype, sstdt, sendt, sstfdt, senfdt, spropotion, sresult);
35
}
36![](/Images/OutliningIndicators/InBlock.gif)
37
}
上面代码的3-6行是获得从客户端传过来的xml.
![](/Images/OutliningIndicators/None.gif)
2
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
3
![](/Images/OutliningIndicators/InBlock.gif)
4
![](/Images/OutliningIndicators/InBlock.gif)
5
![](/Images/OutliningIndicators/InBlock.gif)
6
![](/Images/OutliningIndicators/InBlock.gif)
7
![](/Images/OutliningIndicators/InBlock.gif)
8
![](/Images/OutliningIndicators/InBlock.gif)
9
![](/Images/OutliningIndicators/InBlock.gif)
10
![](/Images/OutliningIndicators/InBlock.gif)
11
![](/Images/OutliningIndicators/InBlock.gif)
12
![](/Images/OutliningIndicators/InBlock.gif)
13
![](/Images/OutliningIndicators/InBlock.gif)
14
![](/Images/OutliningIndicators/InBlock.gif)
15
![](/Images/OutliningIndicators/InBlock.gif)
16
![](/Images/OutliningIndicators/InBlock.gif)
17
![](/Images/OutliningIndicators/InBlock.gif)
18
![](/Images/OutliningIndicators/InBlock.gif)
19
![](/Images/OutliningIndicators/InBlock.gif)
20
![](/Images/OutliningIndicators/InBlock.gif)
21
![](/Images/OutliningIndicators/InBlock.gif)
22
![](/Images/OutliningIndicators/InBlock.gif)
23
![](/Images/OutliningIndicators/InBlock.gif)
24
![](/Images/OutliningIndicators/InBlock.gif)
25
![](/Images/OutliningIndicators/InBlock.gif)
26
![](/Images/OutliningIndicators/InBlock.gif)
27
![](/Images/OutliningIndicators/InBlock.gif)
28
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
29
![](/Images/OutliningIndicators/InBlock.gif)
30
![](/Images/OutliningIndicators/InBlock.gif)
31
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
32
![](/Images/OutliningIndicators/InBlock.gif)
33
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
34
![](/Images/OutliningIndicators/InBlock.gif)
35
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
36
![](/Images/OutliningIndicators/InBlock.gif)
37
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)