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

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

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

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

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

step3. web service写function

step4.Html页面代码

Web service 代码

Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports system.Web.Script
Imports System.Data
Imports 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 Function
End 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>