65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 Web 服务进行 jQuery 入门

Andy Marshall
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.43/5 (11投票s)

2012年3月19日

CPOL

5分钟阅读

viewsIcon

149094

使用 SQL Server、Web 服务进行 jQuery 的基本介绍

引言   

随着 jQuery 的普及，我们经常被问到有关与数据库集成的各种问题。本文面向的是那些刚开始接触 jQuery 世界并希望将页面与数据库集成的读者。同样的原则也可以用于其他数据源，例如 XML。

背景

第一阶段是加载一个简单的 HTML，当用户输入会员编号时，显示一个虚构会员数据库中的会员详细信息。此设计并非旨在提供安全机制，而是纯粹用于解释过程中的步骤。 之后，代码会进行扩展，展示如何使用集合而不是简单的文本。

显示简单文本

我们将要介绍的第一种方法是，将基本信息发送回客户端并在一个容器中显示。我们首先在页面上设置标准的 Javascript 块。第一个脚本调用库，在本例中，它使用 Visual Studio 自带的标准 js 文件。

<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">

//jQuery code will go here...

</script>

接下来，我们设置将位于页面 HTML 本身中的 HTML。

<ul>
    <li>
        <label>Member ID</label>
        <input id="member_id" type="text" />
        <input id="blnLoadMember" type="button" value="Get Details" />
    </li>
</ul>
    


<div id="MemberDetails"></div>

接下来，我们添加 jQuery 脚本元素。由于这是一个将由用户交互调用的过程，我们需要添加脚本，并为页面上添加的按钮添加一个事件。

function GetMember() {
    $('input[type=button]').attr('disabled', true);
    $("#MemberDetails").html('');
    $("#MemberDetails").addClass("loading");
    $.ajax({
        type: "POST",
        url: "Members.asmx/GetMemberDetails",
        data: "{'MemberNumber': '" + $("#txt_id").val() + "'}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: OnGetMemberSuccess,
        error: OnGetMemberError
    });
}

function OnGetMemberSuccess(data, status) {
    //jQuery code will go here...
}

function OnGetMemberError(request, status, error) {
    //jQuery code will go here...
}

该过程使用了三个函数。虽然可以将它们合并以使脚本更高效，但此处仍将其保留为三个单独的函数，以便于解释它们所代表的不同过程步骤。

GetMember

这是我们过程中的主要阶段，由按钮单击调用。调用后，它会执行多个阶段：

  1. 将按钮设置为禁用状态 - 防止重复单击
  2. 清空 MemberDetails div 中的 HTML。
  3. 向 div 添加 loading 类 - 在实际中，这将显示一个加载图标。
  4. 调用 ajax 元素来处理数据
  5. 通过调用适当的函数来处理成功或错误结果。

我们的代码将利用 Web 服务从 SQL Server 返回数据，并通过指定一些参数来调用它：

  • type - 根据您的需求，通常会在此处使用 Get 或 Post。
  • url - 到 web service asmx 文件以及您要调用的 web 方法的路径。
  • data - 在本例中，是我们将要传递的 MemberNumber。
  • contentType, dataType - 指定我们将使用 json 格式。
  • success - 成功时要执行的操作。
  • error - 发生错误后要执行的操作。

data: "{'MemberNumber': '" + $("#member_id").val() + "'}"

在这里，作为 **MemberNumber** 发送的数据来自对 **member_id** 对象的调用。在本例中，它是页面上的文本框。

接下来是过程的 Web 服务元素。这是一个简单的服务，设置为使用 SQLDataReader 并从 SQL Server 检索数据。Web 服务放置在 members.asmx 文件中。

Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.Data.SqlClient
Imports System.Data
Imports System.Web.Script.Services


