VS2005+Jquery 调用Web service返回数据集实现无刷新数据动态更新

来源：互联网发布：html源码yuansms 编辑：程序博客网时间：2024/05/16 09:06

因为最近要做一个项目，页面需要实现无刷新数据动态更新。

思路通过Jquery的AJax传参数到Web service，然后返回数据集在页面呈现出来。

Step1. 如果是VS2005需要引用Ajax控件

step2.配置webconfig，可以远程访问

step3. web service写function

step4.Html页面代码

Web service 代码

Imports System.WebImports System.Web.ServicesImports System.Web.Services.ProtocolsImports system.Web.ScriptImports System.DataImports System.Xml<WebService(Namespace:="http://tempuri.org/")> _<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _<System.Web.Script.Services.ScriptService()> _Public Class WebService    Inherits System.Web.Services.WebService    Dim str As String = PublicFunction.getconnStr("ldsfisdb")    <WebMethod()> _    Public Function HelloWorld() As String        Return "Hello World"    End Function  <WebMethod()> _      Public Function Getperson(ByVal line As String, ByVal shift As String, ByVal area As String) As DataSet        Dim ds2 As DataSet        Dim sql As String        Dim i As Integer        Dim DS As DataSet = New DataSet()        sql = " select  OWNER,TOTALPERSON,ACTUALPERSON  " & _                "from c_report_param_extent_t where line_name='" & line & "'  and section_type='" & area & "' and SHIFT_CODE='" & shift & "'  "        ds2 = OracleHelper.ExecuteDataset(str, CommandType.Text, sql)        Dim DT As DataTable = New DataTable()        DT.Columns.Add("TOTALPERSON", Type.GetType("System.String"))        DT.Columns.Add("ACTUALPERSON", Type.GetType("System.String"))        DT.Columns.Add("OWNER", Type.GetType("System.String"))        Dim DR As DataRow = DT.NewRow()        If ds2.Tables(0).Rows.Count > 0 Then            For i = 0 To ds2.Tables(0).Rows.Count - 1                               DT.Rows.Add(ds2.Tables(0).Rows(0).Item("TOTALPERSON").ToString(), ds2.Tables(0).Rows(0).Item("ACTUALPERSON").ToString(), _                            ds2.Tables(0).Rows(0).Item("OWNER").ToString())            Next            DS.Tables.Add(DT)        End If        Return DS    End FunctionEnd Class

Web.config设定

<?xml version="1.0"?><!--    注意: 除了手动编辑此文件以外，您还可以使用    Web 管理工具来配置应用程序的设置。可以使用 Visual Studio 中的     “网站”->“Asp.Net 配置”选项。    设置和注释的完整列表在    machine.config.comments 中，该文件通常位于    \Windows\Microsoft.Net\Framework\v2.x\Config 中--><configuration>    <appSettings/>    <connectionStrings/>    <system.web>                <!--            设置 compilation debug="true" 将调试符号插入            已编译的页面中。但由于这会            影响性能，因此只在开发过程中将此值            设置为 true。        -->        <compilation debug="true">            <assemblies>              <add assembly="System.Windows.Forms, Version=2.0.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089"/>                <add assembly="System.Design, Version=2.0.0.0, Culture=neutral, PublicKeyToken=B03F5F7F11D50A3A"/>                <add assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>                <add assembly="System.Web.Extensions.Design, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>                <add assembly="System.Data.OracleClient, Version=2.0.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089"/></assemblies></compilation>    <webServices >      <protocols >        <add name="HttpSoap"/>        <add name="HttpPost"/>        <add name="HttpGet"/>        <add name="Documentation"/>      </protocols>    </webServices>        <!--            通过 <authentication> 节可以配置 ASP.NET 使用的            安全身份验证模式，            以标识传入的用户。        -->    <httpHandlers>      <remove verb="*" path="*.asmx"/>      <add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>    </httpHandlers>        <authentication mode="Windows"/>        <!--            如果在执行请求的过程中出现未处理的错误，            则通过 <customErrors> 节可以配置相应的处理步骤。具体说来，            开发人员通过该节可以配置            要显示的 html 错误页            以代替错误堆栈跟踪。        <customErrors mode="RemoteOnly" defaultRedirect="GenericErrorPage.htm">            <error statusCode="403" redirect="NoAccess.htm" />            <error statusCode="404" redirect="FileNotFound.htm" />        </customErrors>        -->    </system.web></configuration>

JavaScript

  <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script>//局部定时刷新      $(document).ready(function () {         setInterval("gettime()",1000);        });        function gettime()        {                $('#date2').text((new Date()).toString());          };     </script>   <script>//局部定时刷新      $(document).ready(function () {         setInterval("startRequest()",10000);        });        function startRequest()        {                $('#divlabel').html('data loading.....');           $('#Button1').trigger("click");//触发Button1按钮           $('#Button2').trigger("click");//触发Button2按钮                    };     </script>  <script>     $(document).ready(function(){        var tline=$('#inputline').val();        var tshift=$('#inputshift').val();        var tarea=$('#inputarea').val();         $('#Button1').click(function() {                $.ajax({                    type: "POST",                    url: "WebService.asmx/Getperson",                    data: {line:tline,shift:tshift,area:tarea},                    dataType: 'xml', //返回的类型为XML ，和前面的Json，不一样了                    success: function(result) {                    //演示一下捕获                        try {                             $(result).find("Table1").each(function() {                              $('#tdswp').html($(this).find("TOTALPERSON").text());                                $('#tdact').html($(this).find("ACTUALPERSON").text());                                                              $('#tdleader').html($(this).find("OWNER").text());                                                   });                        }                        catch (e) {                            alert(e);                            return;                        }                    },                    error: function(result, status) { //如果没有上面的捕获出错会执行这里的回调函数                        if (status == 'error') {                            alert(status+''+line+'  '+shift+'  '+area);                        }                    }                });                                            });                               });           </script>