por Cesar Cassiano Schimanco

Consumindo WebService com jQuery em ASP.NET C# (Ajax)

Exemplo bem simples de como consumir um WebService usando jQuery em ASP.NET.

Abaixo o código de um WebService padão, gerado automaticamente pelo Visual Studio ao criar um novo WebService.
Importante lembrar que por padrão o webservice vem com uma lina de código comentada, e é fundamental descomentá-la para que nosso código funcione.
[System.Web.Script.Services.ScriptService]
 

App_Code/WebService.cs

using System;
using System.Collections;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;

/// <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 HelloWorld() {
        return "Hello World";
    }
    
}

 test.aspx

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Teste</title>
    <script src="/js/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    function GetData() {
        $.ajax({
            type: 'POST'
                //Caminho do WebService + / + nome do metodo
                , url: "/webservices/WebService.asmx/HelloWorld"
                , contentType: 'application/json; charset=utf-8'
                , dataType: 'json'
                //Abaixo adicione as variáveis caso haja alguma.
                , data: ''
                , success: function (data, status) {
                    //Caso não ocorra nenhum tipo de erro:
                    $('.valor').text(data.d);
                }
                , error: function (xmlHttpRequest, status, err) {
                    //Caso ocorra algum erro:
                    $('.valor').html('Ocorreu um erro');
                }
        });
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div>
            <strong>Valor:</strong><span class="valor">Null</span>
        </div>
        <input type="button" onclick="GetData();" value="Pegar valor" />
    </div>
    </form>
</body>
</html>

 Donwload dos arquivos

Comentários

Carregando comentários

Postar um novo comentário



Processando...