2

假设我在 SQL Server 数据库中有一个表,看起来像

StateName  notes
alabama    'notes about alabama'
alaska     'notes about alaska'
.....      .........

编辑:这个问题将分为两部分,一个是针对最初的问题以及为什么它不起作用以及我的改革,希望更准确的第二个解决方案。

在 Web 表单中,状态的名称表示为表格内的链接按钮。我正在尝试使用 jQuery 进行 Ajax 数据库调用,当用户单击状态名称时,链接按钮的文本值将被发送到数据库中的存储过程。该存储过程类似于

create proc spGetStateData
@stateName varchar(50)
as
begin
select notes from 
states
where statename = @stateName
end

出于测试目的,我添加了一个文本框和一个按钮,以便当用户在文本框中键入状态名称时,会显示数据库表 中的Notes列。States

[WebMethod]
        public static string GetStateData(string stateName)
        {
            string stateNotes = string.Empty;
            string cs = ConfigurationManager.ConnectionStrings["dbcs"].ConnectionString;
            using (SqlConnection con = new SqlConnection(cs))
            {
                using (SqlCommand cmd = new SqlCommand("spGetStateData", con))
                {
                    con.Open();
                    cmd.CommandType = CommandType.StoredProcedure;
                    cmd.Parameters.AddWithValue("@stateName", stateName);
                    stateNotes = cmd.ExecuteScalar().ToString();
                }
            }
            return stateNotes;
        }

        protected void btnSubmit_Click(object sender, EventArgs e)
        {
            lblStateNotes.Text = GetStateData(txtStateName.Text);
            hiddenDiv.Visible = true;
        }

这部分有效,所以我知道失败的不是我的 WebMethod 或数据库连接。当我尝试用 jQuery 做同样的事情时,它失败了。

<script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $("#states a").click(function () {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "WebForm1.aspx/GetStateData",
                    data: $(this).text(),
                    dataType: "json",
                    success: function (data) {
                        response(data.d);
                    },
                    error: function (x) {
                        alert('error');
                    }
                });
            });
        });

    </script>

好的,我打开了 Chrome 的开发人员工具,发现 AJAX 失败的原因是我收到“无法加载资源 HTTP 500 错误”。它告诉我找不到方法名称和参数(即使它们在那里)。所以我尝试了第二种方法,这似乎是一种更好的方法(如果我能让它工作的话!)

所以我想'让我们使用WebService'。这是我的演绎:

<!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>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("a").click(function () {
                var stateName = JSON.stringify({ "stateName": $(this).text() });
                $.ajax({
                    type: "POST",
                    url: "GetStateData.asmx/GetData",
                    contentType: "application/json; charset=utf-8",
                    data: stateName,
                    dataType: "json",
                    success: function (data) {
                        $("#lblNotes").text(data);
                    },
                    error: function (x) {
                        alert('message');
                    }
                });
            });

        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <a href="#">Alabama</a>
    <a href="#">Alaska</a>
    <asp:Label runat="server" ID="lblNotes"></asp:Label>

    </div>
    </form>
</body>
</html>

网络服务:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web.Script.Services;

namespace jQueryAjaxWebservice
{

    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]

    [System.Web.Script.Services.ScriptService]    
    public  class GetStateData : System.Web.Services.WebService
    {

        [WebMethod]
        [ScriptMethod]
        public string GetData(string stateName)
        {
            string cs = ConfigurationManager.ConnectionStrings["dbcs"].ConnectionString;
            string stateNotes ="test" ;
            using (SqlConnection con = new SqlConnection(cs))
            {
                using (SqlCommand cmd = new SqlCommand("spGetStateData",con))
                {
                    con.Open();
                    cmd.CommandType = CommandType.StoredProcedure;
                    cmd.Parameters.AddWithValue("@stateName", stateName);
                    stateNotes = cmd.ExecuteScalar().ToString();
                }

            }
           return stateNotes;
        }
    }
}

我已经测试了 WebService,它可以工作。但是,当我尝试从 default.aspx 调用 Web 服务代码时,我得到[Object object]的是lblNotes文本。如果我将(数据)更改为“测试”,那么我会在屏幕上得到正确的“测试”输出。所以错误的部分是在successAjax 调用的部分。我在 GetData 函数上放置了一个断点,并且stateNotes正在接收正确的文本值,因此唯一存在问题的地方是在successajax 调用的行中。

4

1 回答 1

6

我认为您格式化data选项的方式ajax可能是错误的。它总是在键值对中工作。在当前表单中,您只发送值,没有键。您可能必须将其更改为这种格式:

var stateName = { "stateName" : $(this).text()}

或者

var stateName = JSON.stringify({ "stateName" : $(this).text()})

但大多数情况下,我只看到第二个工作,部分原因是 jQuery 没有预处理它在 C# 中可读的data选项。因此,始终建议在设置为stringifyajax请求上使用。type"POST"

然后,在你的ajax电话中,

$.ajax({
   //ajax options
   data : stateName
   //some more ajax options
});

此外,您可能希望使您的error选项更具描述性,如下所示:

 $.ajax({
       //ajax options
       error: function (xhr, ajaxOptions, thrownError) {
         alert(xhr.status);
         alert(thrownError);
       }
 });

这会告诉你哪里出错了,你也可以调试它。

编辑:

success函数中,尝试寻找data.d而不是data. 你会发现你的数据就在里面。另外,如前所述(我不能强调这一点),请使用带有选项的error处理程序。xhr那么调试起来会更容易。如果您想知道结果返回的原因,请阅读本文data.d,而不仅仅是data.

$.ajax({
   //some ajax options
   success: function (data) {
        //data.d will contain your data
        console.log(data.d);
        $("#lblNotes").text(data.d);
   },
   error: function (xhr, ajaxOptions, thrownError) {
         console.log(xhr);
         alert(xhr.status);
         alert(thrownError);
   }
});

希望这可以帮助!

于 2013-07-29T16:52:37.503 回答