使用 AJAX，局部刷新 GridView 进行数据绑定的简单实现_jquery ajax刷新gridview数据源-优快云博客

本文介绍了一种使用Ajax实现局部刷新GridView的方法，通过简单的代码示例展示了如何根据不同项目查询并显示数据。具体包括了创建数据源、响应请求、数据绑定等关键步骤。

本人最近在學習Ajax之中看見【孟子E章】有這樣的一篇文章，所以借鑒學習一下，好了，先看看他的代碼吧。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridView.aspx.cs" Inherits="GridView" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <mce:script runat="server"></mce:script> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title > 使用 AJAX，局部刷新 GridView 进行数据绑定的简单实现 </title > <script type ="text/javascript" > function GetData(p) { document.getElementById( "d" ).innerHTML = " 正在读取数据…… " ; h = window.XMLHttpRequest?new window.XMLHttpRequest():new ActiveXObject("MSXML2.XMLHTTP"); h.open( "GET" , '<%=Request.FilePath%>?id='+p.value, true ); h.onreadystatechange = function () { if (h.readyState == 4 ) { if (h.status >= 200 && h.status < 300 ) { document.getElementById( "d" ).innerHTML = h.responseText; } else { document.getElementById( "d" ).innerHTML = " <h2>数据操作错误：</h2> " + h.responseText; } } } h.send( null ); } alert( " 这个提示，只出现在第一次打开页面。 " ); </script > </head> <body> <form id ="form1" runat ="server" > <asp:GridView ID ="GridView1" runat ="server" ></asp:GridView > <asp:Panel ID ="Header" runat ="server" ></asp:Panel > <select onchange ="GetData(this)" > <option value ="1" > 项目一 </option > <option value ="2" > 项目二 </option > </select > </form > <div id ="d" ></div > </body> </html>

根據學習自己也做了個測試學習。舉一反三嘛。以後還是這樣跟大家好好的學習！

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <mce:script runat="server"></mce:script> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title > 使用 AJAX，局部刷新 GridView 进行数据绑定的简单实现 </title > <script type ="text/javascript" > function GetData(p) { document.getElementById( "d" ).innerHTML = " 正在读取数据…… " ; h = window.XMLHttpRequest?new window.XMLHttpRequest():new ActiveXObject("MSXML2.XMLHTTP"); h.open( "GET" , '<%=Request.FilePath%>?id='+p.value, true ); h.onreadystatechange = function () { if (h.readyState == 4 ) { if (h.status >= 200 && h.status < 300 ) { document.getElementById( "d" ).innerHTML = h.responseText; } else { document.getElementById( "d" ).innerHTML = " <h2>数据操作错误：</h2> " + h.responseText; } } } h.send( null ); } </script > </head> <body> <form id ="form1" runat ="server" > <asp:GridView ID ="GridView1" runat ="server" ></asp:GridView > <asp:Panel ID ="Header" runat ="server" ></asp:Panel > <select onchange ="GetData(this)" > <option value ="1" > 项目一 </option > <option value ="2" > 项目二 </option > </select > </form > <div id ="d" ></div > </body> </html>