假设我在 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 调用的成功部分。我在 GetData 函数上设置了一个断点，并且 stateNotes 正在接收正确的文本值，因此问题出现的唯一位置是在 ajax 调用的 success 行中.
最佳答案
我认为您在 ajax 中格式化 data 选项的方式可能是错误的。它始终以键值对的形式运行。在当前表单中，您仅发送值，没有 key 。您可能需要将其更改为以下格式:
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。您会发现您的数据就在其中。另外，如前所述(我无法强调这一点)，请使用带有 xhr 选项的 error 处理程序。那么调试起来就容易多了。 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);
}
});
希望这有帮助!
关于c# - 单击 ASP.net 时对数据库的 jQuery Ajax 调用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17929665/