<WebService(Namespace:="<a href="http://tempuri.org/">http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<System.Web.Script.Services.ScriptService()> _
Public Class Members
    Inherits System.Web.Services.WebService


<WebMethod()> _
Public Function GetMemberDetails(MemberNumber As String) As String
    Dim con As SqlConnection
    Dim dr As SqlDataReader
    Dim cmd As New SqlCommand
    Dim Details As String = String.Empty
    Dim ConString As String = ConfigurationManager.ConnectionStrings("CMS_Database").ToString
    con = New SqlConnection(ConString)
    con.Open()

    Try

        With cmd
            .CommandType = CommandType.Text
            .CommandText = "SELECT strMemberNumber, strScreenName, strForename, strSurname, strEmail " _
                         & "FROM Memberships WHERE strMemberNumber = @strMemberNumber"
            .Connection = con
            .Parameters.AddWithValue("@strMemberNumber", MemberNumber)
        End With

        dr = cmd.ExecuteReader

        While dr.Read()
            Details = "<table><tr><tr><td>" & dr("strMemberNumber").ToString() & "</td></tr>" _
                    & "<tr><td>" & dr("strScreenName").ToString() & "</td></tr>" _
                    & "<tr><td>" & dr("strForename").ToString() & " " & dr("strSurname").ToString() & "</td></tr>" _
                    & "<tr><td>" & dr("strEmail").ToString() & "</td></tr></table>"
        End While

        con.Close()
        Return Details

    Catch x As Exception
        Return x.ToString()
    Finally
        con.Dispose()
    End Try

End Function

End Class

Web 服务接收调用并处理到数据库的调用，数据库将用户详细信息存储为包含表 HTML 的字符串。

然后返回此字符串。

请注意，数据以 data.d json 格式包装返回，这是为了防止直接传递脚本数据。

返回后，将调用成功过程，如下所示：

function OnGetMemberSuccess(data, status) {
    $("#MemberDetails").removeClass("loading");
    $("#MemberDetails").html(data.d);
    $('input[type=button]').attr('disabled', false);
}

从容器中移除“loading”类。接下来，将整个数据写入容器内的 HTML。

如果遇到错误，将调用 onGetMemberError 函数，并以相同的方式显示错误。

function OnGetMemberError(request, status, error) {
    $("#MemberDetails").removeClass("loading");
    $("#MemberDetails").html(request.statusText);
    $('input[type=button]').attr('disabled', false);
}

每次调用后，按钮都会再次启用，以允许处理。

最后，我们为按钮添加事件处理程序，该处理程序将调用 jQuery 脚本本身。

<input id="blnLoadMember" type="button" value="Get Details" onclick="GetMember(); return false;"/>

这样就完成了简单的调用部分，展示了如何处理一个简单的调用——显示 Web 服务返回的文本。

显示集合

有时，我们需要的不仅仅是显示简单的文本，可能希望以一种可以在多个最终客户端上显示的数据格式返回数据。在这种情况下，只返回原始数据，并由客户端决定格式。

首先，我们再次输入页面的核心元素，就像之前一样。

<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">

//jQuery code will go here...

</script>

接下来，我们设置将位于页面 HTML 本身中的 HTML。

<p><input id="btnLoadAll" type="button" value="Get All Members" /></p>

<div id="MemberList"></div>

接下来，我们添加 jQuery 脚本元素。这与我们第一个简单示例的布局相似。

function GetAllMembers() {
    $("#MemberList").html('');
    $("#MemberList").addClass("loading");
    $.ajax({
        type: "POST",
        url: "Members.asmx/GetAllMembers",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: OnGetAllMembersSuccess,
        error: OnGetAllMembersError
    });
}

function OnGetAllMembersSuccess(data, status) {
    //jQuery code will go here...
}

function OnGetAllMembersError(request, status, error) {
    //jQuery code will go here...
}

由于我们希望在此过程中检索所有数据，因此我们不将任何数据传递给 web 方法，而是以相同的方式处理返回的数据。

Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.Data.SqlClient
Imports System.Data
Imports System.Web.Script.Services

Public Class Member

    Public ScreenName As String
    Public MemberNumber As String
    Public Forename As String
    Public Surname As String
    Public Email As String

End Class


<WebService(Namespace:="<a href="http://tempuri.org/">http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<System.Web.Script.Services.ScriptService()> _
Public Class Members
    Inherits System.Web.Services.WebService

<WebMethod()> _
Public Function GetAllMembers() As List(Of Member)
    Dim con As SqlConnection
    Dim dr As SqlDataReader
    Dim cmd As New SqlCommand
    Dim Details As String = String.Empty
    Dim ConString As String = ConfigurationManager.ConnectionStrings("CMS_Database").ToString
    con = New SqlConnection(ConString)
    con.Open()

    Try

        With cmd
            .CommandType = CommandType.Text
            .CommandText = "SELECT strMemberNumber, strScreenName, strForename, strSurname, strEmail " _
                         & "FROM Memberships ORDER BY strSurname"
            .Connection = con
        End With

        dr = cmd.ExecuteReader

        Dim Members As New List(Of Member)

        While dr.Read()

            Dim Member As New Member

            With Member
                .ScreenName = dr("strScreenName")
                .MemberNumber = dr("strMemberNumber")
                .Forename = dr("strForename")
                .Surname = dr("strSurname")
                .Email = dr("strEmail")
            End With

            Members.Add(Member)

        End While

        con.Close()
        Return Members

    Catch x As Exception

    Finally
        con.Dispose()
    End Try

End Function

End Class

当调用 Web 方法时，SQLDataReader 遍历结果，创建 Member 类的实例以添加到列表中。然后通过 web 服务返回此列表。

成功完成数据处理后，脚本会遍历结果并按如下方式显示它们。

function OnGetAllMembersSuccess(data, status) {
    $("#MemberList").removeClass("loading");
    var members = data.d;
    $('#MemberList').empty();
    $.each(members, function (index, member) {
       $('#MemberList').append('<ul><li><label>Screen Name</label>' + member.ScreenName + '</li>' +
                     '<li><label>Number</label>' + member.MemberNumber + '</li>' +
                     '<li><label>Name</label>' + member.Forename + ' ' + member.Surname + '</li>' +
                     '<li><label>Email</label>' + member.Email + '</li></ul>');
    });
}

然后遍历 json 格式响应中的每个条目，并将每个相关键写入页面。结构复制了用于填充数据的 Member 类中所创建的结构。

然后可以使用 CSS 格式化写入容器的结果，以使其与网站采用的样式相匹配。

最后，为按钮添加事件处理程序以调用脚本。

<input id="btnLoadAll" type="button" value="Get All Members" onclick="GetAllMembers(); return false;"/>

关注点

这只是一个简单的演示，用于展示通过 web 服务利用数据源的过程。在此示例中，我们使用了 SQL Server 数据库和 SQLDataAdapter - 然而，任何数据源都可以使用。

如果您使用的是 Visual Studio 或其他 RAD 工具，请注释掉以下行：

<System.Web.Script.Services.ScriptService()> _

您应该确保启用它们，以便从脚本调用 webmethods。

© . All rights reserved.