在 asp.net 中使用 Ajax Jquery 调用 web 服务

Question

我有一个要求，我需要使用 jQuery AJAX 调用来调用 Web 服务。为此，我创建了WebService 并创建了一个客户网站。不幸的是，我无法调用它。 AJAX 调用根本没有触发。

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService
{
  public WebService()
  {   
    //Uncomment the following line if using designed components 
    //InitializeComponent(); 
  }

  [WebMethod]
  public string getMessage(string name)
  {
    return "Hello " + name;
  }
}

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="GetMessage" Style="height: 26px"/>
<asp:Label ID="Label1" runat="server" Font-Bold="True"></asp:Label>
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>.

$(document).ready(function () {
  $('#Button1').click(function () {
    alert(1);

    $.ajax({
      type: 'post',
      CORS: true,
      url: 'http://localhost/WebService/Hello.asmx?op=getMessage',
      contentType: "application/xml",
      data: { name: 'aa' },
      success: function (d) {
        alert(d);
      },
      failure: function (response) {
        debugger;
        alert(response.d);
      }
    });
  });
});

我正在尝试从客户端应用程序访问 Web 服务。我正在 URL 路径中传递 ASMX 文件。我也提供了服务参考。不幸的是，它没有触发。 AJAX有什么错误吗？有人可以帮忙吗？它没有显示任何错误。

Answer 1

编辑：

为了完整和证明，我创建了一个git repository of this solution 并上传到GitHub。您可以clone or download 源代码，在 Visual Studio 2012（或 +）中打开它，然后按 F5 运行它以验证解决方案是否正常工作。您可以根据需要进行修改。

---

原答案：

我希望您使用的是 jQuery 参考，因为您在问题中错过了它。下面给出的是使用 jQuery 在 ASP.NET 中使用 WebService 代码的工作解决方案。

请使用相对路径，这样如果您在开发或部署中运行应用程序，它就不会给您带来问题。其次，目前您只是选择 asp.net 控件 ID，因为我知道当您将代码移动到子页面的控件时，这会导致您以后出现问题。所以使用 jQuery 选择器类似：$("[id*=Button1]") 来正确选择元素。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("[id*=Button1]").click(function () {
            var message = $("[id*=TextBox1]").val();

            $.ajax({
                type: "POST",
                url: "WebService.asmx/getMessage",
                data: "{ name: '" + message + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) {
                    alert(r.d);
                },
                error: function (r) {
                    alert(r.responseText);
                },
                failure: function (r) {
                    alert(r.responseText);
                }
            });
            return false;
        });
    });
</script>

---

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="GetMessage" Style="height: 26px"/>
<asp:Label ID="Label1" runat="server" Font-Bold="True"></asp:Label>
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>

---

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

/// <summary>
/// Summary description for WebService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService
{

    public WebService()
    {
        //Uncomment the following line if using designed components 
        //InitializeComponent(); 
    }

    [WebMethod]
    public string getMessage(string name)
    {
        return "Hello " + name;
    }
}

---

输出：

回应：

Answer 2

这是因为 ASP 按钮 id Button1 在 javascript 中不可用，所以为该按钮添加一个类，例如，

<asp:Button ID="Button1" class="getMessage" runat="server" Text="GetMessage" Style="height: 26px"/>

而在 jQuery 中使用，

$(document).ready(function () {
  $('.getMessage').click(function () { // use getMessage class here
    alert(1);
    $.ajax({
      type: 'post',
      // CORS: true, remove this line there is no settings like CORS
      url: 'http://localhost/WebService/Hello.asmx?op=getMessage',
      contentType: "application/xml",
      data: { name: 'aa' },
      success: function (d) {
        alert(d);
      },
      failure: function (response) {
        debugger;
        alert(response.d);
      }
    });
  });
});