AJAX代码示例(不使用AJAX控件)
<script type="text/javascript"> function btnClick() { var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //创建XMLHTTP对象,相当于WebClient if (!xmlHttp) { alert("创建xmlHttp异常!"); return false; } xmlHttp.open("POST", "GetTime.ashx?t=" + new Date(), false); //准备向服务器的GetDate1.ashx发出POST请求 xmlHttp.onreadystatechange = function () { if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { document.getElementById("Text1").value = xmlHttp.responseText; } else { alert("AJAX返回错误!"); } } } xmlHttp.send(); } </script>
使用JQuery实现AJAX效果:
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> function btnClick() { $.post("GetTime.ashx", function (data, status) { $("#Text1").val(status); }); } </script> <input id="Text1" type="text" value="初始值" /> <input id="Button1" type="button" value="button" onclick="btnClick()" />
不用服务端控件:
服务端控件是asp.netWebForm程序在服务端操作页面的时候使用的,不需要的时候就不使用。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $.post("ShowMsg.ashx", function (data, status) { if (status == "success") { var tableTop = $("<tr><td>序号序号</td><td>内容</td><td>时间</td></tr>"); $("#tableComment").append(tableTop); var lines = data.split("$"); for (var i = 0; i < lines.length; i++) { var fields = lines[i].split("|"); // var comm = $("<li>" + fields[0] + " " + fields[1] + " " + fields[2] + "</li>") var tableComm = $("<tr><tb>" + fields[0] + "</tb><tb>" + fields[1] + "</tb><tb>" + fields[2] + "</tb></tr>"); $("#tableComment").append(tableComm); //$("#pinglun").append(comm); } //$("#TextArea1").val(data); } else { $("#TextArea1").val("加载失败!"); } }); }); </script> </head> <body> <textarea id="TextArea1" cols="20" rows="2"></textarea> <!--<ul id="pinglun"> <li>序号 评论内容 时间 </li> </ul>--> <table id="tableComment"> <tr><td>序号序号</td><td>内容</td><td>时间</td></tr> </table> </body> </html> 使用Repeater显示评论内容 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ShowMsg.aspx.cs" Inherits="WebApplicationAJAX.ShowMsg1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" DeleteMethod="Delete" InsertMethod="Insert" OldValuesParameterFormatString="original_{0}" SelectMethod="GetData" TypeName="WebApplicationAJAX.NoRefreshTableAdapters.T_PostMsgTableAdapter" UpdateMethod="Update"> <DeleteParameters> <asp:Parameter Name="Original_Id" Type="Int32" /> </DeleteParameters> <InsertParameters> <asp:Parameter Name="IpAddr" Type="String" /> <asp:Parameter Name="Msg" Type="String" /> <asp:Parameter Name="PostDate" Type="DateTime" /> </InsertParameters> <UpdateParameters> <asp:Parameter Name="IpAddr" Type="String" /> <asp:Parameter Name="Msg" Type="String" /> <asp:Parameter Name="PostDate" Type="DateTime" /> <asp:Parameter Name="Original_Id" Type="Int32" /> </UpdateParameters> </asp:ObjectDataSource> <asp:Repeater ID="Repeater1" runat="server" DataSourceID="ObjectDataSource1"> <HeaderTemplate><table><tr><td>评论内容</td><td>提交日期</td><td>用户Ip</td></tr></HeaderTemplate> <FooterTemplate></table></FooterTemplate> <ItemTemplate> <tr><td><%#Eval("Msg")%></td><td><%#Eval("PostDate")%></td><td><%#Eval("IpAddr")%></td></tr> </ItemTemplate> </asp:Repeater> </form> </body> </html>
问题:
在使用JavaScript调用一般处理程序的结果拼接table的时候,拼接的头部无法显示到最上方而是显示到了table的下方。
应该考虑研究的问题:使用JQuery+JavaScript对Html进行动态生成的时候,标签的写法以及添加标签的顺序。