Записи с меткой «Веб-сервис»

PostHeaderIcon JSON + Веб-сервис + JavaScript

Взаимодействие JavaScript c Веб-сервисом с использованием формата JSON.

Код ASPX-страницы

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $.ajax({
                type: "POST",
                url: "WebService1.asmx/GetEmployees",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    var employees = JSON.parse(msg.d);
                    var content = [];
                    content.push('<table>');
                    for (var i = 0; i < employees.length; i++) {
                        content.push('<tr><td>');
                        content.push(employees[i].Name);
                        content.push('</td><td>');
                        content.push(employees[i].ID);
                        content.push('</td><td>');
                        content.push(employees[i].Age);
                        content.push('</td></tr>');
                    }
                    content.push('</table>');
                    $('#Content').append(content.join(''));
                },
                error: function (msg) {
                    alert("Ошибка! " + msg);
                }
            });
        });
    </script>
</asp:Content>

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <div id="Content"></div>
</asp:Content>

Код Веб-сервиса

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

namespace WebApplication1
{
    [WebService(Namespace = "http://buseng.ru/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    [ScriptService]
    public class WebService1 : WebService
    {
        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public string GetEmployees()
        {
            var employee1 = new Employee { Name = "Pini", ID = "111", Age = "30" };
            var employee2 = new Employee { Name = "Yaniv", ID = "Cohen", Age = "31" };
            var employee3 = new Employee { Name = "Yoni", ID = "Biton", Age = "20" };
            var employees = new List { employee1, employee2, employee3 };
            var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
            var jsonStr = serializer.Serialize(employees);
            return jsonStr;
        }
    }

    public class Employee
    {
        public string Name { get; set; }
        public string Age { get; set; }
        public string ID { get; set; }
    }
}

В результате выполнения JS-кода, при загрузке страницы будет произведен запрос к сервису и оттуда получены данные о сотрудниках в формате JSON. Эти данные потом будут отображены в виде таблицы:

Pini 111 30
Yaniv Cohen 31
Yoni Biton 20

Источники