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，因为我知道这会导致您在以后将代码移动到子页面控件时出现问题。因此，使用类似于$("[id*=Button1]")的jQuery选择器来正确选择元素。

<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);
      }
    });
  });
});

在asp.net中使用Ajax Jquery调用webservice

2 个答案:

编辑：

原始答案：

输出：

响应：