使用 JQuery 调用 WebMethod
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/563133/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using JQuery to call a WebMethod
提问by Dave Ward
I am having trouble getting inside my Search WebMethod from my JQuery call. Maybe someone could help to point me in the right direction.
我无法通过 JQuery 调用进入我的 Search WebMethod。也许有人可以帮助我指出正确的方向。
I also packed up everything into a zip file incase someone wants to check it out for a closer look.
我还将所有内容打包成一个 zip 文件，以防有人想仔细查看。
http://www.filedropper.com/jsonexample
http://www.filedropper.com/jsonexample
Thanks Ryan
谢谢瑞恩
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!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>JSON Example</title>
<script type="text/javascript" language="JavaScript" src="jquery-1.3.1.min.js"></script>
<script type="text/javascript" language="javascript">
function Search() {
var search = $("#searchbox").val();
var options = {
type: "POST",
url: "Default.aspx/Search",
data: "{text:" + search + "}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
alert('Success!');
}
};
$.ajax(options);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<input type="text" id="searchbox" size="40" />
<a href="#" onclick="Search()" id="goSearch">Search</a>
<br />
<div id="Load" />
</form>
</body>
</html>
And here is the code behind for the default.aspx
这是 default.aspx 背后的代码
Imports System.Data
Imports System.Web.Services
Imports System.Web.Script.Serialization
Partial Class _Default
Inherits System.Web.UI.Page
<WebMethod()> _
Public Shared Function Search(ByVal text As String) As IEnumerable
Return "test"
End Function
End Class
回答by Dave Ward
To solve a problem like this, the first thing to do is watch it in Firebug.
要解决这样的问题，首先要做的是在 Firebug 中观察它。
If you click the "Search" link and watch the POST request/response in Firebug's console, you'll see it's throwing a 500 server error: Invalid JSON Primitive.
如果您单击“搜索”链接并在 Firebug 的控制台中查看 POST 请求/响应，您将看到它抛出了 500 服务器错误：无效的 JSON 原语。
The reason for that is because the key/value identifiers in your "data" JSON literal aren't quoted. Line 17 should be:
原因是因为您的“数据”JSON 文字中的键/值标识符没有被引用。第 17 行应该是：
data: "{'text':'" + search + "'}",
Then, all will work as expected.
然后，一切都会按预期进行。
Note:The suggested data { test: search } will notwork. If you provide jQuery with an actual JSON literal instead of a string, it will convert that into a key/value pair of test=search and POST that instead of the JSON. That will also cause an ASP.NET AJAX ScriptService or PageMethod to throw the Invalid JSON Primitive error.
注：建议的数据{测试：搜索}将不能工作。如果您为 jQuery 提供实际的 JSON 文字而不是字符串，它会将其转换为 test=search 和 POST 的键/值对，而不是 JSON。这也会导致 ASP.NET AJAX ScriptService 或 PageMethod 抛出 Invalid JSON Primitive 错误。
回答by flesh
You need to do the following (C#):
您需要执行以下操作（C#）：
- The WebMethod must be
public static - It must be decorated with the
[WebMethod]attribute - You need a ScriptManager on your .aspx page
- Set the ScriptManager's
EnablePageMethods="true"
- WebMethod 必须是
public static - 它必须用
[WebMethod]属性装饰 - 您的 .aspx 页面上需要一个 ScriptManager
- 设置 ScriptManager 的
EnablePageMethods="true"
And here is some sample javascript:
这是一些示例javascript：
$().ready(function() {
$(yourDropDownList).change(LoadValues);
});
function LoadValues() {
PageMethods.YourMethod(arg1, CallSuccess, CallFailed);
}
function CallFailed(result) {
alert('AJAX Error:' + result.get_message());
}
function CallSuccess(result) {
//do whatever you need with the result
}
