【问题标题】:jQuery Ajax call to database on click ASP.net单击 ASP.net 时 jQuery Ajax 调用数据库
【发布时间】:2013-07-30 13:43:10
【问题描述】:

假设我在 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

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

[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 文本。如果我将(数据)更改为“测试”,那么我会在屏幕上得到正确的“测试”输出。所以故障部分在 Ajax 调用的success 部分。我在 GetData 函数上设置了一个断点,stateNotes 正在接收正确的文本值,所以唯一存在问题的地方是 ajax 调用的success 行。

【问题讨论】:

  • 把你的数据改成数据:"{'stateName' : '" + $(this).text() + "'}",
  • 在您的 return 语句上放置一个断点,确保代码到达该行并具有预期的值。
  • @Jay 是的,它正在从数据库中读取并获取正确的值。

标签: c# jquery ajax


【解决方案1】:

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

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

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

但大多数情况下,我只看到第二个可以工作,部分原因是 jQuery 没有预处理 data 选项,因为它在 C# 中是可读的。因此,始终建议在 ajax 请求上使用 stringify,并将 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 选项。那么调试起来会更容易。 Read this if you want to know why the result returns data.d and not just 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);
   }
});

希望这会有所帮助!

【讨论】:

  • 那是我不太确定的部分。让我测试一下,看看她说了什么。
  • 是的,我认为您的解决方案正是我所需要的,但我遇到了更多麻烦,在接受之前我应该​​更彻底地进行测试。我仍在努力尝试让它发挥作用,除非出现奇迹,否则我将更新我的问题以反映我的新问题。感谢您的勤奋! :)
  • @wootscootinboogie 当您在内部成功创建console.log(data) 时会得到什么?
  • 终于让它和你的编辑一起工作了!我发誓我(以为)我做了十几次同样的事情,但现在终于奏效了
猜你喜欢
  • 1970-01-01
  • 2013-08-27
  • 2013-05-13
  • 1970-01-01
  • 2011-06-09
  • 1970-01-01
  • 2013-11-28
  • 1970-01-01
  • 2011-12-21
相关资源
最近更新 更多